Info
Project
MileOne
A mobile app to help beginner runner to start running regularly.
I myself am a passionate runner. I know how hard it can be for people to pick up running since the entry hurdle to get into running can be quite high for a lot of people. Adding on the complexities of creating a personalized training plan and staying injury free can demotivate new athletes. The MileOne app, which aims to provide beginner runners with personalized training plans, real-time feedback, and motivational support to help them kickstart their running journey.
Scope
Jan 2022 - April 2024 // Solo Project
Tools
Framer, Figma
Role
Product Designer
Overview
The MileOne app, which aims to provide beginner runners with personalized training plans, real-time feedback, and motivational support to help them kickstart their running journey. Throughout the development process, I faced several challenges, particularly during the design of the onboarding experience and the introduction of the “Coach” feature .
Onboarding
How do you create trust and set the right expectations of capabilities and functionality?
AI Integration
I had to identify the right touchpoints for the Coach experience.
AI Feature Integration
Mapping out data flow and AI features early on helped me define the project scope.
To plan out how the integration of the AI Coach feature for the app I crafted an AI feature table and data flow diagram. The feature table outlined Coach's core functionalities, like generating personalized training plans and offering real-time feedback. The data flow chart depicted how user inputs, such as running metrics, are processed to deliver tailored recommendations. These methodologies provide a structured framework for defining project scope and functionality, identify challenges early on, facilitate communication among team members, and serves as a valuable reference throughout development of the product.
Wireframes & UI Spec
I experimented with what the onboarding experience could look like.
In my initial wireframes, I tried out what an onboarding experience leveraging an LLM chatbot could look like. I opted for a conversational approach that guides the user through a set of questions to determine their fitness goals and current fitness levels. I documented all screens in a UI Spec document.
Prototype
I built a prototype of the experience using framer.
To plan out how the integration of the AI Coach feature for the app I crafted an AI feature table and data flow diagram. The feature table outlined Coach's core functionalities, like generating personalized training plans and offering real-time feedback. The data flow chart depicted how user inputs, such as running metrics, are processed to deliver tailored recommendations. These methodologies provide a structured framework for defining project scope and functionality, identify challenges early on, facilitate communication among team members, and serves as a valuable reference throughout development of the product.
Key Takeaways
Building trust and setting expectations.
Throughout the MileOne project I learned new skills and tools such as using framer to build ready-to-deploy products without the need of a developer. I learned about ways to integrate LLM's into products and ways to build trust with users.
The key takeaways and learnings from this project include the importance of thorough planning in developing an app, the value of integrating AI features to enhance user experience, the significance of user onboarding and trust-building in introducing new features. Additionally, the project showed me the challenges of finding the right balance between automation and human interaction in integrating AI features, highlighting the importance of ensuring AI-driven functionalities seamlessly enhance user experience while maintaining user trust and engagement.
01
Integration of AI
Never before had I worked on designing a chatbot experience. Through the MileOne project, I was able to understand what it means to incorporate the right tone and create an onboarding experience that sets the right mental models for users.
02
Personalization is key
I realized that personalization is really important if you want people to trust in your LLM's capabilities. Beyond that customized recommendations and advice is more effective in preventing injuries and helping runners reaching their goals.
03
Thorough planning
I learned how important it is to thoroughly plan out your product before you start building it. This includes planning the app’s structure, the integration of features, and anticipating user needs and interactions.
Planning
I aimed to establish trust and set clear expectations
In the planning phase, I paid attention to understanding the target audience's needs and preferences. This involved creating a detailed user persona, embodying the characteristics, goals, and pain points of my target user, Sarah. With Sarah's profile as my guiding light, I crafted a sitemap and user flows to ensure intuitive navigation and a seamless user experience. The sitemap and user flows helped me to get a better idea of the ecosystem and what features I wanted to include in the experience