UX/UI CASE STUDY
UX/UI CASE STUDY
Designing an Accessible Fitness App for Neurodivergent Users
Designing an Accessible Fitness App for Neurodivergent Users
Designing an Accessible Fitness App for Neurodivergent Users
Friendly reminder: This is a UX Case study where the main points are highlighted for your convenience and a better user experience.
Click here if you wish to skip for final design instead or check to check the prototype here.
Friendly reminder: This is a UX Case study where the main points are highlighted for your convenience and a better user experience.
Click here if you wish to skip for final design instead or check to check the prototype here.
PROJECT OVERVIEW
PROJECT OVERVIEW
PROJECT OVERVIEW
Roufit is an app designed to help neurodivergent people lead a healthier lifestyle. Focusing on ADHD, Autism and their needs, Roufit offers personalized features for an inclusive experience. Through gamification and accessible design, the app makes staying healthy and fit fun and rewarding for everyone.
This is a conceptual project created for a Design Challenge - Iterate UX, where we were tasked with designing an app that can make staying healthy and fit more accessible, fun and useful for people with disabilities.
Roufit is an app designed to help neurodivergent people lead a healthier lifestyle. Focusing on ADHD, Autism and their needs, Roufit offers personalized features for an inclusive experience. Through gamification and accessible design, the app makes staying healthy and fit fun and rewarding for everyone.
This is a conceptual project created for a Design Challenge - Iterate UX, where we were tasked with designing an app that can make staying healthy and fit more accessible, fun and useful for people with disabilities.
DURATION
5 weeks
ROLE
UX Designer and sole UI Designer in a team of 5
MAIN TASKS
THE PROBLEM
THE PROBLEM
THE PROBLEM
Neurodivergent individuals often struggle to follow a fitness routine.
Neurodivergent individuals often struggle to follow
a fitness routine.
Despite representing approximately 20% of the population, there are currently no health and fitness applications designed specifically to address those unique challenges faced by this group of people.
Despite representing approximately 20% of the population, there are currently no health and fitness applications designed specifically to address those unique challenges faced by this group of people.
THE GOAL
THE GOAL
Design a health and fitness app that is specifically tailored to the unique needs and challenges of people with ADHD and Autistic individuals, offering personalized features that cater to the individual needs of each user, helping them to keep their fitness routine consistently.
THE GOAL
Design a health and fitness app that is specifically tailored to the unique needs and challenges of people with ADHD and Autistic individuals, offering personalized features that cater to the individual needs of each user, helping them to keep their fitness routine consistently.
THE SOLUTION
A Gamefied Fitness App That Keeps You Consistent with personalized workouts
The app should focus on helping users keep consistent with their workouts through positive reinforcement, progress visualization and engaging challenges, while allowing for personalized exercises and music integration.
THE SOLUTION
A Gamefied Fitness App That Keeps You Consistent with personalized workouts
The app should focus on helping users keep consistent with their workouts through positive reinforcement, progress visualization and engaging challenges, while allowing for personalized exercises and music integration.
THE SOLUTION
A Gamefied Fitness App That Keeps You Consistent with personalized workouts
The app should focus on helping users keep consistent with their workouts through positive reinforcement, progress visualization and engaging challenges, while allowing for personalized exercises and music integration.
Discover
Desk Research
Netnography
User Interviews
Competitive Analysis
Define
Affinity Map
Persona
How Might We
Impact-Effort Matrix
Develop
User Flow
Low Fidelity Wireframes
Design System
High Fidelity Mockups
Prototype
Deliver
Usability test
Iteration
UNDERSTANDING THE DESIGN PROCESS
Discover
Desk Research
Netnography
User Interviews
Competitive Analysis
Define
Affinity Map
Persona
How Might We
Impact-Effort Matrix
Develop
User Flow
Low Fidelity Wireframes
Design System
High Fidelity Mockups
Prototype
Deliver
Usability test
Iteration
How did we get to this solution?
Discover
Desk Research
Netnography
User Interviews
Competitive Analysis
Define
Affinity Map
Persona
How Might We
Impact-Effort Matrix
Develop
User Flow
Low Fidelity Wireframes
Design System
High Fidelity Mockups
Prototype
Deliver
Usability test
Iteration
UNDERSTANDING
THE DESIGN PROCESS
Discover
Desk Research
Netnography
User Interviews
Competitive Analysis
Define
Affinity Map
Persona
How Might We
Impact-Effort Matrix
Develop
User Flow
Low Fidelity Wireframes
Design System
High Fidelity Mockups
Prototype
Deliver
Usability test
Iteration
How did we get to this solution?
Discover
Desk Research
Netnography
User Interviews
Competitive Analysis
Define
Affinity Map
Persona
How Might We
Impact-Effort Matrix
Develop
User Flow
Low Fidelity Wireframes
Design System
High Fidelity Mockups
Prototype
Deliver
Usability test
Iteration
UNDERSTANDING
THE DESIGN PROCESS
Discover
Desk Research
Netnography
User Interviews
Competitive Analysis
Define
Affinity Map
Persona
How Might We
Impact-Effort Matrix
Develop
User Flow
Low Fidelity Wireframes
Design System
High Fidelity Mockups
Prototype
Deliver
Usability test
Iteration
How did we get to this solution?
RESEARCH
Physical activity and healthy habits are highly recommended for both autism and ADHD.*
Physical activity and healthy habits are highly recommended for both autism and ADHD.*
In the early stage of our project, our desk research revealed that physical activities can have a huge positive impact for neurodivergent people, and alongside other types of therapies, it’s a recommended form of treatment to minimize some of the struggles of the user group.
But how do neurodivergent people deal with physical activities in their daily lives?
In the early stage of our project, our desk research revealed that physical activities can have a huge positive impact for neurodivergent people, and alongside other types of therapies, it’s a recommended form of treatment to minimize some of the struggles of the user group.
But how do neurodivergent people deal with physical activities in their daily lives?
In the early stage of our project, our desk research revealed that physical activities can have a huge positive impact for neurodivergent people, and alongside other types of therapies, it’s a recommended form of treatment to minimize some of the struggles of the user group.
But how do neurodivergent people deal with physical activities in their daily lives?
*Information from CDC official website
*Information from CDC official website
*Information from CDC official website
NETNOGRAPHY
Prior to conducting interviews, our intention was to observe how individuals with ADHD and autism naturally engage with our subject of study, without any intervention, in order to obtain more authentic responses. So we conducted a Netnography, analyzing 119 responses from two social media groups, and gained the following key insights:
Prior to conducting interviews, our intention was to observe how individuals with ADHD and autism naturally engage with our subject of study, without any intervention, in order to obtain more authentic responses. So we conducted a Netnography, analyzing 119 responses from two social media groups, and gained the following key insights:
CHALLENGES AND OPPORTUNITIES
Autistic individuals and people with ADHD deal with routine in almost opposite ways.
Autistic individuals and people with ADHD deal with routine in almost opposite ways.
Synthesizing our study, we built the following assumption:
ADHD and autism symptoms can overlap, but the study shows that they differ in their approach to fitness routines. Autistic individuals tend to incorporate physical activities into their daily habits, while ADHD individuals struggle to maintain a routine. ADHD individuals can benefit from gym environments, whereas autistic individuals may avoid them. Designing a fitness app for autistic individuals is more like an opportunity, while designing one for ADHD individuals poses a challenge due to their struggles with routine and motivation. To cater to both groups, we may need to focus on addressing the ADHD challenges, while providing an alternative to the gym for the autistic group. But we still needed to understand our studied group more in depth.
USER INTERVIEWS
We conducted user interviews with 6 participants to validate our Netnography findings and gain deeper insights into our users' needs. The interviews were conducted via Zoom and recorded for analysis.
We conducted user interviews with 6 participants to validate our Netnography findings and gain deeper insights into our users' needs. The interviews were conducted via Zoom and recorded for analysis.
We broke down our interview question into 4 main points:
We broke down our interview question into 4 main points:
Get to know the participants and the struggles with their disorder
Get to know the participants and the struggles with their disorder
Get to know the participants and the struggles with their disorder
Understand how they view or relate to the subject
Understand how they view or relate to the subject
Understand how they view or relate to the subject
Learn how the participant interacts with other related tools (like competitors) and what are they looking for when using it
Learn how the participant interacts with other related tools (like competitors) and what are they looking for when using it
Learn how the participant interacts with other related tools (like competitors) and what are they looking for when using it
Understand their pain points
Understand their pain points
Understand their pain points
DEFINE
It’s all about having fun
After summarizing our findings and breaking them down into 12 different categories in an affinity map, we’ve noticed that both of our user groups have a hard time with traditional fitness apps due to the lack of fun-oriented activities.
DEFINE
It’s all about having fun
After summarizing our findings and breaking them down into 12 different categories in an affinity map, we’ve noticed that both of our user groups have a hard time with traditional fitness apps due to the lack of fun-oriented activities.
DEFINE
It’s all about having fun
After summarizing our findings and breaking them down into 12 different categories in an affinity map, we’ve noticed that both of our user groups have a hard time with traditional fitness apps due to the lack of fun-oriented activities.
PERSONA
While ADHD and autistic individuals may exhibit opposing characteristics when it comes to fitness routines, we wanted to identify their shared struggles and pain points. By summarizing their challenges, we gained a clearer understanding of their needs and could develop targeted solutions to address them.
CHOOSING THE BEST SOLUTION
How might we help neurodivergent people stick to their fitness routine?
How might we help neurodivergent people stick to their fitness routine?
With our persona in mind, we utilized the HMW (How Might We) tool to generate over 15 solutions that met our users' needs. We then tailored and prioritized these solutions using the Impact-Effort Matrix, allowing us to focus on the 3 most impactful and feasible solutions for our users in our app.
USER INPUT +
MACHINE LEARNING
During onboarding, the user will input their fitness goals, preferred workout type, and any limitations or accommodations they may need due to their neurodivergence.
The AI would use machine learning algorithms to analyze the user's input data and generate personalized workout recommendations based on their unique needs and preferences.
SEAMLESS MUSIC
INTEGRATION
The need for personalized music during workouts was nearly unanimous among both autistic and ADHD individuals. We wanted to take advantage of this low-effort-high-impact solution and offer our users a seamless music integration with our platform and music apps such as Spotify and Apple Music during their workouts.
PROGRESS TRACKING
The AI would also track the user's progress over time, providing insights and recommendations to help them achieve their fitness goals and stay motivated. While this solution can keep ADHD people motivated, the tracking feature is very appreciated by autistic individuals, due to their potential to provide structure, routine, and visual representation of data, which can support organization and reduce anxiety.
The AI would also track the user's progress over time, providing insights and recommendations to help them achieve their fitness goals and stay motivated. While this solution can keep ADHD people motivated, the tracking feature is very appreciated by autistic individuals, due to their potential to provide structure, routine, and visual representation of data, which can support organization and reduce anxiety.
Some major improvements in the design
Some major improvements
in the design
Some major
improvements in
the design
TEST AND ITERATION
TEST AND ITERATION
Before transforming the low-fidelity mock-ups into high-fidelity, we iterated our screens based on feedback from the design team members and mentor.
Before transforming the low-fidelity mock-ups into high-fidelity, we iterated our screens based on feedback from the design team members and mentor.
PHASE 1 - FEEDBACK
PHASE 1 - FEEDBACK
Highlighting positive reinforcement
on the homepage
Highlighting positive reinforcement
on the homepage
We removed the duplicated information about the “hearts”, keeping the numbers of hearts close to the notification button, and changed the position of something that shows the user that he is doing go with he’s progress. In this case, is the “you are on day 3 streak”, but the message can change daily based on user’s progress.
We removed the duplicated information about the “hearts”, keeping the numbers of hearts close to the notification button, and changed the position of something that shows the user that he is doing go with he’s progress. In this case, is the “you are on day 3 streak”, but the message can change daily based on user’s progress.
We removed the duplicated information about the “hearts”, keeping the numbers of hearts close to the notification button, and changed the position of something that shows the user that he is doing go with he’s progress. In this case, is the “you are on day 3 streak”, but the message can change daily based on user’s progress.
Tailoring the onboarding questions to accommodate the user’s disability
Tailoring the onboarding questions to accommodate the user’s disability
Our initial version of the onboarding process focused on the type of exercise the user preferred. However, we realized it was more important to consider how the user wanted to receive the exercise information. This is especially important for neurodivergent individuals who may struggle with traditional learning methods, such as verbal instructions.
Our initial version of the onboarding process focused on the type of exercise the user preferred. However, we realized it was more important to consider how the user wanted to receive the exercise information. This is especially important for neurodivergent individuals who may struggle with traditional learning methods, such as verbal instructions.
Our initial version of the onboarding process focused on the type of exercise the user preferred. However, we realized it was more important to consider how the user wanted to receive the exercise information. This is especially important for neurodivergent individuals who may struggle with traditional learning methods, such as verbal instructions.
PHASE 2 - USABILITY TEST
After completing our prototype, we ran a usability test to validate our app. The tool used was Useberry, that allowed us to test our app remotely with our user group. Here is our major changes based on the insights from the usability test:
After completing our prototype, we ran a usability test to validate our app. The tool used was Useberry, that allowed us to test our app remotely with our user group. Here is our major changes based on the insights from the usability test:
Making the onboarding more enjoyable
Making the onboarding more enjoyable
One of the biggest pieces of feedback from our user testing was that our onboarding process was too long, and this is specially important once people with ADHD tend to avoid long tasks.
We addressed this by implementing several changes, including:
Reducing the number of questions from 13 to 10
Displaying the number of the current question
Making the "skip" button more visible and allowing users to skip questions that were not relevant to them.
Additionally, we added a "skip onboarding" button at the bottom of the screen for users who wanted to bypass the onboarding process altogether.
One of the biggest pieces of feedback from our user testing was that our onboarding process was too long, and this is specially important once people with ADHD tend to avoid long tasks.
We addressed this by implementing several changes, including:
Reducing the number of questions from 13 to 10
Displaying the number of the current question
Making the "skip" button more visible and allowing users to skip questions that were not relevant to them.
Additionally, we added a "skip onboarding" button at the bottom of the screen for users who wanted to bypass the onboarding process altogether.
Renaming the features
According to feedback from our users, 35% of them found our menu bar difficult to understand, especially the "rewards" and "tracking" sections. Therefore, we took their feedback into account and renamed these sections to make their functions more clear.
DESIGN SYSTEM
Applying visual requirements to create an accessible experience
Applying visual requirements to create an accessible experience
During our Desk Research we learned that, when it comes to visual design, the needs and challenges of individuals with neurological differences such as ADHD, Autism and even Dyslexia often overlap. Our goal was to create a minimalistic design with clear hierarchy and structure, plenty of white space, clear typography in big sizes, soothing colors but with high contrast, specially for important interactions (buttons and menus), and no distractions such as crazy animations and busy illustrations.
During our Desk Research we learned that, when it comes to visual design, the needs and challenges of individuals with neurological differences such as ADHD, Autism and even Dyslexia often overlap. Our goal was to create a minimalistic design with clear hierarchy and structure, plenty of white space, clear typography in big sizes, soothing colors but with high contrast, specially for important interactions (buttons and menus), and no distractions such as crazy animations and busy illustrations.
WCAG AAA
checked
WCAG AAA
checked
Our app's design strikes a perfect balance between calmness and energy, using purple as the primary color to create a versatile and soothing effect. Yellow is the secondary color, used in at least 75% of the illustrations, to create a visually appealing look and convey optimism. We used WebAIM as a tool to measure the contrast ratio of the colors for texts and buttons to meet WCAG AAA standards and ensure accessibility in our app.
For better accessibility, we use the font Lexend to improve legibility and minimize cognitive load. Models on pictures and videos of the app wear neutral colors to reduce visual distractions.
Our app's design strikes a perfect balance between calmness and energy, using purple as the primary color to create a versatile and soothing effect. Yellow is the secondary color, used in at least 75% of the illustrations, to create a visually appealing look and convey optimism. We used WebAIM as a tool to measure the contrast ratio of the colors for texts and buttons to meet WCAG AAA standards and ensure accessibility in our app.
For better accessibility, we use the font Lexend to improve legibility and minimize cognitive load. Models on pictures and videos of the app wear neutral colors to reduce visual distractions.
DESIGN SYSTEM
Applying visual requirements to create an accessible experience
During our Desk Research we learned that, when it comes to visual design, the needs and challenges of individuals with neurological differences such as ADHD, Autism and even Dyslexia often overlap. Our goal was to create a minimalistic design with clear hierarchy and structure, plenty of white space, clear typography in big sizes, soothing colors but with high contrast, specially for important interactions (buttons and menus), and no distractions such as crazy animations and busy illustrations.
WCAG AAA
checked
Our app's design strikes a perfect balance between calmness and energy, using purple as the primary color to create a versatile and soothing effect. Yellow is the secondary color, used in at least 75% of the illustrations, to create a visually appealing look and convey optimism. We used WebAIM as a tool to measure the contrast ratio of the colors for texts and buttons to meet WCAG AAA standards and ensure accessibility in our app.
For better accessibility, we use the font Lexend to improve legibility and minimize cognitive load. Models on pictures and videos of the app wear neutral colors to reduce visual distractions.
FINAL DESIGN
FINAL DESIGN
ONBOARDING | Pre-questions
ONBOARDING | Pre-questions
HOME PAGE
MAIN SCREENS
MAIN SCREENS
REWARD SYSTEM
REWARD SYSTEM
MUSIC CONNECTION
MUSIC CONNECTION
MUSIC CONNECTION
ACCESSIBILITY
ACCESSIBILITY
VISUAL AIDS
VISUAL AIDS
VISUAL AIDS
ACCESSIBILITY
BUTTON PRESSED
ACCESSIBILITY
BUTTON PRESSED
ACCESSIBILITY
BUTTON PRESSED
WRITTEN
INSTRUCTIONS
WRITTEN
INSTRUCTIONS
WRITTEN
INSTRUCTIONS
VERBAL INSTRUCTIONS
(Music connection is disabled in this case)
VERBAL INSTRUCTIONS
(Music connection is disabled in this case)
VERBAL INSTRUCTIONS
(Music connection is disabled in this case)
LEARNINGS &
NEXT STEPS
LEARNINGS & NEXT STEPS
SOME SUCCESS METRICS AND FEEDBACK
SOME SUCCESS METRICS AND FEEDBACK
In the user testing phase, our app MVP was approved by 85% of our interviewers, while 76% said that the app could help them to be motivated. The less appreciated aspect of the app was the Rewarding System, showing us that our next step with our app should focus on improving this feature. 15% of our interviewers didn’t find the app to be different from other fitness apps. The User Interface was perceived as “Clean, simple to use, easy to follow and not overwhelming”.
In the user testing phase, our app MVP was approved by 85% of our interviewers, while 76% said that the app could help them to be motivated. The less appreciated aspect of the app was the Rewarding System, showing us that our next step with our app should focus on improving this feature. 15% of our interviewers didn’t find the app to be different from other fitness apps. The User Interface was perceived as “Clean, simple to use, easy to follow and not overwhelming”.
NEXT STEPS FOR ROUFIT
NEXT STEPS FOR ROUFIT
Is important to remember that this project was created to be a MVP, and it could be improved in the long term.
Also, once this project was created for a short term design challenge, the budget and time constraints didn’t allow us to do a series of tasks to attest success with our app. If we had more time, we would:
Test the accessibility feature and iterate with feedback.
Add a “community” feature, allowing the user to build relationships with peers with similar sports interests and struggles, and have accountability partners, which showed in our research to be important, specially for people with ADHD.
Improve the Reward system, connecting people in the app and creating a rank to improve motivation
Apply success metrics to measure the overall impact of the app in the user’s life
Consider other Neurodisabilities besides Autism and ADHD for next features
Is important to remember that this project was created to be a MVP, and it could be improved in the long term.
Also, once this project was created for a short term design challenge, the budget and time constraints didn’t allow us to do a series of tasks to attest success with our app. If we had more time, we would:
Test the accessibility feature and iterate with feedback.
Add a “community” feature, allowing the user to build relationships with peers with similar sports interests and struggles, and have accountability partners, which showed in our research to be important, specially for people with ADHD.
Improve the Reward system, connecting people in the app and creating a rank to improve motivation
Apply success metrics to measure the overall impact of the app in the user’s life
Consider other Neurodisabilities besides Autism and ADHD for next features
WHAT I’VE LEARNED
WHAT I’VE LEARNED
Working on this project and design challenge was a a huge valuable learning experience that allowed me to collaborate with other designers and improve my skills. Working with accessibility in mind was particularly challenging but necessary, as it broadened my understanding of inclusive design and highlighted the importance of catering to a diverse range of users. Designing a user interface with neurodivergent people in mind was the extreme level of balancing usability and creativity, once for this group of people, plain interfaces can be read as too boring, while at the same time, they can get visually overwhelmed very easily.
After being part of this project, I would love to see more apps take neurodivergent individuals into account when designing, as it is crucial to ensure that everyone has equal access to technology and it’s positive impact. Overall, this project allowed me to grow both as a designer and as an advocate for inclusive design, making me better equipped to tackle future challenges in the field.
Working on this project and design challenge was a a huge valuable learning experience that allowed me to collaborate with other designers and improve my skills. Working with accessibility in mind was particularly challenging but necessary, as it broadened my understanding of inclusive design and highlighted the importance of catering to a diverse range of users. Designing a user interface with neurodivergent people in mind was the extreme level of balancing usability and creativity, once for this group of people, plain interfaces can be read as too boring, while at the same time, they can get visually overwhelmed very easily.
After being part of this project, I would love to see more apps take neurodivergent individuals into account when designing, as it is crucial to ensure that everyone has equal access to technology and it’s positive impact. Overall, this project allowed me to grow both as a designer and as an advocate for inclusive design, making me better equipped to tackle future challenges in the field.
If you liked this case study, have any questions or just want to talk about it, feel free to reach out to me:
taynamotaflores@gmail.com
Thank you!
Thank you!