Fry's Electronics site Redesign

Brief

Fry's Electronics is a retail electronics store that provides a one-stop-shopping environment for the Hi-Tech Professional with products representing the latest technological trends and advances in the personal computer marketplace.

Note: This is not affiliated with Fry's Electronics, Inc. This is a concept project done under General Assembly to practice and refine UX skills.

My goal was to improve the customer’s online shopping experience by reorganizing the information architecture and simplifying check out flow.

Tools: Sketch, Invision, Pen, Paper

Time: 3 weeks 

My Role: UX/UI Designer (Solo Project)

 
ux process.png
 

research


Heuristic Evaluation

Competitive Analysis

 

I did a heuristic evaluation of the site based on accepted usability principles. I searched through the site to find issues that violated a usability quality and gave it a rating based on a 0-4 scale (0 = Not a usability problem 4 = Usability catastrophe). There were a few 3-4 rated issues I found and most of them were a efficiency violation.

I created a competitive analysis between Fry’s and their competitors for market research. Though Fry's provides a good amount of features for customers, it was interesting to find Fry's not having a guest check out whereas all the competitors have the feature.

 
 
 

User Interviews

I recruited and interviewed 5 people who have bought electronic products online within the past year. My goal was to find user's shopping behaviors and preferences. After each interview, I conducted a task analysis. I gave each user a task scenario: Imagine you need a new laptop. Use Frys.com to buy a new laptop for under $1000.

Insights:

  • Users look for the best price, reviews, and fast delivery when it comes to purchasing decisions.
  • Most users did not complete task due to not wanting to create an account.
  • Average time spent: 3 minutes

Data Synthesis

 

Based on all my interviews, I found enough similarities to create a proto-persona, Jim, who embodies the tech enthusiast archetype. Jim’s goals are to own useful tech products and simplify his daily life activities. However, with his busy schedule and the high cost of technology, Jim can't always keep up with the Joneses.

 
 

By creating a journey map, I can visually illustrate a user's processes, needs, & perceptions across their interactions and relationships to satisfy a need. In Jim’s journey map, we can see at which point where he felt the most frustrated and these are the areas where we want to focus on, the search and check out process.

 

Problem Statement: How might we improve our site’s navigational experience so Jim may efficiently and quickly find the best laptop for work?

 

ideation


Solutions

  • Redesign the information architecture
  • Create an easy, fast check out flow with a Guest Check Out option
  • Simplify filtering feature

Information Architecture

 

I took a look at the information architecture to understand how people find what they need, and what they’ve found. To test if the current site map suited the thought process and terminology of our user, I had users do a card sort where I gave them a card with a Fry’s item on each one and asked them to arrange the items into logical categories. The average task completion time was 35 minutes. With such large inventory, I want to make sure products are easily accessible to the user.

 
 
                                 Finished card sort

                                 Finished card sort

Based off the card sorts, I created a new site map and made the following changes:

  • Renamed Cool Things We Sell to Products, Things We Do For You to Services
  • Reduced category levels from 29 to 7
  • Rearranged categories from most sought out to least sought out

                                     New site map

 

Sketches

I used pen and paper to brainstorm ideas for the layout of the site.

 

I also created a user flow to show all the steps the user takes in order to reach their goal from the homepage to purchasing a product. This helped me think about what happens to the user before & after they visit a particular page and focus on what is important.

 
 

prototyping


 
                                                                                  Medium fidelity wireflow

                                                                                 Medium fidelity wireflow

Home Page

Changes

  • New primary navigation menu based off new site map
  • Added Wish List and My Store to global navigation
  • Changed hero image rotate buttons 
  • Move important store info to top row to inform users immediately
  • Changed product layout to be simple, decluttered, and aligned
  • Added Email and Credit Card Sign Up to footer

 

 

Product Listing Page

Changes

  • Removed unnecessary More Info button, Search Within Results bar, and Jump To menu 
  • Added Your Store with option to change in the top horizontal filter toolbar
  • Changed filter menu with clean separated categories and larger spacing
  • Changed regular price color from red to black
  • Changed Add to Wish List link to heart icon
 

Check Out Flow

Changes

  • Added Guest Check Out button
  • Simplified the progress bar to be more clear in communicating the check out process and interactive 
  • Changed form layout and error notification
  • Added Order Summary section so users can be informed of their updated total price at all times
 
 

testing


My final high fidelity prototype was tested by 5 users. Completion rate was 100% with an average time of 1.5 minutes. Review was positive with no questions or complaints.

 

launch


Because this project is speculative, the redesign was not launched to a live site. Please click below to view the final prototype.

 
Imac .png