Website Redesign

Speculative E-Commerce Redesign of Frys.com

 

 
 
Medium Fidelity Prototype for laptop stand checkout flow

Medium Fidelity Prototype for laptop stand checkout flow

 
 
 

 

Problem

Frys.com is an e-commerce site that sells a wide variety of technical equipment. I was tasked with a redesign of the checkout flow process.

Solution

I reconstructed the Information Architecture on most pages, modified the Site Map and adjusted the checkout flow to be an intuitive, user-centered design.

Role

For this speculative piece, I was not on a team. I was the UX Designer.

 

Goals

Create an intuitive way for our users to accomplish all of their electronic shopping needs through an improved
e-commerce experience.

 
 

 

Research

 
Screen Shot 2018-01-15 at 12.59.10 PM.png

Research began with a Heuristic Evaluation of the checkout User Flow. Brand research and a C&C analysis were also needed. Since this site was already a functioning site, I conducted several Task Analysis and User Interviews.

 

Click to view Heuristic Evaluation

 
 
 
* Current Frys.com site

* Current Frys.com site

 
 
 
Frys C&C Analysis-01.png
 

 

Persona

 

*Click to enlarge

When User Research was synthesized, the Persona and User Scenario were created. From there, I constructed the Customer Journey Map to get a better picture of what our users are experiencing

 

 

 
 
 

User Scenario

Andrew just received a new desk to work on but it is a bit lower than the previous one he had. Using Frys.com, he needs to purchase a laptop stand to place on his desk so that he can use his laptop comfortably.

 
 
 
Frys Customer Journey Map-01.png
 

 
 

Design

 
Screen Shot 2018-01-15 at 12.59.10 PM.png

In order to restructure the Information Architecture that supports the user experience, I first conducted a Card Sort. After card sorting, I synthesized that information based on trends I found, among users. I used this information to construct a new Site Map of Frys.com. This included new Navigation Schemas for top and bottom headers. Hierarchy was also shifted within pages to accommodate users’ card sort.

Then, Wireframe Sketches were able to be designed of the homepage and checkout flow. My checkout flow was created as a result of earlier user research on how they would expect to see this flow. From there, medium fidelity wireframes were designed, prototyped and user tested.

 
 

Trends in card sorting

  • Users did not understand nor liked the term "Cool Stuff We Sell"
  • Apple products were grouped with PC products as one over arching 'Computer' group, instead of being completely separate.
  • Office and Business products were grouped together
  • Users created much broader groupings of products than on original site
 
 

Site Map & Navigation

The new Site Map gave the outline of the new Navigation Schema.

Main Navigation would now included:

  • Home
  • Business & Office
  • Communication
  • Photography & Videography
  • Education & Entertainment
  • Audio & Automotive
  • My Fry's
Screen Shot 2018-01-15 at 3.38.37 PM.png
 
 

Sketched
Low-Fi Wireframes

with a restructured Hierarchy of items on page based on feedback from task analysis and card sorting.

 

 

 

*Click on each to enlarge.

 
 

Iterations

  • Main navigation sub categories condensed
  • Comprehensive category titles
  • Hover over feature to see more information on product, then on page with listed products.
  • Multiple views of product
  • Shorter checkout flow with only 5 pages once "add to cart" is selected, including confirmation page.
  • Progress bar on checkout pages
  • Share feature
  • Add to favorites
  • Common products list that were purchased with product
 
 

Medium Fidelity Wireframes

 

 

 

 

*Click each frame to enlarge


Prototype

 
Medium Fidelity Prototype for laptop stand checkout flow

Medium Fidelity Prototype for laptop stand checkout flow