Case study · MileOne
A mobile app to help beginner runners start running regularly.
The entry hurdle into running is high, and the complexities of building a personalized training plan, while staying injury-free, can demotivate new athletes fast. MileOne gives beginners a personalized plan, real-time feedback, and a motivational AI 'Coach' to kickstart their running journey.
Scope
Jan 2024 – Apr 2024 · Solo project
Tools
Figma, Framer, LLM integration
Role
Product Designer
The challenge
Onboarding trust. AI touchpoints.
The two hardest problems sat on either end of the experience:
- Onboarding: earning trust and setting the right expectations for an AI-driven training plan.
- AI Integration: identifying the right touchpoints where the Coach adds value without getting in the way.
Planning
AI feature table and data flow.
To plan the integration of the Coach feature I crafted an AI feature table and a data flow diagram. The feature table outlined Coach's core capabilities: generating personalized plans and offering real-time feedback. The flow chart depicted how user inputs (running metrics, goals, recovery signals) are processed into tailored recommendations. Mapping data flow and feature scope this early kept the rest of the project honest.
Wireframes
Wireframes & UI spec.
I experimented with an onboarding experience anchored around an LLM chatbot. I opted for a conversational approach that walks the user through fitness goals and current levels, letting the model build a mental model of the runner, not the other way around. Every screen went into a living UI spec.
Prototype
Built in Framer, end-to-end.
I prototyped MileOne in Framer: interactive enough for real usability testing, clean enough for stakeholders to imagine the shipped product. Below: a stitched snippet of the conversational onboarding and coach feedback loop.
Screens
Closer look.
Key Takeaways
What this project taught me.
01
Building trust and setting expectations.
Working with a conversational LLM taught me how much the first two screens decide about the rest of the experience.
02
Integration of AI is a tone problem.
Writing for a chatbot that coaches runners meant designing voice and personality, not just screens.
03
Personalization is the unlock.
Users only trust an AI coach when the recommendations feel specifically theirs, not generic advice in a chat wrapper.
04
Thorough planning before pixels.
The feature table and data flow diagrams front-loaded the hardest decisions and made design handoff simple.