UX Design Project
This was a concept brief to develop a social app based around individuals or groups that want to meet up to work out. The client was Sweaty Betty, a British retailer specialising in women’s activewear with the aim to inspire women to find empowerment through fitness.
- allows users to book a class or activity
- find other users interested in similar activities and arrange to meet up
- have clear instructions of where to go and how to get there
Team & Role
Working collaboratively as a team of 3, we divided up the tasks to play on our strengths. I worked mainly on user research and on the creation of paper sketches and low-mid fidelity prototypes.
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 weeks sprint.
With this in mind we set about understanding more about Sweaty Betty’s competitor environment as well as user perceptions of fitness.
Our research strategy focused on:
- Contextual Inquiry — understanding the context
- Competitors — understanding the competitor market
- Users — understanding users’ motivations, needs and frustrations.
To gain an understanding of the brand we began with a review of their website and visited their store on Redchurch Street.
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 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— Both provided classes and what we found out is that:
- 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.
We also compared three fitness apps, Freeletics, Class Finder and Nike Training Club.
This told us:
- few competitors offered an ‘Activities filter’ element as part of their current customer offering
- most competitors were not focused on the fitness community
- most competitors don’t use social media to share events and activities.
Understanding the users
With our competitor research in hand, we turned our minds to users.
To distinguish participants for our user interviews we began with a screener survey distributed on social media and we received 26 responses.
- 52% like both solo and group workout
- 92% interested in using an app to find fitness or sports class in their community
- 60% have been to the gym or played sports in the past month.
After screening users, we conducted 10 user interviews each lasting 20–30 minutes with our key user groups 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 solo or in group
- frequency of exercise
- devices used
- experiences of booking classes and fitness apps.
‘I always feel really motivated when I work out in groups’
‘I’m new to London, I don’t know where to find cheap classes’
After completing the interviews we wrote down all of the insights on post-it notes and began to cluster them based on themes, relationships and patterns to create an affinity map.
We discovered that:
- the 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.
- users were comfortable with using technology to track their health
- users preferred smaller curated events — which are local / community spirited.
- the social aspect of exercising was important.
Moving into design studio we chose Sarah, a fictional representation of our typical user combining our user research findings.
Sarah is 31 and works full time in London. She enjoys regular workouts, meeting new people and loves working out with a friend.
To understand more about Sarah, we created an empathy map. This maps out Sarah’s thoughts and emotions while trying to book a class. This helped us understand where we could focus our work to reflect her needs. A key message here is that Sarah is really motivated to go to the gym but struggles with time, distance and money.
Sarah’s pain points are:
- finding a cheap yoga class nearby
- not having a social platform to keep in touch between classes.
We mapped out the emotions of Sarah’s current journey, including each task involved. We found that during Sarah’s journey to reach her goal she went through a mix of emotions which ultimately ended in her feeling average but not amazing.
Defining the Problem
To summarise Sarah’s pain points, we developed a problem statement — a clear description of the issue incorporating a vision and methods to solve the problem:
Sarah needs a way to find affordable quality group classes in her community because she wants to save time and money.
We followed this up with some How Might We statements as actionable positive questions to launch our upcoming ideation:
How might We:
- give Sarah the sense of community when she books a class?
- help her to find inexpensive classes near her work or home?
- reassure Sarah that the class is going to be a good quality?
We wanted to create an app to:
- find nearby free classes
- share experience with other people interested in similar activities and arrange to meet up
- real time communication between users in the app
- have clear instructions of where to go and how to get there.
The Design Studio
We held a design studio to explore concepts for the app. 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.
With a list of seventeen features we mapped them in a quadrant against essential / nice to have and high / low effort to produce. We settled on producing six features in the top two quadrants for our MVP.
We created a user flow to imagine the ways a user might navigate through the app.
We wanted to visualise the structure of the app so we created the app map to ensure that the information was organised in a way that was intuitive to our users.
Paper Prototype & Wireflow
We sketched a paper prototype and tested with 15 users, with a scenario to book a yoga class near you with two tasks.
Task 1: Find a yoga class near you and find more information about the class.
Task 2: Book the class.
Through user testing of the paper prototype we noticed that:
- the map view was not ideal for users to identify which studio they wanted to attend. Instead, we opted for a list of studios
- users got confused in the homepage with three options and they preferred to see a feed with all options Sweaty Betty offers
- they found the calendar confusing.
Lo-mid Fidelity Prototype
On completing user tests with our paper prototype, we compared the lo-mid 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.
Over four days we undertook 18 usability tests over three iterations of the prototype. The testing pool was comprised of people aged 22–45. All tests were done in person.
‘Booking confirmation page feels like the end of the process but I would like to have the option to keep browsing/booking’
From mid fidelity to hi fidelity prototypes:
- original homepage had three options, books, events, community. We did not feel the buttons on the homepage were necessary
- the user could reach any part of the app from the global navigation menu displayed on the home page
Using colours and aesthetic from the Sweaty Betty website, we came up with a simple style guide in order to move forward with our high-fidelity screens making use of Sweaty Betty’s prominent orange colour throughout our designs. For inspiration, we created a mood board which conveyed these feelings.
We also created a brand positioning quadrant to see where the Sweaty Betty brand fits in. This was based on our competitive research and also brand research to support that.
With our final app design for Sweaty Betty, users can now book classes at any Sweaty Betty studio, share similar activities with other people and communicate with them in real time.
We wanted to design an app accessible to everyone so we included the wireframe dedicated to Inclusivity. Users can let Sweaty Betty know in case of injuries and colour blindness.
Additional options we would have liked to explore:
- Continue testing
- Look into developing the community page
- Develop workout tracker.
Lastly, feedback is welcomed. Thanks for reading :)