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
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.
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:
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:
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.
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:
Thank you for reading :)
© Letícia Thaís Moraes, 2022