UI Designs of several Groov screens
3D Scanning

Groov Mobile App Design

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

Jun - Aug 2021 (2 months)

• Founder/CEO
• Software developer
• 3D and computer
vision engineer
• Interns working on scanning guardrails, marketing, web design


Figma logo
Adobe Premiere Pro logo

Figma, Premiere Pro

1 | Process



• 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

2 | Objectives

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.

Groov user journey map

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

03 | Research

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 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).

LuxCare home screen

Preference Customization Screen
This is the last step of the scanning process.

LuxCare Preference selection screen

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.

FitMyFoot home screen

In Progress Scanning
This is the instruction screen that appears before each scan.

FitMyFoot scanning screen

User Interviews
In addition, I talked to 5 users about their previous experiences with e-commerce apps and 3D scanning technology.

20 min

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

4 | Scanning Flow

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:


Show overviews of processes and show users that they can be confident in Groov


Reduce the number of screens when possible so users don't feel impatient/ frustrated


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.


First Select Sacn screen (foot/insole)Second select scan screen (left/right foot)


Scan overview

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.


Screen for selecting whether you experience foot painScreen for selecting foot pain area


Screen for selecting foot pain with foot visual

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.


Scan overview screen

To make the scans less daunting, I broke the process down into digestible steps.


Between foot progress bar transition

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.

Select physical activity level screen with photos and description

Users can find more information about a field or choice by clicking on the question mark

Choose insole length screen with icons and description

Photos, icons, and text help inform the user of what each choice means

Choose sex screen (options: male, female, prefer not to say)

Users can choose not to answer if they feel uncomfortable sharing information

5 | Navigation

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:

Example of open card sort

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:

Example of closed card sort (frequency)

‍‍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.

Groov illustrations
Final home screen

06 | Conclusion

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.

Usability test results (4: 5%, 5: 18%, 6: 41%, 7: 36%)Written feedback for overall UI/UX

‍‍‍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 :)