Flirty Fits
A trusted fashion companion for adventurous spirits
Outline
Overview
Project overview
My role
Project timeline
Design tools used
Research Methods
Empathy
Initial hypothesis
Secondary research findings
Primary research results
Our user persona - Chloe
Define
Jobs-to-be-done, for Chloe's sake
Evaluating and prioritizing opportunities
How might we’s?
Define - conclusion
Design
Ideation
User Stories
Site Map and User Flows
Brand Platform
Iterated Testing and Design
Sketches and Guerrilla user testing → wireframes
High-Fidelity Screens + testing → iterated design
Improved Prototyping + testing → Another round of design changes
Conclusion
Project Overview
This case study, walks through the process of designing the Flirty Fits app.
Flirty Fits is a trusted fashion companion that empowers adventurous spirits to create stylish outfits based on their personality, body features and activities and then enables users to plan outfits based on location, weather, and the day's activities.
My Role
UX Team of One : UX Researcher, UX Designer and UI Designer
User Research
Ideation
Sketching and Wire framing
Brand Platform and Design System
UI Design
Prototyping and Usability Testing
Project Timeline
April 2023 - October 2023
""Outfits for work and yoga come together easy. I wish outfits for special occasions, travel and the weekend came together just as easily.”” — Chloe
Overview
Design Process
The Design Process used is one step in my 7-step Product Management Process.
Detonate - project kick off
Discovery - uncover product opportunities
Define - formulate the outcomes we're going after
Design - user experience and user interface design
Develop - transform designs into working code
Deliver - go-to-market campaign and deliver solutions to users
Debrief - measure success and capture insights for the next round of innovation
All design decisions were made under the context of operating in the Design Phase.
Design Tools
Adobe XD - design and prototyping
Mural - ideation
Zoom + Otter AI - user interviews
Mid-Journey - visual image generation
Research Methods
This project was successful because I used research and test participants who matched my main persona. If I relied on just my fellow UX / UI Design students, this project would have won several design awards only to fail miserably in the marketplace.
Secondary Research
Generative research to understand the problem space
Attitudinal Research to understand the psychological aspects of clothing satisfaction and dissatisfaction.
Competitive research to identify underserved jobs and how to differentiate our brand and provide a better user experience.Primary Research
Screener to find people who have the problem of buying clothes but feeling they have nothing to wear.
User research to identify my user persona, their jobs-to-be done, pains and gainsMixed methods to rank jobs-to-be-done and identify underserved jobs.
“If I relied on just my fellow UX / UI Design students instead of users who matched my persona, this project would have won several design awards only to fail miserably in the marketplace.” -- Brian
Empathy
Empathy is used throughout product design. It's used to connect with those who have a vested interest in our products.
UX designers use empathy to connect with users and uncover their jobs-to-be-done, pains and gains. Here I making a case for product changes based on user needs. An important step before generating any solutions.
Initial Hypothesis
Find opportunities that might help individuals who constantly buy clothes but feel they have nothing to wear, get more out of their clothing purchases and ultimately be happier with two core clothing decisions: what to buy and what to wear.
Primary Research Findings
Thematic Analysis
Found two different use cases for clothing:
Clothing for function (every day)
Clothing for occasion and vacation
User Persona
Someone who maximizes life experiences but wants to minimize clothing spending
Someone who works hard but also plays hard
Someone who values unique experiences and feels life should be celebrated
It also uncovered two main opportunities:
Opportunities around satisfaction
Opportunities to improve shopping
Secondary Research Summary
People use about 20% of their wardrobe and wear the same 10 items on repeat.
Women purchase 64 items a year, but then only wear 44% of these items regularly.
Online clothing sales results in 50% returns.
Product Opportunities:
The biggest opportunities for improving wardrobe satisfaction and purchase satisfaction are with women and online purchasing.
If my solution addresses the behavioral factors leading to satisfaction and dis-satisfaction, I have a good chance of success.
Venn Diagram of what clothes a person should buy
"Outfits for work and yoga come together easy. I wish outfits for special occasions, travel and the weekend came together just as easily." — Chloe
Our User Persona - Chloe
I work hard having a specific body type and I want clothes that show this off. I often travel, attend concerts and want to fit into various environments.
I'd like to be a more intentional with my shopping, buying only clothes I need and absolutely love.
Special occasions and vacations make it difficult to decide what to wear
The world is full of new opportunities and a wealth of possibilities and I want to be dressed for these occasions.
I value experiences. I wish to be free and flow through life. I am fun and flirtatious. But I also work hard.
I want people to perceive me as light-hearted; flirty; fun; easy; breezy cover girl.
Empathy for Chloe along our customer journey
To understand what Chloe might be doing, thinking and seeing, I reorganized Chloe's empathy map along the standard customer journey : awareness, consideration, conversion, relationship and advocacy. This helped me understand the different mindsets of Chloe as she engages with our brand and eventually, our app.
Define
The define phase takes in everything captured during the empathy phase with the intent of converging on a clear definition of what problems we'll solve.
Jobs-to-be-done, for Chloe's sake
Process
1. Identify core needs
A needs wheel helped uncover core needs that the jobs would meet and is based on what interview participants said:
Life → Beauty → Presence
Identity → Expression →Creativity and Originality
Identity → Uniqueness → to be known
Fulfillment → Diversion → Fun / Play and Pleasure
Fulfillment → Aliveness → Experience and Excitement Fulfillment→ Exploration → Discovery and Adventure Autonomy → Freedom → Choice and Liberty
Autonomy → Independence → Control and Self Determination
2. Find the circumstances and contexts that apply.
In a boutique shop
On vacation
When invited to a wedding
At home looking at a calendar
At home looking at the weather
In your closet.
In your bathroom looking at makeup colors.
When coordinating outfits with friends for an evening out or on vacation
3. Write the jobs-to-be-done
Jobs to be done were generated by insights, personas and empathy maps.
Jobs were mapped along the customer journey or clothing lifecycle
Existing wardrobe
improving wardrobe
shopping for clothes
putting on clothes before going out wearing clothes out
traveling with clothes
They were then sorted by
Main jobs
related jobs
functional aspects
emotional aspects : personal dimensions and social dimensions
Jobs to Be Done Examples
Main Jobs
When I shop for clothes, I want to find clothes that match my personality so I can be known and remembered.
Related Jobs
When I find clothes that flatter and accentuate my favorite features I want to take care of myself more so that I can continue to feel good and find more clothes I am excited about.
Functional Aspects
When I'm packing for vacation, I want to know what is on my itinerary and pack one item per situation, so that I can travel light and have the freedom to move about.
Emotional Aspects
Personal Dimensions
When I put on clothes to go out into social scenes, I want to feel sexy, so I can experience life with a shared presence and connecting aesthetically to my locations and find fulfillment through play, pleasure and experience.
Social Dimension
When I go out with a group of friends or going to a party, I want to dress inline with the social settings while standing out, so I can be liked and remembered.
Evaluate and Prioritize Opportunities
I used data from the screener matched to the interview findings to assign satisfaction and importance scores to each of the Jobs-to-be-done.
I came up with the three job groupings: Over-Served, Well-Served and Under-Served.
I then export the underserved jobs to look for product opportunities and solutions and formulate How-might-we-statements to begin design and ideation.
How might we's
How might we increase wardrobe utilization by curating pieces that are reflective of the owner's style, personality, and current life situations?
How might we present clothing options that align with a person's social calendar and deliver outfit options that help users show up in social situations and get the most from the time they spend out of their houses?
How-might-we statements reframe the user research insights into design opportunities. Ideation is then used to explore opportunities and generate as many solutions as possible before implementing solutions.
Design
Here I ideate on solutions, define the product in terms of information hierarchies, user flow, minimum viable product, brand platform and design system.
Ideation
I tried three different ideation methods:
2x2 matrix
why-how laddering
analogies and benchmarking.
Of the three, analogies and benchmarking provided the best results. I believe this is because analogies tied potential solutions to existing solutions in the real-world helping, me the designer, visualize solutions that mapped to Chloe's real-world problems.
Clothing = Playlist | Make it easy to pick clothes to wear = Save and store outfits for future trips and events.
User Stories
Underserved Jobs-to-be-done were converted to desired outcomes statements and ranked by someone representing our persona.
The results were not what I expected or the direction I wanted the project to go in.
Users wanted to know more about themselves before making decisions to buy clothes. And they wanted help finding the right outfits for social settings and when traveling on vacation.
These became the basis for our minimum viable product (MVP).
As Chloe, I want to improve confidence in myself by wearing clothes that accentuate my favorite body parts.
As Chloe, I want to improve motivation at the beginning of the day or an upcoming trip by envisioning how great I will look in my chosen outfits, so that I start the day or trip on a positive note.
As Chloe, I want to accomplish more in my day by selecting the right outfits that are suitable for different activities or tasks, so that I can be efficient and productive without any wardrobe-related hindrances.
As Chloe, I want to identify my seasonal activities and hobbies before making changes to my wardrobe, so that I can have suitable attire for different activities and enjoy them fully.
As Chloe, I want to increase the amount of play activities I participate in by wearing the right outfits that allow for freedom of movement and comfort during active pursuits.
As Chloe, I want to know my personality and style better before making clothing purchases, so that I can make more informed decisions and buy clothes that truly reflect who I am.
Site Map and User Flows
Card Sorting
Card sorting was used to see how our users think about the relationships between items and ideas within our app.
Site Map
About me
my lifestyle
Active
Social
My locations
Preferences
favorite body features
my personality
Brands I shop
measurements
Style boards
style for everyday
style for vacation
style for active pursuits
style for social occasions.
My plans
Date
Location with weather
activities planned that day
outfits
User Flows and Red Routes
User Flows were created based on the information architecture and the desired outcome statements selected for the MVP.
The red routes are:
Register - onboarding
Outfit Planning
Style Board creation and management.
The following are the initial user flow diagrams used for the first sketches and guerrilla user testing. After several design iterations and testing these flows have changed
Brand Platform
Before starting any design, it's important to clearly understand the brand we're designing for.
Brand Personality
Playful.
The brand should have a playful personality to reflect Chloe’s fun and flirtatious nature. Our product allows Chloe to play with her clothes like paper dolls while also dressing her to play in the global playground, exploiting and trying new experiences.
Brand Attributes
Fun, Flirtatious, Inspirational, Adventurous & Versatile
The brand’s main attributes are Fun and Flirtatious, aligning with Chloe‘s main energy.
Our product should be a source of inspiration, helping her facilitate her main goals of adventure and experiencing life.
Our product should convert her wardrobe into a versatile set of options that can be mixed and matched for different locations and occasions.
Design System
Almost every component was designed and maintained in a shared design system. The following shows some of the design components and high-fidelity screens.
Iterated Testing and Design
Designed Realism
The prototype has 300+ screens. I wanted to enable users to take any path, even if they were wrong. This served two purposes:
Allow users to take wrong paths, so I can find design errors.
When going down wrong paths, see if users can easily get back to where they needed once they realize mistakes were made.
Sketches + Guerrilla Usability Testing → Wireframes
The first test was scrappy, but important because I need early feedback before investing larger blocks of time in design.
The initial screens don’t look like much, but they saved a lot of time by giving me insights into what users wanted and expected from the app I was about to design.
High-fidelity screens + User testing → First round iterated design changes.
The first round of testing uncovered fewer issues than the second round. This made me think the app was pretty good. But that wasn’t the case. The initial issues kept users from seeing the larger value of the design.
Improved Prototype + More User Testing -> more design changes to fix usability issues
Ideally, I would repeat user testing and design changes until all the design issues became user preferences. But for this class project, I was instructed to stop after the second round of user testing.
I'm delighted with everything that was uncovered in the second round of user testing and curious what more I could find with continued testing.
Final Working Prototype
You can find the final state of the prototype here. Please check it out and give it a try.
Conclusion
Through user research, I uncovered a group of users with a unique set of problems
Through more research and design practices, I ideated and iterated on a solution that solves our users' problems.
I developed a brand platform representative of our main user, Chloe, and then created an app that solves her problems and is representative of her personality.
For my first-ever project, I am happy with the results. I'm delighted by the feedback I've received.