Bringing the Look and Feel of a Local Store to Your Laptop
An e-Commerce Site Redesign

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, UI Design

Brief:
For this project, 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, vintage vibe. As a fan and frequent customer of the store, my goal was to increase their online presence and make their online store a more meaningful income stream.

This is a student project.

Competitor Analysis

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. All three, like Decade, have a fun, quirky aesthetic and unique products.
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.

What Do Shoppers Want and Need?

I interviewed four users, focusing on two broad topics:

Which in turn led to four major insights and next steps:

How do customers shop online?

How do customers shop for gifts?

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 where I asked them to investigate Decade’s current online store and tell me how it met their expectations. Then I tasked them with finding a particular product, adding it to their carts, and checking out. This helped me identify pain points within the current site’s architecture.

Meet Our User: Lizzie Gorman

Based on this research, I created a persona to represent the particular consumer I’d be designing for. Lizzie 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.

Our user 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.

Information Architecture

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.

A few dominant categories emerged.

  • Bath & Body

  • Clothing & Accessories

  • Fun & Games

  • Household

The total number of categories dropped from

22

to

4

This will greatly reduce cognitive load and make the store easier to navigate overall.

Updated Site Map

First Iteration: Wireframes

With Lizzie in mind and with a new content hierarchy, I moved on to creating my first iteration of a wireframe and prototype for the new site.

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.

Creating forms for the checkout process was a particular challenge. I wanted to provide Lizzie with a familiar experience while also introducing a little novelty. It turned out that novelty couldn't compete with a familiar experience.

For my first draft, I imagined the user picking their billing method using a series of tabs. It had the potential for looking interesting and a little novel, but ultimately the design was too clunky.

My second iteration was more modern, but it didn’t make sense. Why would someone open the Paypal card? Accessing Paypal should only require a single click.

In my final iteration, I separated Paypal and Apple Pay from the screen where users enter their credit card information. Now users would only see this particular screen if they’re paying with a credit card. Otherwise, Paypal and Apple Pay handle most of the transaction.

Usability Testing, Part 2

I asked four users to test this first iteration of the Decade site redesign. They uncovered a few small, but important, concerns, including the fact that the search bar was hard to find at the bottom of the page and that the checkout process was still not as perfect as it could be.
  • “I like these categories. Everything feels very well organized.”
  • “The checkout process feels seamless to me.”
  • “The search bar feels a little out of place in the footer.”
  • “I personally like when I buy the product, it shows up in my cart and lets me go to my cart or continue shopping.”

Using UI to Evoke an Artisan Boutique Vibe

In preparation for moving to a high fidelity prototype, I explored options for the updated site’s user interface design. Based on research and my user persona, I knew the site should 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.

The Final Design

With my research and user-centered decisions in mind, I created a high fidelity iteration of Decade’s redesign with several key improvements.

Next Steps

  • 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.

Learnings

  • Continuous iteration is challenging, but crucial. Watching users go through sample user flows is necessary to better understand how others think through processes that may seem straightforward in my head but aren’t as clear to others.
  • While Amazon is a monolithic e-commerce site, shoppers are willing to consider other online stores as long as the design and experience feel right.
Linkedin icon.png
instagram icon.png
medium icon.png
email icon.png

© 2021