UI/UX case study for integrating e-commerce
ToolsAxure |
ProcessCard Sorting |
Duration2 Weeks |
Research: Defining the Problem
Overview
D2 is a modern gift shop located in Somerville MA. Their catalog of humorous and witty gifts is a perfect destination for unique items. Although D2 is modern their current website does not offer a way for buyers to shop online. With 40 percent of internet users in the United States purchasing items online several times per month, D2 wanted a way to accommodate this expanding market.
The Challenge
With such an eclectic shop there wasn’t a clear way to organize their catalog at first. After a visit to their location, I determined the best way to approach this challenge would be to speak directly to online gift shoppers and find out how they shop for gifts.
User Interviews
First, I sent out a screener survey to collect information about online gift shoppers and their shopping habits. I then conducted three in-person interviews to gain more insight into what leads them to a final decision.
From these interviews I found:
- Gift buyers look for reviews before choosing a gift.
- Buyers browse through multiple gifts before picking their final item.
The Problem
Find a way to display D2’s ecclectic catalog that encourages buyers browing habits.
My Solution
Create an e-commerce layout that is easy to navigate but also includes a way for users to write and read reviews.
Design: Ideation
Card Sorting
Once I defined the problem I organized a card sorting exercise to determine the best way to categorize D2’s catalog. I then uploaded the product information into Optimal Workshop and had three users attempt to sort the 100 products. Product names and descriptions are from D2’s public Instagram feed.
The results were varied, but after identifying similarities within the terminology, I was able to determine 13 categories.
These are the categories used during prototype testing:
- Bags
- Bath & Body
- Books Candles Cards & Prints Clothing
- Food
- Home Decor
- Jewelry
- Kitchen
- Office
- Toys & Activities
- Towels
Usability: Testing the Prototype
After I sketched a few layout options, I used Axure to create wireframes and prototype used for user testing.
The prototype included three main features:
- The ability to find and browse for products from the homepage using a side navigation
- A “Leave A Review” feature located within each product page.
- A heart symbol to indicate the ability to add a product to the favorites list page.
I conducted a total of five usability test during which I asked testers to imagine they were trying to buy, favorite and leave a review for a gift.
View Axure Prototype
Takeaways: What I Learned
Users found the sidebar easy to use and orientate themselves across multiple pages. However, they needed a more high fidelity wireframe to distinguish the products they were being asked to find.
Users looked for a “gift” option at checkout.I learned a lot about how users shop for gifts but little about what they want during the checkout process. Because of this, I forgot to add a “gift” option at checkout.
Towels are difficult to categorize. Users had many different views on where towels belong in a home. Some looked for them in the kitchen, home decor, and bathroom category. More card sorting was needed to identify the correct label for these products.
What I would do differently
- Ask interview questions that focused on the checkout experience.
- Conduct more card sorting exercises to make sure products are better categorized before I moved onto the testing phase.
- Add product photos to prototype before user testing.