Navigation Made Easy

Overview

Reset Vintage Apparel is an e-commerce clothing retailer based in St. Louis, MO specializing in vintage clothing both new and used.

Challenge

They’ve built their own website but are not pleased with the results. The website has plenty of visitors yet few finish completing their purchases. Reset needs help to increase conversions and make their e-commerce experience more user-friendly.

I need to find a way to help customers shop for their products in an efficient way that encouraged them to go from browsers to shoppers.

Role

Role: UX Designer

Scope: 2-week Sprint

Constraints: Desktop | E-commerce Website

Results

Reset Vintage Apparel’s customers need to accurately navigate through the site when shopping. Thus, I prioritized recategorizing the website’s content to develop efficient primary & local navigation. 4 out of 5 users experienced delays and confusion with the navigation selection “Tops’ during the first round of usability tests. Therefore, listing the subcategories under “Tops” as individual categories to include T-Shirts, Jerseys, and Outerwear resulted in an improvement with 3 out of 5 users experiencing confusion.

Out of 18 tasks conducted, 6 were labeled as major usability concerns

To begin my research phase, evaluating the site’s current usability and whether it meets design standards were needed to help define pain points.

The task in this heuristic evaluation was to navigate and find a sweater.

The items listed below were labeled major usability concerns as it hindered the ability to easily find the sweater you’re looking to purchase.

Shop Navigation Selection

When selecting the “Shop” selection, there’s no drop-down for additional selections. All items are displayed automatically without choosing to view all.

Filter By

After the selection “Shop” the attempt to filter clothing doesn’t allow to filter by type of clothing. Instead, options such as “Automotive”, “Cartoon”, and “Adidas” are displayed.

Users are grouping together clothing by type

Cards were created for Reset’s products in order for 5 users to categorize into groupings and later name.

My intention is to locate common trends in how they group the content on the website and use the data to restructure the current website’s navigation.

  • Tees were the most commonly grouped item among 4 out of 5 users

  • 3 of the users categorized jerseys as a separate group

  • 2 users separated tops with long sleeves (sweaters, jackets, button-ups)

  • Years, music & brand name were uniquely split into sub-categories for t-shirts by 1 user

Introducing…

    • Convenience driven

    • Wants to purchase clothing without needing to try them on

    • Need exact measurements when shopping online

    • Frustrated with sizes not similar across different brands

My users’ responses from surveys & interviews had the following common concerns I personified as my persona, Ana Cortez:

  • There’s a level of accuracy required when navigating through a site’s products

  • They emphasized the importance of measurements while online vintage shopping

  • Shopping for quality is important especially if these are higher-priced items

Categorizing the website’s products for an easy shopping experience is my main priority

Ana’s problem is that she needs a way to make accurate decisions when shopping online because of her lack of time to go in-store and try clothes on.

To resolve Ana’s problem, I’ve prioritized categorizing the website’s products to make the shopping experience efficient.

Site Maps

Earlier in my research, my users' conducted a card sort to help restructure the current website’s navigation.

The new site map is a direct reflection of how they’ve grouped together the website’s content and how it should be organized.

The outcome was a detailed list of categories that go beyond the general selections the previous version had.

User Flows

Before ideating solutions, I had to understand the current flow Ana takes to shop and how I can develop a new flow to improve her experience.

In both the current and new user flow scenario, Ana is looking to purchase the perfect sweater.

Current User Flow

The current user flow has a smaller section of steps, however, there are gaps that hinder her ability to correctly navigate in finding that item.

New User Flow

That’s where the new user flow helps fill in those empty spaces to quickly search through the selections provided to find that sweater.

Digitized Sketches V.1

  • V.1 Homepage

    Home page sketch that includes a section dedicated to new clothing items

  • V.2 Homepage

    Different variation of new clothing items displayed on home page

  • V.3 Homepage

    Third & final version of home page that resembles the current design with Reset’s different locations

  • V.1 Home Dropdown

    A vertical dropdown list comes down for the local navigation after selecting “Shop”

  • V.1 Items Displayed

    2-column grid displaying items of clothing to search through and explore

  • V.2 Items Displayed

    3-column grid along with categories and filters to the left-hand side

  • V.1 Item Description

    Item detail similar to the current design with suggested items underneathe

Lo-Fi Wireframe

  • Home page

    Horizontal local navigation was selected for the numerous new categories displayed along with the company’s name in the hero image

  • Items displayed

    Newly added supplementary navigation to the left-hand side to easily switch between different clothing types and filter by size, material, and condition

  • Filter by size

    Users will be allowed to find clothing in their size by inputting their measurements for complete accuracy

  • Add your size

    You can move forward with finding clothing specific to your size, or if you do not have exact measurements you can press “Back”

  • Item detail

    Once viewing the item you’re interested in, you now have additional photos to view underneath the main image. Simply add to cart and complete the process!

Usability Tests

Now that we have wireframes, we can begin to start linking these screens for basic functionality.

My goal was to have a working prototype for users to begin testing on and testing they did.

The outcome was 5 usability tests conducted and here are the main takeaways I used to help develop a hi-fi prototype.

“Tops” selection

  • 4 users experienced confusion when tasked to shop for a sweater

  • After clicking on “Shop”, users both paused and clicked on either “Shop All” or “Shop by style”

Select your size

  • Once users successfully navigated to find their sweater, they were tasked to select their size

  • All 5 users expected to see a range of sizes listed versus being asked to input their exact measurements

My Solution

Outerwear works better than Tops!

The 2nd round of usability testing I completed was months after the project began.

These tests were to understand whether my solution did resolve the initial 1st round usability issues discovered.

1st Round Usability Testing

  • 1 out of 5 users successfully shopped for a sweater when using the “Tops” navigation item.

  • 0 out of 5 users completed their task of being asked to input their exact measurements for filtering sizes.

2nd Round Usability Testing

  • 2 out of 5 users successfully shopped for a sweater when using “Outerwear” as a navigation item versus “Tops”.

  • 5 out of 5 users completed their task of selecting from sizes ranging from Small to XXLarge versus inputting an exact measurement.

Takeaways

  • More users can use my menu navigation to find sweaters better than before with “Outerwear” versus “Tops”.

  • All users who filter with sizes have done so with ease using a system they’ve used before.

Finding The Right Clothes Needs Refinement

I reflect on this project with optimism knowing this solution is not perfect.

It’s clear that users are still struggling with the categorization of clothing on my solution.

This fills me with excitement knowing there are many ways to improve this experience for Reset’s shoppers.

What I would do if I decided to move forward is the following:

  • Audit Competitive & Comparative Analysis with opportunities to add and/or remove sites that closely align with Reset’s business.

  • Use research applications to analyze & gather new metrics for card sorting & tree testing

  • Meet with Reset to compare user persona and their target audience to align research/ideation goals.

This project was the first front-to-end design project that sparked my interest in wanting to have an impact on the entirety of the design process. It felt amazing to see my work come together as I made decisions to shape the outcome of the design users were impressed with.

I’m proud of the work I completed and know there’s still much more I can do to improve & further fulfill the needs of users.