PROJECT INFO
This was my technical task for a junior product designer role
BRIEF
Create 3 UI screens for a Personal fitness instructor finder
PLATFORM
iOS/ Android mobile
TOOLS
Figma
ROLE
UX/ UI DESIGNER
TIMELINE
1 week
User Research
To understand the users I’m designing for, and their needs, I tried to find out as much as I can about fitness instructors, gym apps and potential users through articles, Youtube etc.
Findings
I have discovered that many target users treat gym apps as an easy and quick way to manage their needs. However, many apps are overwhelmed with extra features and confusing to navigate which frustrated many of the target users.
Design
After I’ve explored multiple design ideas generated from the research insights through ideation and paper wireframes, with the client and users needs in mind I have prioritised some of the ideas.
My primary goal was to simplify navigation and help the user to find a fitness instructor in 3 simple screens:
1. Find fitness instructor search
Based on my research I found that during Covid a lot of people started to train virtually, therefore I’ve provided two tabs to choose upfront “in person” or “virtual “. Time, date and the price functionality are provided to help the user narrow down the search.

2. Results and popular instructors
Easy way for browsing results - instructors are shown in simple cards with useful information: Name, Rating and Price.

On top of the results is a quick access section with popular instructors.

 Interaction is simple, user can scroll on page and the label above shows how many results are found.

 Users can tap on Details CTA to view more about instructors.
3. Instructor detail and book
Instructor detail is shown into a Modal with animation - very easy to dismiss and go back to Results page.

On this screen users can view more details, Languages, About section or any Qualifications.

 Book your instructor CTA is prominent and easy to access.
Library
I have created a library too easily make changes across all screens. I used 6 sizes and four weights to create font styles. I have defined my colour palette adding base and secondary colours.
See the animated prototype below
The icons and the illustrations I used are from Flaticon
The photos I used are from Unsplash
↑Back to Top