Wireframing
Challenge 2
Round 2
This time we were asked to do a ‘reverse engineer’ on an app, they give a couple of suggestions and I decided to work with one that was unfamiliar for me, probably because I haven’t cut my hair in a couple of years, besides the occasional visit to my aunt (thanks aunty). So, I downloaded TREATWELL and try it for the first time.
“Treatwell is the best way to book hair and beauty online. Find salons in your area, read reviews, book (rebook and reschedule)… it’s quick and easy”, they say in their description and I can not agree more.
To analyze the flow, first, I look at it from the user point of view trying to avoid any knowledge on UI or design and I was very pleased because I successfully book an appointment in less than five minutes with seven easy steps that it looks like this.
The path is easy and organic,
- Choose a treatment category, Ladies haircut, men’s haircut, nails, etc plus some extra subcategories
- Filter trough the best salons in your selected area
- Select a salon, you can read reviews, choose one or more treatments, check prices, location, and other details
- Next, there’s a list of the stylists, once you choose one you’ll go to the calendar
- Book the day and time of your preference
- Fill in your personal data, and you are ready to go
But for me, now is time to analyze that path from the UI perspective, I need to get to the bones aka create the wireframes.
I had a lot of fun, but I also was frustrated for moments, what was more challenging was to decide which elements were indispensable and which ones had to be replaced to avoid distractions.
Eventually, I got to the core, clean all the distractions and it looks like this
Prototyping
As I said is a very organic path, easy to use, and very intuitive
If you found your happy path, clap your hands.
