Wireframing Challenge: Treatwell App

Treatwell is an app that allows users to quickly and easily book hairdresser or beauty appointments. You can filter your search to find the best salons and treatments near you.

The task was to create a wireframe version of the user flow of an app of choice, based on screenshots or high-fidelity prototype screens of the app. The final product consists of a simple 5 screen’s interactive prototype built in Figma.

I chose the Treatwell app because I really like the simplicity of the user flow. It is a well structured and easy to understand app that is enjoyable for the user. My favorite feature is the search button on almost every page.

Flow

The flow I chose was to discover hairdressers near you. On the front page I clicked the image that said Hairdresser which opened up different hairstyle options. I then chose “Damenhaarschnitt” which showed me hairdressers for that specific choice. I clicked on the map to see where the hairdressers are located and then decided to check out the filters to specify my search based on my wants.

Wireframes

These are the wireframes I created for the flow above:

Prototype

if you’re interested in checking out the flow of the wireframe, click here for the prototype.

Key Learnings

I really enjoyed getting to know Figma and building wireframes using a wireframing kit. Creating the Prototpye in Figma and exploring it after was fun. I look forward to getting more familiar with figma in the future.