Design, Photo, About

Foot.Science

The Foot.Science app lets you measure, size, and learn about your feet from the comfort of your own home. It uses phone’s built-in camera to takes threes photo from the inside, top and outside of each foot and generate a 3D model of your feet within a minute. The 3D model and measurements can later be used towards making custom-fit insoles and footwear.

The app was first launched in App Store and Google Playstore in September 2020.

Client

Wiivv

Year

2020

Duration

6 months

Status

Shipped

Role

UI/UX Design, User Research, Visual Design, Motion Design

Background

In early 2020, scanning a 3D object using a phone was not as straightforward as it is today. Before the release of Apple's 3D sensing rear camera, creating a 3D model of feet relied on foot scanning machines or sophisticated algorithms capable of assembling images into a cohesive model. We aimed to democratize this technology, allowing anyone to scan their feet at home. These 3D models and measurements can be used to create custom-fit insoles and footwear.

Capture technology

The capture technology required six photos taken at specific spots around the foot, i.e. inside, top and outside of each foot, with precise phone tilting.

The primary challenge was to guide users to the target area in a 3D space and level the phone with just the right amount of information, ensuring they were informed but not overwhelmed.

Roles and responsibilities

As the sole designer on the team, I led the design efforts from ideation to launch. My roles included:

Conducting user research and usability testing at various stages.
Creating UX artifacts such as personas, user stories, and user flows.
Developing wireframes and prototypes.
Designing high-fidelity UI.
Creating development-ready animations with After Effects.
Leading asset production.
Presenting designs to stakeholders weekly.
Ensuring design conformance for launch.

The solution

Given the lack of AR technology, guiding users effectively required a strong conceptual model that connected with real-world experiences. The idea of a wheel emerged while sketching technical requirements. To capture the three photos, the process resembled drawing a rainbow over the foot. As users moved their phone along the arc/wheel, the wheel rotated, mimicking an AR effect.

Design highlights

Onboarding

First-time app users are greeted with a brief, engaging onboarding experience. The onboarding sequence showcases the app's features and benefits across three pages, each with a video in the top half. The pagination design incorporates the wheel concept with three dots, maintaining visual consistency with the rest of the app. Each video transitions smoothly to the next, creating a seamless and fluid experience between pages.

Digestible instructions

From research, I found that users get frustrated when instructions get too long. The process is perceived to be easier if the instruction is short and sweet.

The conversational UI was intended to make it more approachable and allow users to scroll to see the full chat history.

Visual assets were used to aid understanding and introducing users to the rainbow/wheel concept by superimposing the UI element in the video.

Spatial guidance

The final design features a wheel-looking arc over the foot, with a green zone and arrow that indicates where the phone should move to.

To help users comprehend the relationship between the wheel and the foot, as well as where they are in the process, a zoomed-out wheel is shown before and after each photo is taken. The animation shades out the section that is just captured and highlights the next photo spot.

Automatic capture

Some positions were ergonomically challenging, and it was difficult for users to see the screen. To address this, the app provided haptic feedback and automatically took photos when the phone was in the right spot.

Interactive 3D model

Upon completion of foot capture, users will be gratified with their unique foot profile which consists of an interactive 3D model and measurements.

Users are able to rotate and zoom in to see details in the model. The 3D model rotates on its own when not interacted with.

Foot facts

The bottom part of the foot profile is a scrollable foot fact panel. The split view design is intended to give users the ability to refer to the visual and the data at the same time.

The first release of the foot facts gives shoes size information on different scales as well as measurements of foot length and width.

Foot facts next steps

There is more potential to foot facts than just the measurements. Users showed strong interests in learning about other aspects of their feet such as arch height and specifically if their arches are considered high or low compared to the general population.

The next releases of foot facts will bring more meaning to the data and give insights that users could take away.

Result

The Foot.Science app successfully democratized the foot scanning process, allowing users to capture accurate 3D models of their feet at home. The app's launch in September 2020 marked a significant milestone in making custom-fit footwear accessible to a broader audience.

Vancouver, BC