ORS Direct Website Redesign
ORS Direct e-commerce website is the virtual extension of a Montpelier, VT-based outdoor sporting goods store, specializing in winter gear. While there is a lot of great content on the site, the organization of products is not intuitive.
Objective: Re-design the e-commerce website improving the visual design, internet architecture and navigation to make a simpler more enjoyable experience for customers.
Context
Solo Student Project
Date
2016
Role
User Experience Design
Visual Design
Final hi-fidelity mock-up
Discovery + Research
I studied ORS Direct’s current e-commerce website using heuristic analysis and identified several key problems with their home page, product listing pages, and product description pages.
Competitive + Business Analysis
I compared competitor’s website features to those of ORS Direct’s. I found that the competitors, provided more access to sales and promotions, sorting and filtering options and offered similar products on product description pages. A detailed comparison showing more features can be seen below.
I analyzed where features and content were located on each of the home, listing, and product pages of five competitors. This helped me to understand how similar sites prioritize and organize information compared to ORS Direct.
User Research
I talked to several online shoppers to hear about their online shopping habits, what they liked about shopping online and alternatively what were some frustrations they face. I was interested in hearing how their approach to shopping changes when they are purchasing an expensive item versus an everyday item. I wanted to learn how they approach researching a product and what tools or features could make the process easier. I also was interested in whether those tools or features helped them feel like they made a well-informed purchase.
Insights + Key Takeaways
It’s important for shoppers to see what’s on sale when browsing for a product
When looking for a specific product, shoppers often want to see if there are similar items on sale
When making expensive purchases most shoppers do a lot of research and compare products
Customizing searches by filtering and sorting is helpful in making a good purchase
Affinity Diagram Mapping
Defining the Problem
Based on findings from my user and competitive research, I crafted the following problem statement:
As an outdoor enthusiast looking for gear, I want an informed shopping experience so that I can feel confident about making an expensive purchase.
Personas
Based on my research with users, I developed two user archetypes to help inform a solution to the problem discovered. This included things that were important to them and pain points they faced.
The Novice
The Expert
Discovering the Solution
Based on the findings from my user research, I began developing a solution. At this point my vision for the ORS Direct redesign really began taking shape.
I wanted to simplify the browsing and search process, and reassure customers they are making a good purchase by:
clearly identifying categories and current sales/promotions
providing the ability to filter and customize searches
providing item ratings on product listing pages
integrating customer reviews into product description pages
making product descriptions and specs easily scannable
allowing customers to compare similar products
Site Map + Card Sorting
ORS Directs main navigation was broken down into three main categories, Car Racks, Skis, and Snowshoes. This was confusing to many people because of the redundancy that ORS Direct had in their winter activities categories, such as sledding and ice skating were included in both the skiing and snowshoeing categories. Based on user research and a card sorting exercise, I changed the main navigation to include an activities category which would include all the specific activities as subcategories.
Site Map revising current navigation structure
Card Sort to help inform grouping and navigation
Iterating
After the first round of user testing, I moved on to an interactive medium fidelity digital prototype. My usability test results led me to make the following changes when developing my digital prototype:
clarify categories in main navigation (see details below)
collapse least used filters on product listings page
add tabs for description, specs and review sections since users do not need to see sections simultaneously
Final Design
My second round of usability testing results mostly focused around my product description page. From this round of testing I discovered:
users wanted access to a sizing chart
it was not clear how to remove or add items to the compare product window
As a result, I made the following changes to the prototype:
added size chart next to size options
“remove” button replaced “X” and “add more” button was added to compare more products
Home
Product Listing
Product Description
Product Compare
Next Steps
In the future I could see adding more features to the ORS Direct e-commerce website, by incorporating the following:
create a mobile version
option to see recently viewed items
an update of the “learning center” to help customers choose the right products