IRON HACK — Challenge 2 Wireframing
For this challenge, we were ask to wireframe a flow of an app of our choice on Figma with the use of a provided wireframe kit. I chose to wireframe a flow on the app Treatwell.
Treatwell is a book salon appointment app. It connects clients an beauty salon and plan the appointments.
I chose to wireframe the app Treatwell because I find the UI quite minimalist and aesthetic. While the UI is simplistic, there is a lot of flow on the app. The process of finding a salon or book an appointment requires a lot of manipulation.
I focused on the flow of booking an appointment starting from the main page (it’s also possible to book an appointment from a salon you added in the “Favorites” page).
- The page 1) is the main page when you open the app. You can see the categories of services available on Treatwell (Hair, Hair removal, Hands&Feet, Face, Massages, Body)
- On the page 2) appears the Dropdown menu option to see the subservices available in each categories.
- On the page 3) You have the results of the salons available practicing the subservice you clicked on. They appear with default settings. You can refine the filters or change your search to refine the results.
- The page 4) is the selected salon’s page. You can see all their services and prices. That’s the page were you select for good the service you are going to book.
- When you select a service, the app will take you on page 5 to choose a specialist withing the salon. You can also pick a random specialist with the earliest availability.
- The page 6) is the last page before the payment page. You can see the dates and hours available and book your appointment.
Before wireframing on Figma I did a lo-fi wireframe. I realized that Treatwell UI is not too complicated and not filled with so many complicated elements. As I am struggling a little bit with using Figma (I am new to it) I thought that wireframing this app would be a perfect (not so difficult) app to wireframe.
Using Figma is still challenging for me but I understand better how it get involved in the process or creating/reworking on an app.
I find wire framing fun because you realize that everything, every app, every website can be reshaped to anything. An app, a website, any interface is not something frozen, it can be reworked and modified as much as the designer wants.