UI Designs of several Groov screens
Internship
Mobile
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.

Role
UI/UX Design

TIMeline
Jun - Aug 2021 (2 months)

Team
Jason (intern, scanning guardrails),
Gabriel (intern, marketing),
Nicole (intern, design),
David (3D and computer vision engineer),
Benjamin (developer),
Dan (founder/CEO)

Tools

Figma logo
Adobe Premiere Pro logo

Figma, Premiere Pro

1 | Process

🎯

Define

• Identify key business goals
• Map user journey to identify key problem areas

🔎

Research

• Conduct competitive analysis to evaluate what currently works
• Talk to users to challenge/validate assumptions

✏️

Ideate

• Draft user flow for new and returning user journey
• Develop ideas with low-fi wireframes

📱

Test

• 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
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
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
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

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:

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

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

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

Final

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.

Draft

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

Final

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.

Beginning

Scan overview screen

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

Mid-scan

Between foot progress bar transition

To motivate users to continue scanning, I showed progress between steps.

The progress bar in more detail

Progress bar

I also used the Endowed Progress Effect to encourage users to get started. Once the user sees that there is already progress (the blue bar), they will be more likely to continue towards the end goal.

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

Final Design

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 alpha test is currently in development and will soon be deployed for further testing - check back for more updates later on!

Thank you for viewing!

Get a pair of groovs at groov.me :)