Wireframing is an essential part of the UX-UI process and this challenge consists of creating low and mid-fidelity wireframes to represent the flow of the selected user task and create a prototype in Figma.
For this challenge I have chose to work on the ClassPass App because I use it often and I find it very useful and exciting for people that love sports and want to explore new activities in their city. Instead of going to the same boring gym around the corner with ClassPass, users can subscribe to online and in-person fitness classes, such as yoga, pilates, barre, boxing in different sport centers or health clubs for the spa service.
I have chose to work on the user flow of booking a class in a fitness center. This is the most common task and the main goal of the application, so it is important to understand what actions are required to achieve the goal.
User Flow:
- User opens the app and can see the most popular gym centers on the Home page or he can click the search button.
- When opening search users can apply various filters, like to do the search by the distance, day or specific fitness category.
- After selecting preferred fitness center users can see the description of the place with all the data, like address and other users reviews.
- User than clicks on the schedule to view all the classes available by day and see how many credits will be taken from his account.
- After clicking on the selected class, the user will be taken to the reservation page and can book the selected class.
LO-FI Wireframes
The first step in the Wireframing process was to create sketches with pen and paper and identify all the important UI elements that can help to map the user flow.
MID-FI Wireframes
The second step was to create wireframes in Figma.
UI elements used:
- Text blocks
- Icons
- Buttons
- Navigation components
- Search fields
- Map
- Dropdown menu
- Calendar
Prototype
After creating the wireframes I have put a prototype that you can find in the link: https://www.figma.com/proto/ya2f5lHaIvAjK01bYhFKoE/wireframe?node-id=10%3A2&scaling=scale-down&page-id=0%3A1&starting-point-node-id=10%3A2
This challenge has helped me to get more familiar with different UI elements used in wireframes and think about what elements to use in order to construct a simple wireframe that doesn’t require so much time but is informative enough to show the user flow. The most challenging part was to create a prototype in Figma but it is a good learning experience and a starting point for more complicated prototypes in the future.
