A  SIMPLIFIED FITNESS BOOKING SITE FOR BUSY PEOPLE

A SIMPLIFIED FITNESS BOOKING SITE FOR BUSY PEOPLE

MainCapstoneImageWellbeing.png

ABOUT THIS PROJECT

Our user needed a mobile centered booking site that would allow her to easily book fitness classes and get back to her busy life. My role was to identify user frustrations and needs in the booking process, and design to address these needs. The result was the wellbeing booking site.

SCOPE OF WORK

 
research copy.png

RESEARCH

Competitive Analysis
User Interviews

strategy.png

STRATEGY

User Persona
Empathy Map
User Flow

UX.png

UX DESIGN

Wireframes
Prototype
Usability Testing
Design Iteration

UI.png

UI DESIGN

Branding
Style Guide
Visual Design

SUMMARY

Many people who want to book fitness online are busy with life and family, and have limited time to get in a workout, let alone to take the time to navigate a complicated booking site. Having accountability can also be a concern, as it is sometimes tough to feel time for self care when there are so many competing life priorities.

Wellbeing was designed to address the concerns of busy people who know that fitness is important, but have a difficulty making time for self care. The site is kept simple to navigate. Attendance is celebrated on the top of the user’s page, and previously taken classes are shown at the top to allow for easy sign up. Toggling between dates and class types is also easy, and allows clear browsing on which classes might fit best for a particular day or need. The user can spend as little or as much time as needed looking for classes, and get on with the rest of all that life has to offer.

PROCESS

 
 
 
Research

Research

 

Research began with competitive analysis to see what the industry currently offered. Then, user interviews were conducted with people who book fitness online.

Some common pain points emerged from the research collected about previous experiences of booking fitness online. Users were frustrated at how complicated using a fitness booking site can be. The flow between the time selected and class list was often confusing, and hard to navigate back and forth. Showing classes that were full or not offered and that cluttered the list was also a common complaint. There was also the lack of personal accountability or follow up from providers. These users want to be held accountable. Every user has limited time, so there is no time for such frustrations.

I have limited time. Sometimes I will leave a booking site if it takes me too long to find a class I want.

There were commonalities on what was working with previous fitness booking experiences. Notifications and reminders of classes taken before was helpful. A simple automatic add to user calendar helped with giving the user fewer tasks to worry about. Also, only showing information that was relevant to the user was also appreciated by this group.

Some suggestions from users were to show classes that had been previously taken on user main page to easily sign up again for favorite classes. Also, showing class description within the search would simplify the process, and allow for less back and forth between pages. Lastly, keeping the sign up simple and straightforward would encourage users to move forward in using the site from the start.

 
AffinityMapIInterviewsWellbeing.png
 
 
 
 
 
 
 
STRATEGY

STRATEGY

From user interviews, a persona was created to capture the person the well being site is designed for. Her name is Tara and she is a busy mother who has little time for fitness, although she knows it is important. She wants a personalized experience and to be held accountable and be reminded of the classes that she has taken before. She needs a simple way to book her fitness, where she can get in and get out and get on with the rest of her life.

 
USERPERSONATARA.jpg
 

From user interviews, quotes helped to further understand what our user - Tara - says, hears, thinks, does and sees. This exercise further helped me understand her needs and to tailor the design to fit these needs and remove pain points from her experience of booking online fitness.

 
Empathy-Map-wellBeing.jpg
 

To address Tara’s needs with a fitness booking site, her process of booking was considered through a storyboard, and then finally through a user flow chart. Only from there, could I be assured that the steps were clear a simple and directed to her needs of creating the most direct way of booking fitness online.

 
WellBeingStoryboard.png
 
 
USERFLOWWELLBEING.png
 
 
 
 
 
 
 
UX.png

UX DESIGN

Informed by Tara’s needs and the user flow created from this, sketches were drawn for the mobile site to determine layout. From these sketches, responsive wireframes for mobile, tablet and desktop were created in Figma.

WellBeingSketches.png
 
WellBeingMobileWireframes.png
 
 
 
 
 
 
 
UI.png

UI DESIGN

For Wellbeing branding and UI, I started by researching visual trends in the fitness and wellness industries, keeping in mind Tara’s need for simple and clean, straightforward design that would easily lead her through the site to make booking easy. The colors from this research were bright and fun, encompassing the fun and freedom experienced when she takes the time for a break in her day for fitness. The style and colors were considered in expressing the freedom and empowerment through fitness, all the while keeping the focus that Wellbeing will help her accomplish her fitness goals, while keeping her life and family top priority. Wellbeing will be her place of fun, self care and recharge, so she can get back to life refreshed and renewed.

 
WellBeingBrandIdeas1.jpg
 
WellBeingStyleTile.png
WellBeingUI.png

The logo, style, color and branding were applied across the mobile design, and a prototype was created so that a user test could be conducted to make sure our user’s needs and pain points were being acknowledged and addressed. Below is the first iteration of the design that was presented to users for testing.

 
WellBeingRoundone.png
 

Users were recorded as they clicked through the booking site. From these recordings, notes were taken, and commonalities were found in what they felt was confusing and what they felt was working well. I found that creating an affinity map helped me to easily see the overlap in user needs. This gave me a clear path on what needed to be adjusted on the site. The most common complaint was confusion on the home page. There were too many options for entering the site, and users were unclear on whether they could proceed without signing up. Another common pain point was the ability to see the class listings while hovering over the desired day of classes. Users also expressed wanting to have previous classes listed on the user page as well as number of times visited as an additional incentive to keep coming back

 
Artboard 1@4x.png
 

A second iteration was made to the design based on the user testing feedback collected. To address the confusion on the home page of having too many ways to proceed into the site, all other buttons were removed except sign in and sign up. Also, on the user page, for finding classes, I added the ability to see the class listings while hovering over the desired day of classes. Finally, previous classes taken are listed on the user page as well as number of times visited to create the additional incentive to keep coming back. The color was also toned down a bit, to make the copy more easily readable through greater contrast with the background.

 
WellBeingRoundtwo.png
 
 
MainCapstoneImageWellbeing.png
 
 
 
 
 
 
 
 
 

REFLECTION

Through this project, I learned how very important user feedback and empathy is in design. User feedback was essential to this project, as most all content came from user feedback and ideas. Getting to know the user and finding out about her needs and frustrations gave a clear path of problems to address, leading to ways to make the user’s life better by making signing up for fitness simple and keeping this activity a part of the user’s life without creating additional work. Through Wellbeing, I hope Tara can stay motivated through accountability and being able to easily sign up for her next class.

 
 
 
 
MainSpotify.png

NEXT: PERSONALIZE SHARED MUSIC

Adding a feature to the Spotify to make the music sharing experience more personal.