Aetrex - Foot.com
Foot.com collects and refines global 3D foot data from Aetrex’s latest scanners, serving footwear developers and designers worldwide. The mission is to make 3D foot data widely accessible, take the guess work out of the equation and provide footwear brands with the data they need to create better fitting and functioning footwear. Foot.com features the most accurate, complete 3D foot data broken down by gender, region, foot size and much more.
Client's mockup - Build a Last
Problem Statement
The project aimed to develop a tool for constructing a last, enabling industry product designers to accurately measure unique foot dimensions using Foot.com and Aetrex's 3D foot scanners. Collaborating closely with Aetrex and Foot.com teams, we gathered insights on user requirements and direct customer feedback, ensuring alignment with the goal of enhancing customer satisfaction, particularly given Aetrex's expertise in footwear products.
Challenges
-
Given the rough mockups provided by the client, a critical challenge was comprehending the tool commands within a short time frame, as the project had a strict 2-week turnover.
-
One of the design challenges stemmed from limited space for user interaction on the canvas, compounded by the constraint of not being able to redesign or alter the left navigation of the portal. This initially posed difficulties in utilizing the space effectively while displaying all foot measurements on the same page.
-
Another challenge was implementing the compute function somewhere on the canvas without obscuring the 3D foot scan. Additionally, incorporating a minimal design for the toolbar presented a challenge.
Timeline
April - May 2023
(3 weeks)
Role
UX/UI Designer
(Research, Visual Design, Interaction Design)
Team
Collaboration with in-house product designer, worked closely with technical dev engineer and project manager
Building A Last Flow
1. Measurement View: Displays a list of measurements, allowing users to click on specific boxes to view the measurement in 3D and its value in centimeters. Aetrex calculates and sends measurements via API, and we render them accurately on the frontend.
2. Left Foot/Right Foot Buttons: Toggle between left and right foot models provided by Aetrex, with the left foot shown by default.
3. Label View: Toggle feature displaying labeled parts of the foot, with coordinates provided by Aetrex and rendered accurately on the front end canvas.
4. Explore Foot: Similar to Left/Right Foot Buttons logic, toggling this feature displays the foot model over the cross-section.
5. Making Cross Section: Users adjust the cross-section position using the prototype, then press the compute button to call Aetrex's measure server via API. The server returns cross-section measurements, populated in the cross-section table.
6. 2D View of Foot: Users define the cross-section using the 2D view, selecting two points and clicking compute to draw the cross-section on both the 2D and 3D views. Aetrex's measure server returns cross-section measurements, populated in the 2D measurement cross-section table.
7. Reset: Returns the 3D foot to its default position and clears all cross-section table results.
Auditing Foot.com requirements
Market Research
Conducting quick market research for the tool involved identifying similarities with existing tools and determining necessary functions for users. Exploring complex tools used for 3D rendering provided inspiration for crafting a similar user experience. While the project's idea is unique, drawing from existing tools guided the structure, such as utilizing the right panel for displaying measurements.
Market research for 3D scultping tools
Design Components
Foot.com team didn't provide strict guidelines for the design system and components, we developed basic components specifically tailored for just the build-a-last navigation.
Design components utilized for 'Build a Last'
Design Wireframing
-
Iteration Round 1
For this iteration, we repositioned the navigation from the left side to the top, maximizing the canvas space to accommodate the tool's interaction requirements. We explored various layout options for each feature section and their placements.
Option 1: Placing the foot filter section on the left side, along with demographic filters on the top.
Option 2: Using the right side panel for filter selection.
Option 3: Separating the top navigation bar to distinguish the first flow in building the last, starting with selecting the view (measurement or explore), then left or right foot selection.
This iteration process helped us narrow down the options. However, client feedback suggested removing extra features from the bottom and maintaining the navigation bar on the left side, as shown in the early client mockups.
Design iteration round 1
-
Iteration Round 2
In the second iteration, we shifted the top navigation to the side for a cleaner look and introduced simpler options.
Option 1. We settled on placing measurements on the right, emphasizing controls, and worked on implementing the compute function.
Option 2. We refined visual elements and toggle/dropdown hierarchy.
Option 3. We switched measurements and explore items in the dropdown for streamlined user behavior.
The client approved removing clutter from the top nav. Addressed user struggles with active/inactive buttons in the final design.
Design iteration round 2
Final Outcome
The design process was rapid as users had clear preferences. The visual design effectively met the end users' needs, facilitating the construction of a last with intuitive experience and visual design.
