Treatwell - Bring services where customers need — UX Case Study
This quick 4 days project was a challenge to create a new feature on a current app. For this third challenge part of Ironhack — UX/UI Design bootcamp, I chose to add a very cool feature for Treatwell an application for finding beauty treatments.
Research
To start this process, I made a Business Research, analyzing 7different apps, direct and indirect competitors with Treatwell, identifying opportunities and common points.
From that, I could found great insights and organize ideas in order to identify the "Job to be done". Based on the perspective of Treatwell users I could define two scenarios, the first one as a client and the second as a professional:
Client
When I cut my hair
I want to receive the professional in my house
So I can stay at home
Professional
When I’m looking for a client
I want to offer a home care service
So I can work on my own.
My problem was Treatwell doesn't offer a home service for their clients, they have to go to the salon, but clients want a beauty service on home, work, hotel, etc.
My solution for that was to create a new feature that could connect Clients and Professionals. I developed a User Flow adding new steps for the new functionality fitting it on the current flow of Treatwell app.
Low Fidelity Prototype
Starting the Ideation phase on the designing thinking process, I created the first visualization for the User Flow in a format of a paper prototype.
I tested with a few users and I got the following feedback from that:
- Users had concerns about the name of the button: Home Care
- Users didn't like to insert the address in 2 different screens.
Mid-Fidelity Prototype
With feedbacks on mind, I started to work on Mid-Fidelity prototype, changing the button, the address screen and fixing some inconsistencies in the design.
Testing the Mid-Fidelity prototype I could observe another problem related to the address inserted at the beginning of the search. Some users were confused on the checkout screen on how to change the address. To solve that I added an edit button enabling users to change it.
High-Fidelity Prototype
After testing and adjusting the designs, I started working on the High-Fidelity prototype. I organized my components creating a style guide and using that to build the final results how you can see bellow:
Conclusion
Was a great challenge to build a new feature from the sketch in a real Application. We needed to be consistent when creating new designs maintaining the same user experience all over the product. For that we looked into the fonts, colors shapes, icons, buttons, and other atom elements as we were working for the company.
Another learning during the development of this project was from the need to analyze the existent flows in order to find how and where was the best place to add the new functionality without losing the usability.
At the same time, even being really close to a real project, we didn't have access to some important resources to create the designs perfectly. On my case, the problem was that Treatwell had a specific font that I couldn't have access. I solve that using Poppins, a similar font which gave me similar results as if I had the right typography.
I'm waiting for your comments and feedback, and come back next week for my next articles on Ironhack Bootcamp :)