How Does it Hang

A Cure for the Struggles of Shopping for Clothing Online

David Ross
5 min readFeb 13, 2017
Mobile App Home Screen

Objective

Identify the pain points surrounding online clothing shopping and come up with an solution in the form of a mobile app.

Process Overview

  • Research people’s experience with online shopping.
  • Define the problem that needs to be solved.
  • Brainstorm ideas that impact users in a positive way.
  • Collect feedback through testing prototype with prospective users.
  • Iterate and refine to create a final product.

Research Process

User Interviews

As a person who has bought a good few items of clothing online here, I was partially aware of certain pain points surrounding the experience of shopping online for clothing. User Interviews confirmed some of my suspicions but proved to reveal a variety of pain points shoppers hold that hadn’t crossed my mind. User Interviews…crucial!

“I don’t get that instant gratification online.”

“I don’t trust other people’s opinions on style and fit.”

“The size issue has caused me to stop shopping online altogether.”

“I can’t trust unknown brands.”

Affinity Mapping

Pleasure and Pain Points from User Interviews

In analyzing the results from user interviews and the affinity mapping exercise, it started becoming clear there was a trend in feelings towards shopping online.

  • Online shoppers find it hard to trust other shoppers’ opinions.
  • Users still want an experience.
  • Trust in known brands leaves shoppers hesitant to explore brands they are not familiar with.
  • Online shopping as a process is still easy and convenient.

Define the Problem

It was clear from my research that a solution would have to in some way address size and fit. Also taking into consideration secondary pain points, like gratification, proved to be a fun challenge and were solved through the app in a more subtle fashion.

Problem: Online shoppers find it hard to trust other shoppers’ opinions. Solution: Eliminate biased/untrustworthy reviews through a Consumer Reports-style rating system.

Problem: Online shoppers miss the perks of the human shopping experience.
Solution: Create experiences for users that supplant those that are lost through the online experience.

Problem: Reliance on known brands leaves shoppers hesitant to explore brands they are not personally familiar with.
Solution: Create a pedestal for lesser known brands.

The final one is not so much a problem…more an observation, still relevant to this study.

Observation: Online shopping as a process is still easy and convenient
Response: Don’t touch the ‘checkout experience’, just assist it.

User Flow Diagram

The user flow I created shows the two main functions of the app and the actions a user might take while navigating through it.

After prototyping and testing (more on that to come), it became apparent there was a disconnect between the two sides of the app. I realized that users should be offered a way to seamlessly transition from one side of the app to the other.

Design Process

Sketches

Timed sketching allowed me to get thoughts and ideas from mind to paper quickly and effectively. This exercise was a great practice for letting ideas flow and not being so concerned with neatness. (Although I still allowed myself to draw ruled template lines before starting the timer!)

Speed Sketches showing Layout Ideas

In the midst of sketching, the idea of the app being structured into two main functions seemed like best way to divide things for the users. One for users to input information regarding measurements (through speedier, alternative means, and the other to explore and view ratings of undiscovered clothing brands.

  1. Home Page: Logo/Statement/Buttons
  2. Selection: Users choose ‘Mens’ or ‘Womens’
  3. Measurements: Log page
  4. Measurements: Sliders
  5. Brand Search: Enter Brand to discover/Offer User selection
  6. Brand Discover: Brand Profile — Collection of ratings from app
  7. Brand Filter: Brand Search result page
  8. Brand Compatibility: Rating apps for User

Paper Prototyping

After a round of preliminary sketch designs, paper prototypes were created. Users were given the following prompt.

“While shopping online you came across a T-Shirt that you are interested in buying, but it’s from a clothing brand you haven’t heard of an are unsure if it will fit you. See if you can justify buying it through using the app.”

Paper Prototype used for User Testing

The paper prototype constructed proved to be received well in terms of flow and navigation, but users voiced not being entirely certain about where there clicks were taking them. This showed me the importance of a user clearly knowing their end goal as they begin navigating the app. Users also pointed out several redundancies in buttons on various screens. These were simply axed during the transition to the next iteration.

Create Interactive Prototype

After making slight revisions to the previous iteration, I created these medium-fidelity wireframes in Sketch and put together an interactive prototype using InVision.

Workspace in Sketch

See the Interactive Prototype here: https://invis.io/VBAF324K2

Next Steps

The one thing I notice when taking a step back from this app is that it seems to lack in personalization. With the absence of customer reviews and user postings, it would be interesting to experiment with other elements to encapsulate more of a human presence.

This could be fulfilled through user profiles that hold individuals information regarding discovered brands and a way to display their size log.

With added personalization comes the natural desire for individuals to express themselves. This might lead to the creation of a user ratings to the application, but such an addition would need to be kept apart from the foundation of the app’s ‘Consumer Report’ style platform. (Something similar to Rotten Tomatoes’ Critic and User reviews could potentially work.)

Revisited

I decided to revisit this project with an interest in enhancing the user experience through the use of motion design.

https://medium.com/@davidwross55/part-ii-how-does-it-hang-a-cure-for-the-struggles-of-shopping-for-clothing-online-a4802123687d

--

--