Bringing the In-Store Shopping Experience to Your Couch: A Case Study
Role: UX/UI Designer
Timeline: 2 weeks
Materials and Tools: Figma, Card Sorting via Optimal Workshop, pen and paper
Techniques: Competitive and Comparative Analysis, User Interviews, Affinity Mapping, Wireframes, Prototyping, Usability Testing, User Flows, Site Maps, User Personas
Brief: For this assignment, I was tasked with redesigning the e-commerce website of Decade Gifts. Decade is a gift shop in the Baker neighborhood of Denver with a fun, eclectic vibe. As a fan and frequent customer of the store, my goal was to increase their online presence and sales.
This case study is based on a project I completed for General Assembly and is not associated with Decade Gifts.
1 — COMPETITOR RESEARCH
In order to better understand e-commerce websites with a similar inventory to Decade, I performed a Feature Inventory focused on three of the store’s competitors: Etsy, society6, and ModCloth.
Clearly, Decade’s website is missing many of the features that their competitors offer. But not all features are necessary or desired by customers, so I needed to interview users to see what they really want in an online gift store.
2 — USER INTERVIEWS AND USABILITY TESTING
I interviewed four users, focusing on two broad topics:
- How do they shop online?
- How do they shop for gifts?
These interviews led to four major insights that would directly impact how the site design would continue.
This is promising news for Decade! They’re a local store, which users want to support; they have unique gifts, which users are looking for; and adding ratings and reviews is a common site feature that would be simple to implement with a big payoff.
Next, I focused on the current site. I conducted usability tests with four users, asking them to investigate Decade’s current online store and tell me a bit about how it met their expectations of an e-commerce store. Then I tasked them with finding a particular product, adding it to their carts, and checking out. This would help me identify pain points within the current site’s architecture. Here’s what I discovered:
3 — MEET OUR USER
Based on user interviews and research, I created a persona to represent the particular consumer I’d be designing for. This way, I’d have a touchstone to look at while making design decisions to ensure I was meeting customer needs. I created a persona, Lizzie, who loves her friends and is dedicated to finding them the right gift — but not at the expense of time spent navigating a confusing new website.
Lizzie has a problem, and Decade’s website can solve it by providing fun, quirky products, an easy to understand organization of inventory, and a simple shopping and checkout process.
4 — INFORMATION ARCHITECTURE
Because my usability tests validated my theory that Decade’s online store was hard to navigate, I needed to find a better way to organize their inventory. I set up a card sort where people grouped products from the Decade website into categories that made sense to them. Results varied, but several dominant categories emerged.
Using people’s feedback, I arrived at a set-up wherein every item in the shop would fit under one of these four categories:
- Bath & Body
- Clothing & Accessories
- Fun & Games
- Household
From there, I created a streamlined site map.
Now I had a more straightforward categorization of products that, alongside the new search bar every user requested, would allow users to easily find what they were looking for.
5 — WIREFRAMES AND PROTOTYPING
With Lizzie in mind and with a new content hierarchy, I moved into wireframes and prototyping. My goal was to create a site that would act like a concierge for Lizzie, “walking” her through the store and helping her find that one special item her friend would absolutely love. These wireframes feature additions and revisions to the original site that would better meet Lizzie’s goals.
6 — USABILITY TESTING, PART 2
I asked four users to test this first iteration of the Decade site redesign. Their tests revealed four insights — two positive, and two indicating features I still needed to work on.
7 — USER INTERFACE DESIGN
Before moving to my final, high fidelity prototype, I explored options for the updated site’s user interface design. Based on research and my user persona, I knew I wanted the site to mimic, as much as possible, the experience of walking into a small local gift store. I used words like “warm”, “inviting”, “colorful”, and “unique” to inspire my moodboard and color palette.
I purposely did not touch the store’s logo, instead looking for a typeface that reflects the sign on the physical storefront. I landed on Futura for the store name and headings with Domine for body text. Futura is modern and casual, while Domine evokes a more vintage feeling.
8 — FINAL DESIGN
With my research and user-centered decisions in mind, I created a high fidelity iteration of Decade’s redesign. Here are a few highlights:
And finally, here is the updated checkout process.
9 — NEXT STEPS
- Keep an eye on the site’s information architecture to make sure that the product categories keep up with Decade’s constantly changing inventory.
- Create a responsive version of the website for tablets and mobile to give customers the option of making purchases on other devices.
- Analyze sales data to see how the updated site design impacts revenue.
10 — LESSONS LEARNED
- Following the double diamond process for UX design allowed me to iterate on ideas while ensuring user needs were met.
- Continuous iteration is challenging, but crucial. Watching users go through sample user flows is necessary for better understanding how others think through processes that may seem straightforward in my head but aren’t as clear to others.
- The combination of UX strategies and UI work led to a product that I could overall feel confident in, but starting with UX and saving UI for later meant the finished product was even stronger.
