To understand behavior and listen to customer needs, we interviewed 3 groups of people - Recreational runners, fitness enthusiasts and half marathoners + marathoners. These groups have been represented as personas, as shown below.
Research Insights
“I’m aware that Asics shoes are super comfortable. However, they don’t look near as exciting as Nike shoes do, nah!”
75%
of customers consider shoe aesthetics to play a critical role while selecting new running shoes
“A good pair of running shoes can truly transform the way you run. It helps you unlock that little bit more - shoes play a major factor in performance.”
60%
of customers recognize the performance compromise from wearing incorrect running shoes for training and marathons.
“I know that for health, to avoid sports injuries, it's important to choose a good, suitable pair of running shoes.”
90%
of runners believe that preventing injuries is as, if not more, important than performing when it matters.
“Now that I think of it, I’ve often chosen the wrong shoe. 3/5 previous shoes have been poor investments.”
70%
of customers claim that they regret purchasing a new shoe as soon as 1 week after the date of purchase. Complaints are often regarding discomfort and stability issues.
Shoe aesthetics play a critical role in running shoes selection
Performance is compromised from wearing incorrect running shoes
Wearing the optimum shoe can minimize chance of injuries
Customer Journey Map
This Customer Journey Map provided a visual roadmap of customer touch points, interactions, and emotional wavelengths. It became increasingly important to understand user intentions to effectively focus on the right problem - and ultimately, the right solution.
Moodboard
We tussle with a crucial question - What do runners want to feel? 4 magic words emerged, translating into Levity's Moodboard.
UX PROCESS
The biggest challenge was converting content-dense touchpoints into visual consumption. For this case study, I'll unpack how we came up with insight cards, and the hiccups we faced along the way.
Wireframe
I started with a clean canvas, and one crucial question - how do we show all the data we collect from the user? Wireframing helped get past the initial hump. Testing these early concepts revealed one important learning - visuals must lead our story.
Iteration 1
Collapsable cards were the first visual concept we tested with sample audiences. I learnt that while the 'blueprints' caught the users' attention, the information load felt steep. Glanceability took a hit. I went back to the drawing board – simpler, this time.
Iteration 2
I moved away from the 'card' approach towards a continuous scroll. Stripping the visual noise, only critical and relevant content was housed in a container with top + bottom accent strokes. However, testing revealed that while usability improved, product consistency suffered.
Iteration 3 = Final UI
The final iteration was the best of both worlds. I advocated for the card UI from previous iterations + essential information with striking visuals. This approach consistently fit across the app's design language and was simple enough to consumer at a glance.
INtroducing INsight cards.
Scan Results・Step 3
Get an in-depth understanding of your foot type, pronation levels, foot landing, vertical oscillation, sizing & more. Insight cards highlight Feet Blueprints, along with personalized feedback from GaitScan.
Extending visual consistency.
Shoe Recommendations・Step 4
I took the learnings from building insight cards into creating blueprint for shoes. It was crucial to maintain visual consistency + deliver the right information in the right format.
Shoe Blueprints light up to highlight shoe features like midsole, cushioning, run style & more. Users learn about the shoe's key features, and why they suit your feet, run style & goals.
UI Design
We designed Levity with 3 core values at heart - Personalization, Perseverence & Collaboration. Together, they form the building blocks of our experience.
Begin Inspired – Onboard levity.
Pay homage to some of the most decorated runners in history, and learn what makes them different.
THE PERFECT SCAN – Gaitscan.
A revolutionary way to learn about your foot health & uncover performance-enhancing insight. An easy step-by-step tutorial guiding users through each stage for precise scanning.
Powered by Object Capture ARKit
GaitScan harnesses photogrammetry from Object Capture to create a 3D render of your feet in real-time
Branding
Visual Explorations
Logo Inspiration
Logo Iterations
Levity's Final Form. Always Upward, Ever Forward.
Levity
expletus sans
as Display Typeface
Geist mono
as Body Typeface
Learnings
- Creating a new product from concept to prototype is challenging. In order to nail the core experience, iteration and testing were my best friends.
- As passionate runners and mission-driven designer, Anurag and I were like two stones rubbing against each other, sharpening and polishing ourselves along the way. It occurred to me that ideas are sometimes overrated – the magic lies in teamwork.
- Building a product with the user at the center and design values as your North Star reaps better-than-expected outcomes.
If i had more time...
...I would create a custom design system to ensure scalable and agile implementation.
...I would focus on ease of scanning the users' feet and incorporate a larger running shoes data set for accurate matching.
...I would add functionality to differentiate running categories like trail, track, road & more.
