Discovering the wireframing world

AndreaA
3 min readJun 16, 2021

This post was written for the Ironhack bootcamp / Wireframing challenge 2.

My friends love massages. I don’t (so far). But I love to make my friends happy and relaxed. Some of them are also massage specialists so they look for specific massages I don’t know nothing about. On many occasions, beacause I couldn't find a massage place that easily, I ended up giving my friends a gift card. By doing that it gives the impression that I don’t know my friends that much or I didn’t have the time to search for something really nice and special.

So this time, for my dear friend Sarah who is fond of californian massages, I decided to check if there is a super great place where to get the best message near his home, in London.

So I decided to download the Treatwell app which is available in several countries including the UK.

For the sake of this challenge I started by an inventory of the UI elements I see in the app.

In the home page, we can see that the logo treatwell is centered on the header of the app. No other element surrounds the logo. It gives a very clean look. For a beauty app, I find it very important. The color of the logo is also very energizing (orange). And the color palette is punchy: yellow, orange and blue.

There are 6 text fields avilable that turns out to be an accordion. In each one, there is an icon that helps me to identify which one is the one I am looking for. The text is a key word : Hair, Nails, Face, etc.

Treatwell app home page and color palette

The navigation is on the bottom of the page with only three entries : Explore (with a short logo), My Favourites and My Bookings.

The search bar is placed right beneath the logo.

There is no advanced menu with your settings for example. You have to go to My Bookings in order to find the settings icon.

As the goal is to find the best Californian massage for my friend who lives in East London, here are the tasks that I will accomplish.

The steps fot achieving my goal were :

  1. Download the app
  2. Access the app
  3. Search for a Californian massage in East London
  4. And search for the best rated massage.

The user flow I chose is meant to give me a precise idea of what would be the best option for my friend. I didn’t want to create an account (but it is possible).

User flow lo-fi wireframes

The next step was transforming my lo-fi wireframes in mid-fidelity wireframes with Figma. Big challenge for me! In my previous job, I was used to discuss with the designers about the improvements I was envisaging for an app or a website. Now, I am the designer and it’s very exciting and challenging. I am happy that I have so much to learn during the bootcamp.

You can check my very first prototype here : access Figma prototype

What I noticed doing this challenge is that, as user, you don’t imagine how much work and talented people you need to build an app and create a great user experience. And I bet that everyone who is creating an app want it to be the best. But my feeling is that best doesn’t really exists. Progress does. If you can listen to the the pain points of your users, you will be able to improve your app constantly and progress will lead to success.

--

--