Locker Room
Fitness App redesign
Client:
Self project
Platform:
Mobile
Deliverables:
UX, UI, Research
Tools:
XD, Photoshop
The context
The ‘Locker Room’ is a fitness studio based in Tel-Aviv that offers a wide range of workouts and sports activities in different locations around the city. The ‘Locker Room' uses an App where members can view the workout schedule and sign in to workouts.
As a regular user of the App and from a designer's perspective, I always felt that the app fell short in terms of functionality and appearance. So I decided to redesign it.
The problem
-
The navigation in the App is indirect
-
The user can't browse the schedule by workout
-
The user doesn't receive feedback about his workout progress.
-
Lack of motivation element
-
There is no information available about the workouts
-
Confusing text alignment due to a mix of languages
-
There is no consistency in design elements
-
The information hierarchy is not clear
User research
I conducted 12 interviews with different users to learn about their motivation and preferences regarding workouts, schedules, and locations. I also wanted to know more about their behavior when using the app and what choices do they make. I also gathered information from the studio's Facebook page.
The Users
Members:
+2000
Age groups:
20-26 (22%) l 26-32 (46%)
32-38 (24%) l 38-42 (8%)
Gender:
Female 64% l Male 36%
User profiles
Intermediate user
Doesn't work out much. Very busy or little motivation. Try only a couple of workout types. Usually attending the same studio. Prefers to workout with a friend.
Diverse user
Workout regularly. Trying different workouts in different studios. They like hanging around and socialize with other members.
Systematic user
Very motivated. Works out a lot but only specific workouts. Has a routine workout schedule. Workout in a couple of studios. Close contact with the trainer.
User personas
Dana Atias
Age: 28
Gender: Female
Profile: Intermediate
Workout types: 2-3
Workouts per week: 1-2
Location: Different
Time: Mostly mornings
Motivation:
Chooses workout based on location. Studio near home.
I would like to have:
Less crowded workouts.
Naama Semel
Age: 24
Gender: Female
Profile: Diverse
Workout types: 3-4
Workouts per week: 2-3
Location: All
Time: Mornings/ Evenings
Motivation:
Choosing a workout based on workout type. It doesn't matter where it is.
I would like to have:
Option to search for workouts.
Doron Rezner
Age: 32
Gender: Male
Profile: Systematic
Workout types: 1-2
Workouts per week: 3-4
Location: Same
Time: Evenings
Motivation:
Choosing a workout from the favourite list.
I would like to have:
Feedback on my workout progress.
The current App
Sign in
-
Minimal design
-
The logo is a bit small
-
The button text has low contrast
-
The icon in the left corner looks like a button but has no functionality
Home screen
-
Minimal and inconsistent design
-
Too many different elements with no hierarchy
Top menu
-
Location button opens Waze maps but doesn't show any locations
-
The contact button opens a phone number which you can dial
-
Alerts button doesn't show if you have notifications
-
I can see my name and the locker room in Hebrew for some reason
-
The logo is very small, almost unreadable
Left column
-
A list of studios by street name
-
Each button opens a schedule of the studio as seen hereunder
Right column
-
A list of different functions. Some of them not used very often.
-
The full schedule shows you all the workouts in all the studios. Not very useful. According to the interviews it's not used much
-
Feedback is highlighted in pink and cap letters. why?
-
Freese account is not used often. Should it be on the home screen?
-
The info button opens a user information menu. Not the right place/ name
Bottom menu
-
It is highlighted in color for no reason.
-
The button from the sign-in screen, now opens a settings menu
-
My classes text refers to the button on the right which opens the favourite workouts page.
Studio screen (schedule)
Top bar
-
English text is aligned right (to the edge) and Hebrew text is aligned left
Tabs menu
-
In the tabs menu, the user can toggle between different schedules criteria. The default is by week.
Calendar
-
The user can toggle between schedules by day of the week.
-
There is no indication of the current date
Schedule
-
The lack of hierarchy and spacing in the text makes it cluttered and difficult to scan
Workouts screen (schedule)
-
When toggling to the workouts schedule a list of workouts appears but it's not possible to click it to view the schedule.
-
Also here there is a mix of text types.
-
One icon is missing.
Trainers screen (schedule)
-
It doesn't mention the workouts for each trainer
-
It doesn't show who the trainer is
-
The list is not updated
-
English text is aligned right. Cap letters
-
The circle's purpose is not clear
-
The arrow buttons are in the same direction as the back button at the top, this is confusing
Workout screen
-
When selecting a workout to register this screen shows up which shows four times the name of the workout
-
The purpose of the screen is unclear
-
The user needs to join the workout for the second time
Redesigning the App
Wireframes
Home screen (studios)
As most of the users search for a workout by studio location, I made it to the home screen. I removed all the other elements and rearranged it so it will be more clear and easier to navigate.
Top bar (fixed)
-
I moved the account button to the top with a noticeable icon
-
I added the alerts button a number of new/ unread notifications
-
I centered the logo and made it more noticeable
-
I placed the secondary elements to a menu button
Secondary Bar (fixed)
-
A page title
-
Day and date
Body
-
Studios list with the studio's picture
-
You can click on the studio bar to see more information or click the schedule button to see the studio's schedule
Navigation Bar (fixed)
-
I moved the tabs from the schedule screen to the main screen so it will be easier to navigate between the different schedules.
-
I added the option to browse the schedule by workout
-
I added a statistics screen
Workouts screen
A lot of users search for a workout by type. Instead of browsing the different studios, searching for their workout, I made a list with all the workouts
Body
-
Workouts list with the workout picture
-
You can click on the workout to see more information or click the schedule button to see the workout's schedule
Workout screen
When clicking on a workout the user can see information about the workout such as difficulty, training elements, locations, trainers, etc
Schedule screen (studios/ workouts)
When clicking on the schedule button the user sees the schedule list
Secondary Bar (fixed)
-
Studio/ workout name
-
Day and date corresponding to the calendar bar
Calendar Bar
-
The user can toggle between the days to view the schedule
-
The selected date is highlighted and appears in the bar above
Body
-
A list of the workouts of the selected studio
-
I rearranged the schedule information and made the hierarchy more clear
-
I added the number of members that have signed to the workout
Confirmation screen
When signing in to a workout, a confirmation screen appears with workout details. I redesigned the information hierarchy.
Status screen
Some users mentioned that they would like to know more about their workout progress to improve their motivation. I designed a status screen that shows the user's workout statistics.
I also a gamification element by using levels. The user is motivated to workout and progress by achieving the levels.
