Background

Some of my friends might say I have a shopping problem and they might be right since my first UX case study is about fixing a common shopping problem for someone like me. When I think of an outfit or see something online, I have a specific vision in mind. I want to find the closest match to recreate my dream outfit. Other times I’ll be out and see something I really like but the price I don’t or I see a dress in every other size but mine. These are common scenarios that women and men run into every day but when the situation is dire (a wedding, a work function, etc.) and we’re struggling to find something there’s nowhere to turn to.

Problem

We've all had the moment when we want to find the perfect item. It might be the right size, color, cost, or another factor but searching online is time-consuming.

Solution

Made to be a one-stop-shop, ShoeHound is a website that brings what you're looking for to you. It also features an add-on extension for online shoppers to quickly and effortlessly copy and paste a link and give the best matches.

My Role

UX Designer

I came up with the concept, conducted primary and secondary research, and made the wireframes.

Secondary Research: Competitors

With a problem in mind, I started off with secondary competitive research. I looked to websites or apps that had a similar goal of “one-stop-shops.” I did an audit of 3 direct competitors, websites and apps with similar enough features, and 2 indirect competitors, websites or add-ons that could offer similar benefits in a different way. I looked into these platforms for several reasons including their UX design, visual design, loading speeds, and weaknesses or missing features.

Primary Research: User Survey Findings

  • Indirect competition from clothing brands' and department store

  • Users that do a lot of online shopping are more comfortable with digital services. They tend to be more likely to use bookmarks and add-ons.

  • Busy users looking for all sorts of ways to save time, such as shopping from their phones and using apps

  • A preference to try on in person, especially with certain items.

  • Those that search based on price first use discount department stores (ex. Marshalls, Ross)

This is Mary

  • 25 years old with a bachelor's degree

  • Stylist and Writer/Editor, Fashion Blogger in her free time

  • Goal: For personal and professional, to stay up to date on trends

  • Motivation: Career, Passions

  • Frustrations:

    • Traditional shopping means a smaller selection

    • Staying fashionable on a budget

Introducing Janice

  • 33 years old, married, and mother of 1

  • Master's degree and lives in Atlanta

  • Believes in spending as much time as possible with the people she loves

  • Goal: Looking appropriate at all outings

  • Motivation: Friends & Family, Social Life, and Productivity

  • Frustration:

    • Busy life leaves little time to relax

Ideation: Storyboard

I roughly sketched out a storyboard of the user’s journey including the ShoeHound add-on. With the storyboard, I found the critical screens for the minimum viable product.

 
shoe-sitemap.png
 

Information Architecture

I conducted card sorting with participants to find the most intuitive flow and weed out any topics that did not seem related to the ShoeHound’s purpose/goal.

Card Sorting Findings

  • Clarity: Some webpage titles were misinterpreted as filters others were confused for something else

  • Direct and Efficient: Eliminate topics that seemed out of place with the ShoeHound’s original goal which additionally means fewer pages and faster loading time

  • Connections: Putting the most related content together. Ex. Hiking boots and rain boots under Weather and Terrain

Sketches

After sketching the screens I ran some usability testing with the rough wireframes to find any issues before going digital.

Mobile Feedback:

  • Change some of the phrasings so easier to understand

  • More instructions for the copy and paste function

  • Add shoe size availability in the search results

Desktop Feedback:

  • Include main search feature on homepage for users that did not use the browser extension

  • Add more thorough directions for first-time users that accidentally discover the website

  • Edit screen so that all directions are visible without scrolling

Testing Round 2 Feedback:

  • Clear exit for navigation

  • Clarify footer – not sticky as in some sketches it is visible but others it is not

  • Show that after sign-in the “sign-in/sign up” button becomes a “my account” button

Desktop Wireframes

  • Homepage

  • Search Page

  • Style Guide Page

  • Results Page

Mobile Wireframes

  • Homepage

  • Navigation

  • Search

  • Style Guide

  • Trends Page

  • Results

Design Decisions

For the desktop design, there is minimum scrolling throughout the website. The homepage features the three-step instructions next to the link search bar for first-time users and overall clarity. The link search bar has placeholder text as an example and a search button with a shadow to emphasize its clickability.

One the results page users get to side by side compare the shoe they found with the shoes we find with an always visible scroll bar on non-static side. Then when searching from scratch there is a static filter under the navigation for customizing one's search. The mobile design has a few more additional pages to lessen the content per page. Mobile also features the "Sign In/Sign Up underneath the header which when logged in becomes a very accessible link to one's profile."

Testing

ShoeHound is still young needs to undergo additional testing and usability testing.

Next Project?

 

Pretty Penny

The advice is to start investing as soon as possible. So why is it that nearly half of Americans don’t own stock? Pretty Penny aims to help people learn and overcome their anxiety and confusion around investing.

ToStylMou

Personal brand and style are important factors of everyday life however there is no way to receive styling feedback when users need it. At most, social media platforms only allow ambiguous feedback. People want real-time feedback on their personal brand and style decisions.