Ridge

eCommerce Website Re-Design, January 2022 - February 2022
The Problem
A mock e-commerce retailer discovered that users frequently left the site without adding anything to their cart. Simultaneously, users frequently abandoned carts after items have been added.
My Role
In a three week period, I worked independently to . . .
1. Identify the persona and discover their needs, goals, and pain-points
2. Design a high-fidelity solution
3. Validate the designs in multiple rounds of testing
Mockup: Laptop screen filled with website, item detail page
Process
‍
Graphic showing process: 1 Research, 2 Sketch, 3 Test, 4 Hifi mockup, 5 validate, 6 iterate
User Research
Identifying Pain-points & Needs
During user interviews, I identified key user needs that were not met by the current product:
‍
1. The ability to compare items against one another seamlessly.
2. The option to checkout without creating an account.
3. A comprehensive and extensive list of each model's specifications.

These findings were consistent with the business issue provided by the assignment: data showed that a lack of a compare feature and being forced to create an account at checkout caused low conversion rates and abandoned carts, respectively.
affinity map from user research
Affinity map with findings from user interviews
user flow detailing how shoppers get from entering the site to ordering skis.
User flow, developed with findings from user interviews
Sketches
Ideating a Solution
I sketched a design solution that addressed the primary needs and pain-points identified during the research stage:
‍
1. A visually appealing home page with featured products & content
2. A page listing search results that is filterable and enables easy comparison
3. A side-by-side compare page
4. A product detail page
5. The checkout process.

I then conducted in-person guerilla user tests with six individuals that matched the persona and two who are also skiers who shop online to validate the design and identify next steps.
Five panels of sketches detialing ideations for the screens: a home screen, a results page, a compare page, a product detial page, and the checkout pagefindings from guerilla usability tets
Results from sketch guerilla tests
High Fidelity Mockups
Prototyping
After guerilla testing, I integrated the feedback into a polished, high-fidelity mockup of the sketched screens.

As I developed the prototype for the site, I wanted the UI to be visually striking and simple, yet comprehensive. The result leveraged the design system shown below.
elements used to form the website, including buttons, form foelds, nav bars, cards, color palettes, etc.
Ridge website design system
Usability Testing
Validating the Design
Upon completing the first high-fidelity prototype, I conducted three user tests in-person and two online, via Zoom.

The results are shown in detail below, but I was pleased to discover that no critical issues remained and the designed were largely validated.
usability test results
Results from user testing
Iterations
Changes After Testing
side by side display of the change

Added results sort feature

side by side display of the change

Added item count feature to the compare module tab.

side by side display of the change

De-emphasized the compare buttons using UI with less visual weight.

side by side display of the change

Used consistent accent colors on light and dark backgrounds & Increased readability of size guide button.

side by side display of the change

Removed unnecessary title and footer from checkout process.

VIEW Prototype

Final Design & Reflection

This project was a great exercise in rapid iteration. Multiple rounds of testing allowed me to quickly validate designs and identify problems. The final product is a polished, validated design that addresses user pain points that led to low conversion rates for the business. While the current version was validated in testing, I would recommend exploring ways to make the compare module more familiar to users in future iterations.

mockup of the product in use on a laptop