Let's chat! Reach out to me below or fill out the form.
PLATFORM
Responsive Web Design (Desktop and Mobile)
​
UX TEAM
Katherine Chiu, Suyoung Min, Christina Tai, McKenzie Warren
​
ENGINEER TEAM
Shenae Simmons, Jack Gay, Sidgi Samanduyev, Calvin Kim
​
*March 2019 - Sprint 1, May 2019 - Sprint 2
MY ROLE
UX Research, UX + UI Design, Design Sprint Facilitation
Involved with: User Interviews, Research Synthesis, Persona Creation, Usability Tests, Low-High Fi Prototypes, Handoff File Edits, Facilitate Checkpoints, Sprint Timeline Plan
MY TOOLS
Sketch, Illustrator, Photoshop, InVision, Zeplin, Github, Google Drive, Trello, Keynote
OVERVIEW
01
PROJECT SCOPE
What is the problem space?
Our team was tasked with creating a responsive website that would address a problem within the fashion industry. We created a topic map that focused our efforts on the consumer experience - specifically menswear. Why? We recognized a few key projections for the e-commerce fashion industry.
"Menswear will outperform the women’s clothing sector across the world by 2020."
"The global menswear market is expected to register a CAGR of 4.7% during the forecast period, 2018 to 2023"
"The majority of these new consumers are within the 16 to 24 and 25 to 34 age groups."
Initial Assumption
After discussing what we each knew about the industry, we formulated a statement to guide us through the research segment.
"We believe a responsive mobile website will help consumers of menswear purchase the product that they need. As a result, they will save time and effort, and experience increased satisfaction during their shopping process.
02
RESEARCH
Validating Initial Assumption
In order to validate if we had targetted the right problem, we created a screener survey to find potential users to interview with the following criteria:
-
Shops for menswear
-
Ages 18-35
-
Online and in-store shoppers
-
Experience shopping on more than one device
​
​
Discovery Through Interviews
While filtering through the 40 survey responses, I learned that our screener questions were not targeted enough. Our pool of potential users ranged from female-identifying shoppers who were shopping for others to male-identifying shoppers who were either budget-conscious shoppers or trend shoppers. These different demographics and shopping motivations showed behavioral trends that pulled us in varying directions.
We refined our initial approach and moved forward with interviewing 6 potential users that met these two additional criteria:
-
Male-identifying consumers that shopped for themselves
-
Fashion/trend-focused consumer
​
​
Key Insights
My team and I split into pairs to conduct our rounds of interviews with one person assuming the role of interviewer and the other as note-taker. We reversed roles with each new participant and came together to synthesis all 6 interview results through affinity mapping. Below are the 4 major trends we found (hover for more details).
Digital Use
​
5/6
"If something pops up in my head, I will look on my phone. But visually desktop is easier to see all the information."
​
(Hover for more)
3 cups
Flour
Users did extensive research on phone and desktop before buying. This final purchase would happen online if they needed to save time or in-store if they needed to further validate the accuracy of a product.
Digital Use
Shopping = An Investment
​
5/6
​
"I research exactly what I want to make sure it's worth the investment."
​
​
(Hover for more)
3 cups
Blueberries
3 cups
Flour
Users did not express impulse buying habits; their mentality was to research first and then buy after. They would purchase items meant for specific occasions.
Shopping = An Investment
More Details = Less Confusion
​
6/6
"I check the product descriptions to see how the clothes will fit me."
​
​
(Hover for more)
3 cups
Blueberries
Users felt confident in making a purchase if they were provided with detailed product information, product options, and trusted recommendations.
More Details = Less Confusion
Size & Fit Variations
​
6/6
"It's important to know how the clothes will fit me. I don't want to spend too much time finding what I want."
​
(Hover for more)
​
Users expressed that accurate sizing and fit were their top priority when shopping. However, they often experience inconsistencies across brands even when they search for their own sizes.
Size & Fit Variations
03
DEFINE
Persona Generation: Who is the user?
These key findings from the 6 interviews were combined into the following profile that represented our target user group.
The Design Challenge: What are we solving for?
​
When male-identifying consumers are looking for a specific item, they will browse for the product on their phones and research further on their desktop. They will go in-store to find the product in order to validate a product even further, but this conflicts with their need to save time while shopping. Users are not convinced by the online information provided to make a hassle-free buy.
How might we provide enough product and sizing information to help users like Jeff make a confident purchase?
Jeff B.
"How can I buy something if I don't know how it's going to fit me?"
28 years old / He/Him / Operations Manager / NYC
Jeff is detailed oriented not only at his job but also in how he manages his schedule and money. Jeff sometimes feels time-crunched with work so he would like to spend less time shopping while still making quality purchases in his personal style. He often combats this by shopping at familiar brands because he trusts the clothes will fit. However, he has difficulties with other brands when he wants to expand his daily wardrobe.
GOALS
-
Find products that match his style aspirations and body type
-
Spend more time working towards his goals and less while shopping
CHALLENGES
-
Can't be certain if a product will fit him from the information currently provided by online retailers
BEHAVIORS
-
Researches from mobile and desktop sites before making a purchase online or in-store
-
Allots time finding the best options
NEEDS
-
Sizing consistency and predictability
-
Product measurements and detailed photos to make quicker purchases
04
FACILITATING IDEATION
Prioritizing Features For MVP
I had to clearly define our goals in order to facilitate the design sprint segment that included a team of software engineer students. They shared valuable insights into the feasibility and technical capacity of our concepts while also developing empathy for the users through shared research findings. The user persona, Jeff B. guided our decisions towards the final prototype.
As a collaborative team, we used the Moscow Mapping method to formalize a list of key features to be integrated into our minimum viable product. These features were adapted to the users' context of use for mobile and desktop versions.
Low-Fidelity Prototype:
I continued to facilitate two rounds of design studio employing the "Crazy 8" technique towards paper prototype development. The timed sessions allowed us to produce low-fidelity paper versions of our core concepts. They were functional for quick usability testing and iteration rounds.
Usability Testing:
We conducted 1 round of usability testing with each paper prototype version on 3 participants that matched our user criteria. When these tests showed no major issues in utility (value of our concept) or usability, we moved on to creating a medium-fidelity prototype in Sketch. These wireframes were exported into a clickable Invision prototype for further testing rounds before moving onto the high fidelity output.
​
After 5 rounds of testing on our low to medium-fidelity prototypes and revisions, we arrived at our high fidelity wireframes.
05
THE SOLUTION
What is Made2Fit's concept?
The goal of Made2Fit is to help consumers find the products they want in the sizes that match them on every visit to the website. Previously our users would have to look into all product details and options thoroughly before making a purchase. We make their shopping experience easier using machine learning technology that will collect their measurements and additional data to generate recommended sizing and fit for each product.
Home Page
What differentiates Made2Fit from competitors is the main theme of "finding the right fit". It was important that new shoppers knew what service they would be offered from the landing page.
​
-
"Get Started": Redirects to a page with a detailed explanation about the technology and platform
-
Hero section: Communicates Made2Fit's brand identity and service with hero image and mission statement
-
"How It Works" section: a quick onboarding overview
2
1
3
2
1
3
4
5
Onboarding: Measurement Input Page
To complete the sign-up process, users are asked to input the sizes of different items that fit them best. By filling out this profile the first time, shoppers will have a log of these measurements saved to their account.
​
-
Tabs: Click to switch between item types.
-
Picture: Informs users what to take measurements of
-
Size in relation to brand: Knowing that each brand has different sizing and measurements they follow, users can choose the brand of their favorite item so that our AI technology can pool data from them (ie. sizing charts, reviews).
-
Fit section: Takes into account each shopper's preferences on how an item looks and feels on them.
-
Your recommended size: System match complete
Product Page
We incorporated the following features to help users spend less time researching the details they need to validate that a product is worth purchasing.
​
-
Imagery focused on fit: We prioritized showing fit views and 360-degree videos over detail shots of fabric and embellishments based on user research.
-
Model measurements: For context/reference
-
Auto-generated size: Recommended sizes are auto-filled in based on the shopper's profile.
-
Fit meter: This feature informs people if a product is true to size or not. It is a popular feature on women's fashion websites, but lacking in menswear.
-
Feedback meters: Based on customer reviews
-
Customer reviews: Verified reviews from those who purchased the item before increased credibility.
-
Product details section: Additional information on material, care, product construction/style and fit
​
3
1
2
4
5
6
7
Responsive Website: Context of Use
Made2Fit's responsive platform serves different purposes that align with the user behavior insights we collected. Since users are online shopping through both their mobile and desktop devices, it was valuable to design both screens for the following:
-
Onboarding process
-
Research and validation process
06
DESIGN DELIVERY
Streamlining Hand-offs to Developers:
Aside from including the developers in the decision making of the MVP features, we kept our communication open the entire time to ensure we stayed on track with the design sprint timeline and what could be built in that timeframe. We utilized daily stand-ups for high-level updates and cross-collaboration tools such as:
Collaboration Links
07
REFLECTION
Collaboration is Invaluable
This was my first time collaborating with a software engineer team, but I believe my past experience in cross-disciplinary environments allowed me to adapt quickly. I learned to adjust timelines and prioritize features according to feasibility and level of skill/resources the entire team had. Organized file management was important for hand-offs as well as aligning design output and changes to match the development timeline.
​
Empathy is Not Exclusive To Your Users
It was challenging for me to take on the role of design sprint facilitator for a team of 8. But it also gave me the chance to familiarize myself with effective leadership, communication and project management strategies. I learned to understand each person's strengths and weaknesses without micro-managing. I trusted my team members to be able to deliver what was asked and remained the big picture goals person when needed. We each leveraged our backgrounds to build a perspective that truly considered what Made2Fit's value would be for the users.