Design Challenge from Yelp

Introduction

I would like to share my interesting, fun experience through the product design challenge from Yelp!

Role: Interaction Design / Visual Design
Tools: Sketch, Adobe XD
Duration: 7 days, August 2018
“Picking out your outfit in the morning takes time. Create an app that streamlines the process of planning what to wear and transforms what used to be a chore into something more enjoyable”

Problem Space

Every morning, most adults/students waste time to decide what to wear, pick out clothes from their closet and dress. This daily activity has turned into an annoying chore because people simply can’t pick out whatever they want to wear. A lot of the indecisiveness is due to constraints people care about: weather, special events, work culture, and more. And not many people are willing to wake up at 6 am to take care of these constraints so that they can choose different outfits every day. They end up having to re-wear outfits on a rotation and possibly forgetting and abandoning the rest of their clothes.

Goal

How could we make the outfit picking-out experience more efficient and delightful?

Planning

Since I had two weeks at most, I re-framed the human-centered design process I learned from my department to 5 main steps: Research, Empathy, Ideation, Iteration, and Final Design.

Design Process

Quick Interviews

When I read the prompt I was instantly curious how my friends(college students and workers)’ current experiences with picking out clothes in the morning and how they solve own problems. I didn’t have much time to set interviews so I quickly asked around via messages.

Survey

Once I found consistent themes from the quick interviews, I was curious if these findings could be generalized with a larger audience — my survey participants. I was able to collect a broad range of data(attitudes, opinions, beliefs, values, behavior) from 60 participants — Thanks so much to everyone who filled out my survey ❤

Affinity Diagram

I wrote down relevant facts from interviews on sticky notes and categorized them into main groups and subgroups — synthesis of my research.

Root Problems why taking longer than average

  • Time-waste on check weather and special occasion of the day
  • Wasting time on trying different clothes due to lack of outfit ideas that fulfill own preferences
  • Unsure of dress-code of special events
  • Digging in the closet due to too many clothes

General information about choosing what to wear and shopping clothes

  • 50% of participations has 50–100 pieces of clothes
  • Get fashion inspirations from people on street, Instagram, Youtubers, and so on.
  • Factors on deciding clothes: weather, special occasions, work culture, and transportation, religion/culture.

Unexpected but crucial, interesting facts


Persona

Based on off the findings, I established personas to refine the users’ pain points, goals, and behaviors. This process helped me imagine who would be the end users and build a user journey afterwards.

Full-Time Female Student with a Part-Time job — Jennifer

  • These days, Jennifer goes to interviews for an internship after classes or part-time work. As she does not have a car, there is no time to go back home to change so that remembering to pack semi-formal clothes or wearing them in the morning is a necessary chore for her. Also, the Jennifer walks all times while the winter weather in Seattle is brutal and rains spontaneously. Whenever she forgets taking an umbrella or wearing water-proof jacket, she gets wet and goes back home to change clothes for interviews or work. Jennifer wants a productive way to plan out her outfits based on interview and work schedules.

Full-Time Male Employee who is a Associate Marketer — Mark

  • Mark just started a full-time job as a marketer a month ago. He takes a bus to work and attends business or promotion events at least two times a week. Since his company has a strict dress-code he’s not sure what is appropriate for the work culture and struggle with trying different outfit. Mark makes money now so he’s willing to shop, but it is takes too long to pick out appropriate clothes for work due to a lack of fashion sense. Mark wants a fast way to plan out his outfits for workdays and appropriate clothing recommendations to buy or try out.

User Journey

I developed a user journey map based on the personas that I created to clearly identify specific points within the user experience that could be evaluated and improved. I also wanted to explore current issues or experiences that users may have, as well as the real-life context of those experiences. The journey map shows important touch points throughout the user’s day such as spending too much time picking out clothes, resulting in having no time for coffee — or missing out on weather information and ending up feeling sick at the end of the day. Each of the different touch points also includes the user’s emotions.

This helped me understand what the design requirements would be by understanding the greater context of my design challenge.


Design Requirements

The personas and journey map showed us what information and capabilities the users required in order to complete their goals. I set design requirements to plan out the “what” of the design: what information and capabilities the personas require to accomplish their goals. Also, pinpointing the specific tasks that applied to the users helped ensure design solutions would meet the users’ needs and gave a project a better-defined direction. It is critical to define and agree on the “what” before moving on to the next question: how will the product look, behave, operate, and feel? (About Face, 106).

  • Enable users to easily add and check their clothes in a virtual closet/catalogue
  • Allow users to get daily outfit suggestions based on schedule or weather
  • Allow users to browse and purchase preferred clothes

Business Goals/Assumptions

I believe designers shouldn’t just propose charitable magic ideas. I need to consider how to make the product more marketable and increase its ROI. Before starting the design, I set business goals — assuming the shopping/recommendations features of this product will display sponsored products that generate financial profits. Also, another goal is to maximize app engagement and user retention. Strategies for this goal I assumed are: build trust, sending notifications, recommendations in a friendly tone, and a discount on the next order for the first users.

Information Architecture

​In order to graphically represent the key paths that users would be taking through an app, I developed an information architecture diagram. This diagram contextualizes the screens users are shown and the choices users make.

This architecture was built using the understanding of chronological user behavior as gained from the user journey, and I used an information architecture diagram as a starting point for the paper prototypes I later developed. Many of the screens indicated on the diagram would be fleshed out into full paper “screens” in the next step.


Brainstorm

After considering users’ pain points and goals and conducting a quick competitive analysis, I ideated a list of possible features. A few of them were a little crazy so I opted them out. I personally favored the smart-mirror idea and considered it as a platform, because one of my participants said, “current solutions is hard for me to use an app without trying things on and seeing the entire outfit physically.. or else I would just imagine the outfit in my head..” So I thought the best way to visualize outfits with preferred clothes could be an AR smart mirror. But I realized that it has to be a phase 2 product after MVP is released. First, it is because people can’t afford it so it is not an ideal device to use. Second, it is essential to focus on building a loyal user base and offer a smart mirror as an extension. As a substitute, I decided to add a feature of an on-boarding questionnaire that could get user data such as skin color. Therefore, the app is able to recommend the best outfit options for each user.

Paper Prototypes & Wizard of OZ User Test

In this step, I transformed my design sketches and information architecture into one cohesive product with key user paths to lead users through an app. I conducted this usability test as a quick user evaluation stage of my design process. The three tasks for the user to complete: on-boarding questionnaire, adding a clothing item/outfit, and getting outfit recommendations and inspirations.

Feedback and Iteration

These are the test participant’s feedback which helped me understand how the information and layout are interacting with potential users, iterate the design, and create wireframes with more intuitive interactions.


Wireframe

The paper prototypes and the feedback I received from the quick evaluations helped us move on to the next iteration of my app design: wireframes. The black-and-white wireframes allowed us to begin visualizing the placement of important buttons and features in the app. I was also able to begin working on the more artistic and visual design elements of the app to make it visually pleasing. These wireframes would act as a first draft for the high-fidelity mockups I would design to complete my project.

Task 1

After deep thought, I decided to include the cultural/religion background question following my design discipline: an inclusive and multicultural design. Even if only one person out of 60 participants highlighted culture as a leading fashion decision factor, I still value and take care of it because the US is a country of immigrants — the melting pot.

Task 2
Task 3

According to Steven Hover, 75% of people interacted with mobile products using their thumb, and 67% of them use the right thumb. Following this rules of thumb, I placed the critical feature, bookmark button, which allows users to archive favorite outfits, in the SAFE zone that remains across all devices. So I can make sure the design is thumb-zone friendly.

Final Mockup

Using the edited wireframes as a base, I developed high-fidelity prototypes to showcase the penultimate iteration of the app design. ​I realized that some graphics, accents, or placement of elements were unnecessary and detracted from the main focus of the app while others needed to be more prominent such as text color, labeling of graphics, and clarity of spacing. I hoped to make the app as enjoyable as possible for the user.

Animated Mockup

Onbaoarding — Waredobe/Outfits — Fashion Snaps/Shop

Next Steps

As I mentioned, I would like to brainstorm and create a prototype for the smart mirror concept as a phase 2 — extended product concept. I decided to work on a mobile MVP product first as a deliverable for this design challenge because my process was a solo project under a short time-frame. I’m more than excited to grow further and develop this project with the smart mirror option. I expect my target users would be able to save up more time by virtually trying out clothes and checking schedules with one big mirror screen at the same time.

Additionally, I’m planning conduct another user test and interview sessions to measure this mobile app’s usability, efficiency success with five metrics used in the HEART framework(Happiness, Engagement, Adoption, Retention, Task Success). Therefore, I will be able to iterate the final design and amplify potential users’ satisfaction by discovering hidden parts I missed out due to rapid-paced process and integrating feedback.

Thanks for reading — 💙