FitU for Shopify
A mobile app designed to empower online shoppers to find their right apparel fit and size utilizing a personalized 3D Virtual Model.
iOS - Research - Wireframes - User Interface - Usability Testing - Prototyping
Overview
My Role: UX Researcher, UI Designer
Timeline: 5 days | Dec 2020
Project Type: Collaborative, conceptual
The Challenge
As a partnership between BrainStation and Shopify, me and 3 other designers, received a design challenge to be solved in a 5-day sprint:
“How might we bring brick-and-mortar sensory experiences online so that consumers around the world can get enriched shopping experiences like they may get in-store?”
The Process
Secondary Research
With the given challenge and a constraint to create a native mobile app, we kicked off our sprint week making quick decisions. Discussing our past experiences, we noticed a common frustration related to clothing online shopping.
So, we decided to focus our research on regional markets and their shopping behaviours for apparel products.
We found out that:
Primary Research
From the first phase of the research, we came up with assumptions that gave us insights to conduct the qualitative research by talking to people.
Based on data from research findings, we decided to interview North Americans, experienced online shoppers aged 25-54.
These were the main themes we came up with:
Clothing Fit
"In-store shopping is a must if I need to find the right fit."
"Online shopped items may not fit as well as I'd like."
Inventory
"Online shopping makes it easier to find items that aren't available at the store."
"Wants to easily browse through different options."
Design Question
With solid and narrowed research findings to a target audience and their goals, we decided to refine our overarching design question to:
“How might we utilize technology to give experienced online shoppers a better understanding of the clothing they are purchasing, so that they can accurately identify their correct size?”
Persona
Then, I encouraged my team to leverage our research findings before moving along with ideating a solution. I found patterns in identified pain points, opportunities and insights and aggregated my findings in the form of a user persona.
I invite you to meet Jessica Simons - an avid online shopper frustrated by often seeing herself returning a clothing item that didn't fit her as well as she expected.
Click to expand image.
Inspiration
Looking at Jessica's pain points and goals, we identified some design intervention opportunities to answer our design question.
That's when we came up with a collection of ideas and concepts as inspiration for a potential solution.
Ideation
We discussed our inspiration findings and what would be feasible under the given timeline, considering Jessica's most compelling goal - be confident in purchasing her right fit online. Then, we decided on 2 main functions for our design solution:
- Personalized 3D modelling
- Clothing fitting on a 3D model
It was time to put some light bulb ideas into pen & paper sketches, and based on team voting, we came up with a final sketch solution.
During the ideation phase, we brainstormed some ideas for the app name. We all agreed to call it FitU - as it reflects the core app functionality in a short, memorable and easily pronounceable name.
To ensure FitU would successfully solve Jessica's major pain point, we drew a storyboard to illustrate how she would get to know, download and use the product for the first time.
Mid-Fi Prototype
From storyboarding we prioritized the main task flow into:
1. Avatar Creation
2. Adding an item to Fitting Room
3. Fitting Room
4. Checkout
Considering the short time, we decided to divide and conquer and each team member worked in a different section and once we finished, we made sure the end-to-end flow was connected.
These are the screens we came out of it.
Avatar creation screens.
Adding and utilizing the Fitting Room.
Checkout.
User Testing
To test the app's usability, we conducted one round of testing with 6 different people to validate the functionality of our first grayscale prototype.
These were our key findings we decided to address:
Avatar Creation
Some participants were confused if avatar creation was for their own measurements or their preference for clothing size.
Fitting Room
General confusion where is the tappable area to select top or bottom clothes to virtually try it on.
Checkout
A few of them said they were confused by the checkout process. Once they tap the arrow icon they didn't expect it would complete the purchase.
Hi-Fi Prototype
Because our main findings represented low effort and would improve user value, we made improvements directly into the high-fidelity prototype. We also had a calibration check-in with our Shopify mentors, and we learned more about their app called "Shop," and we decided it would make sense to the business and the user to keep it as part of this existing app. We also discussed internationalization and better ways to educate the user on taking measurements.
After applying the refinement based on feedback, we came up with the final prototype:
Try prototype out! 👇
Measuring Success
Working with Shopify, I could internalize the key value of setting Success Metrics for every product and feature about to be launched. It's a strategic communication tool within the company's stakeholders by utilizing facts and data to prove a digital product's effectiveness.
The success metrics we proposed:
- Behavioural - Task Success Rate (TSR)
- Increase of items added to the fitting room that gets checked out
- Decrease in apparel returning rate - Attitudinal - Net Promoter Score (NPS):
- Social media engagement rate through the Avatar share feature
Next Steps
Considering this sprint's constraint, we didn't have the time to implement all the received feedback from user testing and our Shopify mentors.
That's why we decided to prioritize in order of user value what we would like to continue working on next.
- Further user testing with people with a range of abilities to improve FitU's accessibility where needed.
- Refine UI Design, keeping internationalization for information architecture, language and cultures in mind.
- Implement body measurements feature from the phone camera.
Learnings
We've been lucky to have the opportunity to work alongside Shopify for our Bootcamp sprint. Throughout this week, I not only learned to apply UX foundation into a real-world problem space but also:
- Dig deeper into the root cause of research finds in order to ground all the design decisions
- Prioritizing feedback when time is a major constraint
- Design with the not-so-happy path in mind
Thank you for reading :)
© Letícia Thaís Moraes, 2021