Ironhack’s Prework : Dahyun FIDEL -Challenge 2 : Wireframing

My second challenge as Ironhacker is to ‘reverse engineer’ a popular application Interaction Design and User Flow : build wireframe prototype, based on an existing app already designed. The aim of the exercise is to simplify an interface into a wireframe state, removing the design, colors and texts (except those necessary for the user flow).

For this challenge, I decided work on Treatwell.

Treatwell is the largest hair and beauty services booking platform in Europe 💇🏻‍♀️🧖🏼‍♀️💅🏻

The app enables people to quickly find a hairdresser / beautician and make a booking in few clicks. The users can consult prices and rating, book an appointment and pay online.

Image for post
Image for post
www.treatwell.com

I chose to work on this service for several reasons :

  • I found the interfaces adapted for the challenge which consists in simplifying in wireframes. The screens contain images, texts, colors and different UI elements (buttons, toggles, test fields, slider, icons, image…). I’m excited to ‘reverse engineer’ and black-and-white all the designs 💪
  • I identified a perfect task for the exercise : short within 6 steps but with various screens.
  • The app is very intuitive and user friendly. The interfaces are very easy to understand and use. I think it is a good exercise to analyze one of the best practices in UX/UI.

Hereunder the lo-fi user flow that I draw for the task “Consult a Top Rated Hairdresser, with a note at least 4/5” ⭐️⭐️⭐️⭐️.

Image for post
Image for post
  1. In the homepage, different categories are listed. The user clicks on category “Hairdressing”.
  2. The subcategories are displayed. The user clicks on “Woman haircut” 💇🏻‍♀️
  3. The user is redirected to a result list. As to refine the choice, the user clicks on “sort by price, ratings …”
  4. Sorting and filtering options are displayed. The user chooses 4 stars for the minimum ratings, and he activates the toggle “only Top rated”, then clicks on “Validate”.
  5. The result list is updated with the selected filters. The user scrolls down and clicks on “Maison de beauté Viorica Milhaila”.
  6. The hairdresser page is displayed.
Image for post
Image for post
Image for post
Image for post

This was my first wireframe prototype in Figma ! This was a good exercise to learn how to use the tool and to understand some new features I did not use yet (fix position when scrolling, create components, create interactions …).

It also was a good training to create a simple prototype : to force to keep only the minimum of elements. I think this was the most complicated task during the challenge : what texts to insert in the wireframe, and what other texts to replace by simple lines ? What icons to keep designed and what other icons to replace by simple rectangle ? I often was tempted by the desire of drawing details, and this was a good training to ask the good questions and restrict the prototype to the minimum required.

The other difficulty of this challenge was to find the right balance between simplifying and making the prototype understandable. While creating wireframe we understand how colors, text sizes, design can be important to make an interface intuitive and understandable. It was very interesting to try to find a good way to make the wireframe efficient without using design elements.

Thank you for reading 🙂

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store