Case Study Overview: Ecommerce Redesign
Logistics
2 weeks
UX Team of One
Sketch Software
InvisionApp
Project Focus
Information Architecture Branding
Navigation Design Visual Design
Card Sorting User Interface Design
User Interviews C+C Analysis
Problem
A small, local toy store had an ecommerce store that had poorly structured information architecture with an interface that was difficult to navigate and view information.
Solution
The IA, navigation, user interface, and branding were redesigned based on insights from user research and delivered in the form of a mid-fidelity, interactive prototype
Interactive, Mid-Fidelity Prototype
Click the image to view the interactive prototype in a new tab.
Implementation Constraints
The store's website was built from a third party that provides a toy database as part of its services. While this design will fix many of the current usability issues, the toy store may not be able to easily implement the design changes because of database constraints from the development company they used to build their website.
Introduction
(15 min read)
This UX case study shows the process of how I redesigned the e-commerce website to better suite user's needs.
An e-commerce website is a necessity for local stores to generate business because of the restrictions on businesses due to Covid. Consumers that want to support local are resorting to online shopping to stay safe.
A small toy store has its own e-commerce website, but it's difficult for customers to find the toys they want.
A website redesign that makes it easier and more delightful for customers to buy toys would help the business reach its goals of out-competing the other local competition to bring joy through toys.
This case study is broken down into the following sections (click to skip to a section):
Research
Usability tests were conducted before any other research to determine the areas of the website that users found confusing. From those tests, users expressed frustrations with:
- too many toy categories
- confusing toy categories
- unhelpful, limited sidebar navigation
- buttons for the categories were hard to read because of color and typeface
- photos on product pages were small and limited in number
- basic store information like shipping info was hard to find
Takeaway
What needed fixing:
- Information Architecture (IA) needed to be restructured in a more intuitive way
- User interface needed better navigation that matched how users typically searched websites for products
- Visual design needed to be more accessible
Additional Research needed:
- Competitive Analysis of local toy store competitors to determine the business case for a website redesign
- Card Sorting to create intuitive toy categories based on users' mental models
- User Interviews to understand why, how, and what toys users buy
- Comparative Analysis of other e-commerce websites for ideas of how to implement best practices of good information architecture and navigation
A competitive analysis of other local toy stores in the area was conducted to assess to business case for a website redesign. It was found that there would be a large business impact from a redesign based on there being:
- a competitive market with a high demand for toys in the area
- other local stores offering very similar toys and services
- websites for the other stores that had equally outdated looking and difficult UI
- an e-commerce website only for this one store, so an easy to use website could easily grab more market share
Takeaway
There was a business case for a redesign, so the project could proceed
User interviews were conducted so that I could understand who the users were and what their needs and frustrations were. Affinity mapping the insights helped to synthesize the data.
Takeaway
Why Users buy toys:
- For special occasions like Christmas or birthdays
- As an incentive, such as for potty training
- For non-parent-involved playtime
- On impulse
What Users want for toys they buy:
- Age appropriate
- Educational yet fun
- unique or not generic
- Involving a certain kind of play
- Safe
- Recommended by friends or trusted source
- Good reviews
- Easy shipping
- Longevity of use
How Users buy toys:
- Key word search
- Narrowing search using filters
- Using header navigation (global navigation)
- Browsing from a guide
- In-store
Card sorting was used to find which categories to group toys by that made the most sense to a majority of users.
Takeaway
After sorting through the results, 10 high-level categories were established.
A comparative analysis of other e-commerce stores with good examples of information architecture, navigation design, and user interface (UI) design was conducted to serve as inspiration for the redesign. The analysis included the following company websites:
- Ikea: IA & navigation design
- Abercrombie: Navigation & UI
- Wayfair: Navigation & UI
- Osmo: UI & Visual Design
Takeaway
The redesign would include:
- Simple homepage with unobtrusive navigation
- A straightforward product layout & clear indications for the user's current position within the website
- A robust yet straightforward and unobtrusive faceted navigation through the use of filters that users commonly use to narrow down product options
- legible, high contrast calls to action
- rounded features and bright color palette to emote playfulness & joy
Define
Based on insights from user interviews, two user personas were developed to help keep the design process user-centered.
Claudia
The Researcher
"The more filters, the better"
What, why, and how they buy toys:
- They buy toys mainly for events like birthdays and Christmas
- They search first on google to find a good type of toy that matches the interest of the recipient of the toy
- They then search on the e-commerce site for key words
- Then they use filters to narrow down the options based on the features they want
Carlos
The Impulse Buyer
"It reminds me of them"
What, why, and how they buy toys:
- They buy toys mainly on impulse or randomly when they're shopping for something else
- They usually buy toys in-person rather than online
- They buy toys at random because it reminds them of the recipient or because it was recommended
The scenario:
Claudia, a busy mother of two, needs a way to quickly and conveniently find and purchase the Christmas toys she wants to buy. She'd like to support local businesses during the holidays, and she's worried about trying to maintain covid safety precautions.
How might we curate an online shopping experience for Claudia that will help her stay safe & save time?
Once the problem had been defined for the primary persona, Claudia, I created a user flow that detailed Claudia's 'happy path' through the website that would result in her needs being met with minimal frustration. The main features consisted of:
- Using a key word search
- Then narrowing her options down by filtering by various features that were found to be important during user interviews
A site map was built to define how all the information that the site would contain would be linked to each other. Additionally the information would be grouped based on the use:
- Buyer account information
- Business related information
- E-commerce related information
Based on the logo, color scheme, and cloud background of the current website, I realized that they were inspired by the Pixar movie 'Toy Story.' And since I was mainly designing to first test for the IA and navigation design, I didn't want to design using color just yet. However, I did want the feel of the website to be on brand for a toy store. With that in mind, used certain principles to guide the initial greyscale design:
- Playful:
- all lower case headers
- rounded/bubble sans serif font for headers
- Clean/ Legible:
- sans serif legible body copy
- bullet lists when possible for descriptions
- call to action buttons with high contrast and large legible font
I also created a mood board with bright, analogous primary colors that could potentially by incorporated into the future high-fidelity design.
Mid-Fidelity Wireframes were created incorporating navigation inspired by the comparative analysis and general user interface design principles:
- Ikea's more straightforward unobtrusive look for homepage
- Wayfair's prominent search feature
- Headers are based on what users would most commonly be looking to do or find out on an e-commerce website
- Proximity is used to group most similar navigation categories (business info, e-commerce info, buyer info)
- Easy to access important store information (store phone number)
Interactivity was added via the InvisionApp to the greyscale mid-fidelity wireframes with the newly designed IA, navigation, and UI. The goal was to be able to test if the new design was intuitive and met the primary persona's needs.
Test
After building the mid-fidelity, interactive prototype, I needed to test if the navigation and interface design were intuitive.
Takeaway
The intuitiveness of the design was validated on the basis that all of the participants were able to complete the assigned tasks, and to do so quickly with no miss-clicks.
However, conducting the usability test with a greater number of participants could lead to additional insights that weaken the initial validation.
Conclusion
Continuing with this project would entail:
- Implementing visual design elements like colors and imagery
- Incorporating elements to make sure the design is accessible
