Groov is a startup at Wharton Venture Labs that brings the luxury of custom insoles to the athleisure market. Groov allows customers to quickly and easily order custom insoles by taking a scan of their feet from the comfort of their homes.
In order to get the scanning feature and product into the testing phase by the end of the summer, I worked with my team to design an app that facilitates the process of taking a foot scan, entering customization preferences, and purchasing an insole. This app will be available on iPhone only as it utilizes the TrueDepth camera to scan.
My Role
UI/UX Design Intern
TIMeline
Jun - Aug 2021 (2 months)
Team
• Founder/CEO
• Software developer
• 3D and computer
vision engineer
• Interns working on scanning guardrails, marketing, web design
Tools
Figma, Premiere Pro
• Identify key business goals
• Map user journey to identify key problem areas
• Conduct competitive analysis to evaluate what currently works
• Talk to users to challenge/validate assumptions
• Draft user flow for new and returning user journey
• Develop ideas with low-fi wireframes
• Collect feedback from the team
• Test usability and collect feedback user testing
• Revise designs
User Journey Map
I started by brainstorming the user journey with Dan, from learning about Groov to purchasing a custom insole. Throughout the journey, we identified what we wanted the user to feel in an ideal scenario as well as what the user might feel if the process did not go smoothly.
Overall Objectives
Once we identified potential sources of risk from our user journey map, we defined some overarching business goals and user needs that I would need to address in the design.
Business Goals
• Collect accurate, low error scans + customization information
• Keep user engaged to encourage purchases
• Build trust
• Convey branding
User Needs
• Easily complete foot scans and input customization information
• Order and receive personalized insoles
Competitive Analysis
In order to get a better sense of what currently does and doesn't work in existing foot scanning apps, I looked at the UI/UX designs of LuxCare and FitMyFoot.
LuxCare
LuxCare is an app that helps customers scan their feet to order 3D printed insoles by 3D printing company LuxCreo.
Home Screen
This is the home screen with an expanded side navigation (initially hamburger menu).
Preference Customization Screen
This is the last step of the scanning process.
FitMyFoot
FitMyFoot is an app that helps customers take photos of their feet to order 3D printed insoles by Wiivv Wearables.
Home Screen
This is the home screen before the user has taken foot photos.
In Progress Scanning
This is the instruction screen that appears before each scan.
User Interviews
In addition, I talked to 5 users about their previous experiences with e-commerce apps and 3D scanning technology.
20 min
virtual
interviews
5 discussions
with people ranging from 25-30 years old
Key Takeaways
While talking to various users, I noticed that many hesitancies with trying out new products usually stemmed from skepticism and a lack of trust.
• For a new, 3-D scanned custom-fit goggle that didn't end up fitting, one interviewee said that the "technology isn't quite there yet"
• One interviewee was doubtful about the extent to which an insole could be well-tailored based off of a foot scan, compared to an in-person fitting with an orthopedic doctor
Creating the overall scanning flow
While creating the overall scanning flow, I wanted to make sure I followed these design principles I identified from the user journey map, competitive analysis, and user interviews:
Trust
Show overviews of processes and show users that they can be confident in Groov
Simplicity
Reduce the number of screens when possible so users don't feel impatient/ frustrated
Clarity
Add visuals and explanations to avoid any confusion and uncertainty
A snapshot of the user flow brainstorm
I started by mapping out a user flow diagram to get a sense of how new and returning users would walk through the app. I used a couple of sketches to show initial visual layout ideas and discussed the pros and cons of different decisions with Groov's founder.
Example 1: Simplifying the beginning of the scanning flow
While other scanning apps typically asked users to choose a foot to start with, these choices would make the process unnecessarily lengthy and put additional mental strain on the user for having to make so many choices. To reduce mental strain and help users feel that they could trust us and just follow our lead, I made revisions to simplify the user flow.
Draft
Final
Example 2: Improving the pain question
For simplicity, I combined the pain question into a single screen. For clarity, I added visuals to help the user identify front, middle, and heel areas of their foot.
Draft
.png)
.png)
Final
%20-%20highfi.png)
Maintaining Engagement
From the user journey map, I recognized that the scanning process could feel long for some users, since users would need to take scan both their feet from multiple angles in varied positions. Below are some features and interactions I included to maintain engagement during this process.
Beginning
To make the scans less daunting, I broke the process down into digestible steps.
Mid-scan
To motivate users to continue scanning, I showed progress between steps.
Clarifying Intake Needs
Lastly, I wanted to communicate why the company had to collect each piece of personal information to establish transparency, trust, and clarity. I also wanted to make sure the user would be comfortable sharing personal information, so for fields such as sex, users can choose not to answer.
Users can find more information about a field or choice by clicking on the question mark
Photos, icons, and text help inform the user of what each choice means
Users can choose not to answer if they feel uncomfortable sharing information
Designing the navigation bar
In another open sort, I asked 5 interviewees to group functionalities based on similarity and label the groups they made. Using these groups, I could get a better understanding of users' mental models, which would inform me of how I could organize tabs.
For example, one interviewee organized the cards like this:
After synthesizing findings, I was able to determine that Account/Profile, Scan, Orders, and Groov/Company/Information were the most common categories.
In the low-fi wireframes, I created three navigation bar versions with the above mentioned four tabs along with a Home tab.
While users typically put "learn more about Groov" and "get customer support" in the same category, the About tab didn't seem to encompass both of these functionalities.
Additionally, I realized that the content in the Home and About page was redundant, so I turned the About tab into an FAQ tab.
Figuring out what goes on the home page
In 5 separate card-sorting exercises, I asked interviewees to group different app functionalities into different categories based on potential frequency of use. Functionalities that users use most frequently would go on the home page for quick access.
For example, one interviewee organized the cards like this:
I concluded that shipment tracking, completing an order, and reordering would be used most frequently. To further Groov's business goals, I also wanted to make make it easy for customers to invite a friend to receive a discount.
For more visual indicators and branding elements, I created some illustrations.
Next Steps
Overall, I received positive feedback from a round of usability testing for the personal fit survey and onboarding process.
77% of testers gave the process a rating of 6 or 7 on a scale of 1 to 7 for easiness of completion.
Next, I would need to do more comprehensive testing by integrating specific scanning instructions and the scanning technology itself.
Groov's app is currently in beta testing on TestFlight - check back for more updates later on!
Thank you for viewing!
Sign up for the waitlist at groov.me :)
