Jaelin Lim
UX/UI for Jubilee - Responsive web app for fitness motivation
Case study
Jubilee was created to support the mental health and wellness of women through fitness. Exercise can be daunting, but with a bit of guidance, structure, and wide range of workouts Jubilee has a place for everyone no matter what their experience or time frame looks like.
Role:
UX/UI Designer
Timeframe:
August - December 2020
Project
The objective was to create UX and UI for a fitness app that would help motivate people into an exercise routine that suits their level, schedule, and interest.
A project brief was given to help outline the scope of the responsive web app. Basic user research was previously done prior to the start of the design.
ConText
Firstly, jumping into exercise can be overwhelming and daunting for many people. The aim of this responsive web app was to help people get into exercise by providing them with routine, interactive examples, and guided workouts regardless of users' experience levels. Secondly, consistency and routine is difficult. Jubilee is designed to encourage its users to commit to their wellness even if it's as little as 5 minutes a day.
Who
-
People who are new or returning to exercise. They want to find workouts they enjoy as well as guidance to either learn and/or help them keep up a routine.
What
-
A responsive web app so that users can search, view, and schedule interactive workouts and fitness challenges on any device.
When
-
The responsive web app can be used whenever users please. Users can schedule in workouts that best suit their availability.
Where
-
Now with more people having to stay at home, users can search and utilize the guided workouts even in their own living rooms or backyards.
Why
-
Health and wellness should be prioritized. Exercise provides many benefits not only physically but also mentally as well.
UI Design
As Jubilee is a responsive web app, it needed to be designed with simplicity and clarity for all to encourage users to get into exercise without feeling overwhelmed. Familiarity in icon usage were important so that different levels of tech-literacy could be accommodated. Colors were incorporated to contrast and emphasize against a clean and crisp primary white color to help with readability and accessibility. Images used throughout the design were carefully curated to promote exercise and wellness for all as users of Jubilee have a range of experience levels. Additionally, images used indicate that these interactive workouts can be done whether users were at home, outdoors, or at the gym. Not only were the images chosen to visualize the ranges of activities and environments, I wanted to also make sure that Jubilee was an inclusive space for people of all colors. Below are the type of images users will see throughout the application.
Personalization
Personalization was essential to meet the needs and goals of users with a wide range of experience levels in exercise. Jubilee not only helps to solve the problem of helping users prioritize health and wellness, but also helps them adjust the features to meet them where they are at when they begin.
Thus, the onboarding functionality allows for differentiation and helps curate exercises to achieve users' fitness goals whatever they may be. At the start of the interaction users can enter in their information, choose goals, workout environment, and difficulty level.
Additionally, to address the users' needs of committing to a routine in a busy schedule, Jubilee helps to schedule in workouts to a calendar so that the user can feel accountable to their goals.
" I love the thought of having something that could really work with my schedule. Being as busy as I am it's tough to exercise otherwise"
- Rebecca
User Persona
Iterations through Research
A project brief was given with some user research completed prior to the start of designing Jubilee. User goals/persona, feature requirements, and partial branding guidelines were laid as a foundation. However, with the quick timeframe of the design, I decided to do user research at earlier points through the process. From paper wireframes to high fidelity wireframes, adjustments to the design were made based on user research and feedback from peers.
From low to high fidelity wireframes, there were changes to the design based off analysis and user research conducted. In the low and mid fidelity wireframes, the search bar could be accessed on the home screen, but 80% of the usability testers stated that they would rather have a simplistic filtration view as there were more than 2 categories to filter through. Thus, prior to creating a high fidelity wireframe, adjustments were made to fit the needs of users while also ensuring that it still met the feature requirements that were given. The search icon was isolated and the filter system was designed to be emphasized on its own screen to help users focus on personalizing Jubilee to their needs.
Breakpoints & Final Mockups
With the flexibility of a responsive web application, users can access its functionality on all devices from mobile to laptop. This allows users to exercise from the comfort of their home with the desktop view or take Jubilee on the go on a tablet.
Describe your image
Describe your image
Describe your image
Describe your image
Outcome
Although Jubilee was a concept case study and has not yet been released as a viable product, usability testers overall were pleased with the idea on a women-centric health and wellness product. Especially during these times where many fitness facilities are closed and more people are resorting to alternative exercise methods, Jubilee provides an essential solution to people who want to start taking ownership over their mental and physical clarity.
As a result of this case study, I hope to do more usability testing to better adjust to user needs and goals. If I had more time, I would have liked to interview more users on their past experiences with other fitness applications as well. Finally, I was reminded to always put the user at the forefront of design and to confirm design decisions backed by research and data.
Click the logo below to view full prototype
