Sweaty Betty

Brief
Create a concept fitness tracker mobile application for retail store, Sweaty Betty.

Challenge
The app should allow users of the app to track issues related to their health, book participation in community events (such as guest instructor nights), and purchase products

Client
Concept project for Sweaty Betty at General Assembly, London 2017

Solution
A fitness tracker app that allows users to track fitness progress, see in-depth class overviews, book classes and access the Sweaty Betty clothing range. Clear global navigation is displayed throughout with large call to action buttons in addition to more detailed class information such as potential calories burned and instructor bios. The class booking system also includes a feature that automatically adds classes to the user's calendar.

Duration
2 weeks

My Role
UX Designer – Group project with Anjali D’Souza and Victoria Klotz. Personal responsibilities included:
User interviews | Affinity mapping | Design studio sketching | Wireframing | User testing | Iterations | Creating prototype screens based on Victoria’s UI designs | Design of presentation slide templates

Tools
Marvel | Invision | Sketch | Omnigraffle | Sharpies | Paper | Trello Kanban board | Google Drive

Methodologies Used
Business analysis | Competitive analysis | Comparative analysis | User research | Personas | User stories and journeys | Rough sketches | User flows and scenarios | Wireframes and sketches | Clickable prototype | Usability testing and results | Scrum

Team
Victoria Klotz, Anjali D' Souza and myself

The Project

In teams, we were to design a mobile app for our fictional client Sweaty Betty over a two week sprint. My team mates were Anjali, a former textile designer from South London and Victoria, a graphic designer from New York.

Sweaty Betty, a British retailer specialising in luxury fitness apparel for women had been redefining the way women dress for fitness since 1998. Our brief was to design a mobile application that could help their customers reach health and fitness goals by providing them with a health tracker. The app would need to also allow customers to book themselves a place on one of Sweaty Betty’s many free in-store fitness events as well as purchase items from the Sweaty Betty range.

We started the project by sitting down as a team and discussing ground rules, modes of communication, strengths and weaknesses, putting together a project summary and setting up a Kanban board on Trello, to ensure we would stay on top of the project during the two week sprint.

Competitive Analysis

On visiting Sweaty Betty’s Shoreditch branch, we noticed that the store was stylish with a chic industrial feel, fitting in with the local area. This store also had a personal training studio and hosted nightly classes on the shop floor. When discussing the classes with staff members, it was clear just how knowledgeable and enthusiastic they were about the classes, indicating that the classes were very much an integral part of the Sweaty Betty brand and lifestyle. We decided to look at their local competitors, Lululemon and Frame. 

Key Findings During the Analysis of Competitors Lululemon and Frame

• Both provided classes

• Both sold stylish fitness wear

• Lululemon promoted a healthy lifestyle with a juice bar and displayed an itinerary of the fitness activities hosted at the store, such as free running clubs and yoga classes

• Frame also promoted healthier lifestyles, and charged for Pilates classes, community events and a juice bar and healthy cafe. Providing an alternative space to a traditional gym.

Fitness App Competitive Analysis

We also compared three fitness apps, Apple Health, MyFitnessPal and Nike Training Club.

• Apple Health was very visual with graphs allowing you to quickly see your output, set goals and monitor your progress

• MyFitnessPal had many features including the ability to sync with external fitness devices. The apps UI was busy, but the plus button on the global navigation allowed users the ability to quickly input stats such as food, water intake, nutrition, weight and exercise

• Nike Training Club did not allow users to track health, but provided personalised training plans based on the user’s needs, with over 100 instructional workout videos created by Nike trainers

User Interviews

After screening users through a survey posted on social networks and Slack channels. We conducted 13 user interviews with our key user groups, the mid twenty to mid-forties range who work out one to five times a week, to get a feel for their motivations and attitude towards health and fitness. Some of the topics explored in interviews were:

• Motivations for exercise

• Frequency of exercise

• Current metrics used to gauge fitness levels

• Devises used 

• Experiences of booking classes and fitness apps
   

Affinity Mapping

We took our thirteen interview transcripts and created an affinity map. The four key themes we discovered were:
 

1. Things that get in the way of a healthy lifestyle

• Monotonous data inputting such as the need to add each ingredient of a home cooked meal into a calorie tracker

• Apps not tracking the type of fitness relevant to the user, such as yoga or pilates, or running on a treadmill while using an app that only tracks outdoor running
   

2. The two attitudes towards fitness and health

• Users who exercised the longevity, health and wellbeing and/or the release of endorphins and energy that came from working out

• Users who exercised to achieve a certain physical appearance regardless of how this might affect their health
   

3. 100% of users tracked their health. Methods included:

• Noticing how their clothes fit

• Weighing themselves

• Keeping a food diary

• Checking goals and data on a fitness device several times a day
   

4. Pattern of frustration surrounding the booking of classes

• Waiting on hold while having to contact the gym directly by phone

• Booking sites having too many screens to click through to book just one class

• More spontaneous class goers were frustrated at being unable to see whether classes had spaces left, assuming that if you didn’t book in advance, there wouldn’t be any space left

The Solution

Based on our research. We wanted to create an app that was:

• Easy to use

• Required very little participation on the user to input data and keep track

Design Principles

Simple - Simple booking and tracking process without the tedious data inputting.
Personal - Tailored functions to the user’s interests and preferences.
Companionship - A non threatening companion to guide you through your journey to health and wellbeing.

Design Challenges

• Clear and easy to use booking system allowing users to see availability and class timetable

• Allow users to track their calories in a less time consuming way, with less data inputting

• Allow users to track progress in different types of sports, such as indoor running and yoga

Personas

Based on our interviews, we constructed two personas Sophie and Jenny.

• Sophie was focused on incorporating fitness and nutrition for the benefit of her overall wellbeing

• Jenny was fitness and goal orientated, loved the occasional binge and would lose focus when she has nothing to work towards.

• Both encountered frustrations with apps and inputting data.

The Design Studio

During our design studio we sketched our ideas and had several rounds of critique and iterations, before finishing up with three refined versions of some of our best ideas. We then created a user flow and wireframe based on our main user journey:

'Sophie would like to book Thursday’s Sweaty Betty Pilates class in Soho or Selfridges and track her calories immediately after her workout’

Wireflow

Prototypes & User Testing

Paper Prototype Iterations

Our initial paper prototype was created with Marvel and tested with four users. The following iterations were made based on these tests:

• In the location drop down menu for store locations, users did not relate to the drop down title ‘current’ (which we chose to represent the user's current location on the location drop down menu) This was changed to ‘Studios’

• Users were hesitant about the map view being a primary studio locating tool, preferring a list view for store locations. In later iterations users would be brought through to a list, with a map view as a secondary option

• The class ‘BOOK’ button would change to ‘BOOKED’ once pressed to indicate the user had booked the class. We wanted the user to simply click for a second time to unbook the class, but this was not clear. We changed the activated button to ‘UNBOOK’ which users then understood to be a way to cancel a class

Low Fidelity Prototype

On completing user tests with our paper prototype. We compared the lo-fidelity screens against the User Flow to ensure it matched the actions the user would take, and would use this as a template when designing our mid fidelity prototypes.

Mid Fidelity Prototype Iterations

Book a Class Page Iterations

• Buttons were enlarged to be more prominent throughout the app

• Class information was left aligned to be clearer to the user

• Additional class details could be viewed under ‘more’ within the class drop down about the type of class, the instructor’s bio and any terms and conditions or cancellation policies

• A notification was added to alert and confirm to the user that a selection had been made when the booked button was pressed, notifying that the class would be added to their calendar

Studio Dropdown Iterations

• Studios would be displayed in a single file list to be clearer for the user to scan through

• Selected studios would remain displayed at the top of the page while further selections were made

Tracker Page Iterations

• Users didn’t understand what the various stats were telling them at first glance. These were later clearly labelled Calories Burnt, Classes Attended and Steps

• Units were also included in the graph

• Users wanted to understand how much of their goal they were achieving against their target, so we incorporated this into the Step Tracker

Home Screen Iterations

• Original homepage had three options, Shop, Tracker, Book a class. Once these items were consistently available in the global navigation, we did not feel the buttons on the homepage were necessary

• New homepage provided information in a diary format of upcoming booked classes, calorie goals and steps

• The user could reach any part of the app from the global navigation menu displayed on the home page

Global Navigation Iterations

• Icons and titles of the global navigation options were selected using a card sorting exercise

• Global navigation bar displayed across every screen

• Current page highlighted in the global navigation bar allowing user to know where they were in the app

• Option to view past classes added from user feedback

• ‘My schedule’ option in the global navigation reworded to ‘bookings’ to match user’s own descriptions of the option

• Home page added to global navigation

• The ‘more’ option used to sync devices etc, was removed from global navigation and repositioned to the top right corner of the screen, icon also changed to a cog

Style Guides

Sweaty Betty’s website was very minimal and we were unable to find a style guide for them online. Inspiration came from colours taken directly from their current fitness range collection and décor from the store, so our colour palette was mainly black and white with an accent of a bright orange as seen in their logo. We used this throughout our designs. Victoria Klotz, a seasoned graphic designer designed two colour options for our high fidelity screens using the colour palette and mid-fidelity frames we had created. We determined that the darker version on the left was too masculine and did not fit the brand. The orange designs seen on the right were made into a template that we could begin to build multiple screens from.

Final Design

With our final app design for Sweaty Betty, users can now track fitness progress, see in-depth class overviews and book classes at any Sweaty Betty studio. Clear global navigation is displayed consistently throughout the app with large call to action buttons in addition to detailed class information such as potential calories burned, spaces left in the class and instructor bios. The class booking system also includes a feature that automatically adds classes to the user's calendar, and past classes can also be viewed.

Next Steps

Additional options we would have liked to explore, had we had more time on the project.

• The ability to pay for exclusive workouts at Sweaty Betty stores, such as celebrity trainers

• To include workout guides to help users work out at home