Case Study
KODI Fitness & Performance
App & Responsive Website
Challenge
Some busy brides/grooms hire a wedding planner to organize their big event.
However, for the busy bride/groom wanting to plan their own event (or just wanting to be more organized as they interface with their wedding planner) this website will provide everything they need to stay on track.
Solution
This website provides the budget minded bride or groom a way to find vendors and venues easily by allowing filtering by price before requesting a quote.
Challenge
Many fitness apps track user weight, food and exercise. However, many do not offer coaching nor do they track users' sleep which is important to overall weight loss and a healthy life.
Goal
I want to understand common challenges young adults face in being successful using a fitness app.
I want to identify common and essential needs of users who are trying to track and maintain their fitness.
Solution
This app will help young adults improve their lives through healthy eating and exercise. This app will help people track not only their exercise and food intake, but also their sleep. It will also offer access to nutrition and fitness coaching.
My Role
UX Designer, Research Designer and Visual Designer
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.
Project duration
February 2022- March 2022
Understanding the user
User research
I interviewed five users and created empathy maps for them. There were four women and one man. Of these, one user is a Black gay female, one user is a white gay female, one user is a Black bisexual man and two users were cis Asian women.
I discovered that users were looking for an individualized meal plan and coaching so they would be successful in meeting their fitness goals.
Persona & problem statement
Natalia is a busy junior executive who needs coaching, support and accountability because they need to stay on track to reach their fitness goals.
Ahmaud is a busy software developer who needs help calculating and tracking macros and calories because he wants to reach his fitness goals.
User journey map
I created a user journey map of Ahmaud’s experience using the site to help identify possible pain points and improvement opportunities
I created a user journey map of Natalia’s experience using the site to help identify possible pain points and improvement opportunities.
Starting the design
Paper wireframes
I used graceful enhancement in my prior case study (working first on a mobile version, then designing a website from that). I decided to take a top-down approach for this project and practice graceful degradation. Thus, I created paper wireframes for the KODI website first, then the mobile layouts.
Digital wireframes
Digital wireframes allowed me to refine the designs created with paper.
​
These designs focused on delivering a personalized fitness experience for users.
Wireframes
Top half of home screen calculates and tracks calories
Bottom provides tracking for macros, access to coaching and meal plans to help users stay on target.
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of logging macros for a meal, then finding a recipe from the meal plan. View KODI Fitness & Nutrition’s low-fidelity prototype
Usability study findings
I used this prototype to conduct a usability study. For 3 of my participants it was moderated, for the other 2 it was unmoderated. After completing an affinity diagram, the pain points fell into 3 major categories:
‘Add to Macros’ button
Three participants could not find the button and expected it to be in the center of the screen.
Return to home screen
Three participants could not find the recipe cards because they had no pictures and no titles
Return to home screen
Four participants were confused by the ‘Done’ icon (not realizing it meant Home). Also confused why the ‘Back’ icon didn’t take you Home.
​
Refining the design
Mockups
Based on the insights from the usability study, "Add to Macros" needed to be moved to the middle of the screen so that it is easier to find.
Additional design changes included changing the name of the Done button to Home. The menu cards were now obvious as they were labeled and included pictures. The global navigation bar was also cleaned up so that ‘Meal Plans’ was easier to find.
Accessibility considerations
Typography
Headings with different sized text for clear visual hierarchy
IA
Initial focus of the home screen on user's personalized caloric and macro counts help define the primary focus of the page.
Mockups: refined designs
My high-fidelity prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
Sitemap
After completing the mobile app designs, I started designing the responsive website. I used the KODI Fitness & Nutrition sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive designs
The design for screen size variation included mobile, tablet, and desktop. I optimized the design to fit specific user needs of each device and screen size
Looking forward
Impact
Takeaways
Our target users felt the design was intuitive and easy to navigate through the user flow. The images were engaging and the site had a clear visual hierarchy.
What I learned
The most important takeaway: user feedback is invaluable for creating the most inclusive and enjoyable user experience. I learned that there are nuances to user experience that cannot be anticipated without real usability testing.
Next Steps
Testing
Conduct follow-up usability testing on the app, including mobile, tablet and desktop applications.
Education
Add more nutrition information/articles to educate users on nutrition and fitness.
Gamification
Provide badges to enhance the coaching experience and improve fitness outcomes.