Website Redesign

Speculative E-Commerce Redesign of


Medium Fidelity Prototype for laptop stand checkout flow

Medium Fidelity Prototype for laptop stand checkout flow



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


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


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



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




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 site

* Current site

Frys C&C Analysis-01.png




*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, 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



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 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

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.



  • 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


Medium Fidelity Prototype for laptop stand checkout flow

Medium Fidelity Prototype for laptop stand checkout flow