References

• https://www.flaticon.com/free-icon/fitness_4729328
• https://www.athleticoutcomes.com/blog/types-of-workout-classes
• https://www.verywellfit.com/first-kickboxing-class-5215869

Content, Users, Context of use

• Content: Y-Fitness gym app, can be used to view classes, search for classes, and book classes.
• Users: People who want to join or look for classes to join.
• Context of Use: When users want to look for classes to book. When users want to cancel a class they booked. When users want to check their classes for a day.

Inspirations

Sitemap

1.0 Homepage

2.0 Programs

3.0 My Classes

4.0 Booking/Cancellation

2.1 Browse popular programs

2.3 Filter by date

2.2 Search for Programs

3.1 See my classes

3.2 Cancel Classes

4.1 See my booked classes

4.2 Check a specific date for classes

2.4 Book classes

4.3 Book classes

Sketches of wireframes

Home page

Programs page

My Classes page

Sketches of wireframes

Schedule page

Book Classes page

Main booking page

Justification of design choices

• I used the gestalt principle of Proximity by making the classes under the “Programs” page and their details be closer together to show that they are related.
• I used the gestalt principle of “Figure-ground” by making the button a brighter colour compared to the background to ensure that the buttons always stand out from the background so that it is clearer for the user to see it.
• I used the gestalt principle of “Continuation” by making the classes in a path going down, so that the user will follow the path and pause on the prominent graphics.

Justification of design choices

• I used Fitt’s law by making the buttons related to a function closer to it, e.g. the cancel button in the “My Classes” page is close to the class.
• I used Hick’s law by only including the necessary information and one choice in the booking process. The user only needs to decide whether to book a class or not, thus reducing the time taken

​

Figma wireframe – URL

• https://www.figma.com/design/8JjXtRhOKkBLtGEBEpssqF/T383-CA1-FigmaPrototypes-24019836?node-id=172-84&t=8bKiYFpteePwrXjQ-1

Figma wireframe – screenshots

Wireflow - Filter

Wireflow – Cancelling classes

Wireflow – Booking

Wireflow – Booking

Figma mock-up – URL

• https://www.figma.com/design/8JjXtRhOKkBLtGEBEpssqF/T383-CA1-FigmaPrototypes-24019836?node-id=175-525&t=8bKiYFpteePwrXjQ-1

Figma mock-up – screenshots

Figma mock-up – screenshots

Design patterns

• Dashboard in the “Home” page
• Grids of equal in the “Programs” page
• Navigation tabs at the bottom of the screen
• Search filters in the “Programs”page

Figma interactive prototype – URL

• https://www.figma.com/design/8JjXtRhOKkBLtGEBEpssqF/T383-CA1-FigmaPrototypes-24019836?node-id=1-2&t=8bKiYFpteePwrXjQ-1

​

• Prototype link: https://www.figma.com/proto/8JjXtRhOKkBLtGEBEpssqF/T383-CA1-FigmaPrototypes-24019836?node-id=1-2&t=envhlaV7UzkaZvg8-1

UX interactions

• When the user clicks on “cancel” button to cancel a task, there is a popup asking them to confirm the decision. This helps to prevent accidental mistakes like cancelling classes.
• When the user clicks on the “filter” button, an overlay menu will appear, this helps to give feedback to the user and it helps to show them how to use the filter function.

UI style guide