Case Study: Adding a Treatwell Profile Section
Week 3: Ironhack UX/UI Bootcamp
Reviewing my works from the Ironhack Bootcamp we are going back in time again today to have a look at a feature requested by several users of the Treatwell app.
Project Overview
The goal was to incorporate new features into the existing platform based on user needs.
In this case, my Bootcamp partner Alexandra Alva was proposing a profile section for the beauty app Treatwell (Treatwell Engineering).
So my research began to understand what Treatwell is offering and how a possible solution could look like.
Research
Compared to other assignments it was refreshing to start the project from a user perspective without coming up with an idea myself. Hence, the first step was to interview Alex and understand why she had the feeling of needing a profile section.
After a casual conversation she said the following key takeaway:
Currently the Nav Bar only has “search”, “my favourites” and “my bookings”. The personal settings are quite hidden and there is no place to see your profile section.
I thought about it and realised the current version works but is unlike any other app where you have more direct control and a better overview of your profile, personal settings etc. I then asked myself:
Why not implement a whole profile section where you can directly control better suggestions for not only the shops you like but also specific treatments you need?
A First Look & User Interview
After this first realisation I started looking at the app again to understand the user flow and how you can currently log in. I then walk through the app with two non-german speakers that have used the app before. These are the findings so far:
First thing, I noticed during the interview phase I am currently living in Berlin, Germany with more than 700,000 foreigners from 190 countries.
The only way to switch the app to English would be to change the country settings to the UK. This is really inconvenient for foreigners who do not even have the option to switch to English in Germany.
First Painpoint: Language Settings
Ok let’s now have a look at bookings, settings and login details. I did have a previous booking somewhere hidden in my Email when I used the website 2 years ago.
1) Import my Booking: As you can see below I can either enter my Email and it redirects me to my Email app and let’s me import the bookings by following the link in a new Email.
2) Login/Create Account: I can also Login or create an account underneath the import option.
I personally found the Email option helpful and easy to import. However when login in it was not as transparent as I had hoped. My interviews solidified my findings. Have a look below at how to create/login to your account.
When creating an account on the left picture below you can only login with Facebook or leave your basic information to create it.
In the middle you see the default settings when you click on the cog-gear-widget on the top right corner inside My Bookings (Meine Buchungen).
On the right picture you see the settings when logged in. The only real difference is the log out option that has been added on the bottom of the list. Your bookings would also appears once you go out of the settings back into My Bookings (Meine Buchungen).
Second Painpoint: Personal Settings + clear profile information
Both the language settings and a clearer general and personalised settings page are painpoints which a separate profile section could solve.
I am not supposed to be the user though and wanted to see what other apps used to indicate login/logout states, personalised settings and signup possibilities.
Visual Competitive Analysis
Apps that have a clear profile section in their Nav Bar and include personalised settings I looked at are Airbnb, Tripadvisor & Mein Douglas. Mein Douglas is the only major app in Germany also in the beauty category, yet it is more of a e-commerce for beauty products.
Airbnb
The Login/Profile icon on the bottom right is why I chose Airbnb for comparison. With more than 150 million users worldwide (2018, it has not been updated since) this design is something worth considering due to its recognition value.
Furthermore you can see several log in options in the middle screen including Google and Apple which gives users more control over their data management.
Finally the third screen beside shows the changed Profile (Profil) Icon. Within it also shows all sorts of personal options. The key elements are personal information (Persönliche Angaben) and payments (Zahlung und Ausgaben) that can be adopted for Treatwell.
Tripadvisor & Mein Douglas
Tripadvisor and Mein Douglas have similar features which confirmed the recognition value of having a profile icon in the Nav Bar on the bottom right.
Furthermore you can see the options for adding information about your profile on the left Tripadvisor screenshot.
With these two options in mind I started thinking about the general User Flow of an international user. Since this project was limited to 1 week only I skipped creating a User Persona.
User Flow
Creating a User Flow helps a lot to understand what steps the user is doing, what screens are necessary for a MVP or in the case of the new feature in conjunction with other crucial functions of the app.
In this flow I included the new Language settings before having to log in as well as choosing treatments for women, men or transgender users — Content dropdown.
We are at a time where inclusion and representation is very important by adding a third choice the app could take a solid stance and support the LGBT+.
Finally the user can then choose what particular treatments they want to always see displayed. This helps filtering unnecessary options unless they just want to browse.
Original Mid-Fi
After researching and copying the general elements I was lucky to find the logo and favourites and bookings on Treatwell’s website. I was not so lucky with the rest of the icons and elements but more about that later..
Mid-Fi (+new feature)
After having all Mid-Fi elements ready I started including the fourth login icon (Einloggen) which prompts the user to sign up and become part of Treatwell community.
On the screen in the middle you see a newly created option to choose English even if you are based in Germany. Less headaches for our international user — Take that Ausländerbehörde!
Thirdly, the screen on the right shows two additional options to login in with Google or Apple for more data control.
More features below..
Continuing on the bottom left you see the possible options before you Log in. You can still change language settings and have a small view of what country and language are selected (DE | DE).
In the middle you see the new redesign of the profile / personal settings section including the name and photo on top. This exclusively appears once you sign in. I also included Personal Preferences, Payments and Routines.
On the right screen you can see the personal preferences showing the additional third category — transgender. I was not sure if non-binary was necessary and instead found more transgender focussed treatments and salons on Google.
Before going into High-Fi I did test and collect feedback of the Mid-Fi version to avoid complicated changes at a later stage.
With these three major feedback comments I went into collecting all necessary components for a style tile and it’s atomic design.
Style Tile & Atomic Design
While colours and forms were easy to copy and find, a true design challenge for me was recreating the icons which were not directly downloadable.
Luckily I found a Medium post by Jon Parkinson (Treatwell Engineering) that helped me with all icons in one place and replicate new forms from his blueprint.
High-Fi
Having all elements available in my Style Tile I could now build the additional feature requested from my colleague.
Here is a look at some of the final alterations to the Treatwell Nav Bar, Language Settings and Profile section (logged out & in).
Furthermore the Personal Preference features a custom content dropdown menu inspired by the original as well adding a treat yourself add-on that let’s you browse and save your favourite treatments.
Finally you can have a look at the final user flow below:
Key Learnings
One major learning was creating logos from scratch which I had real issues with beforehand. With the right guidance and getting used to Figma it felt much easier towards the end.
That being said the additional logos could still be improved in terms of line thickness and resemblance to the rest of the imagery.
Furthermore when starting this project I simply used my Samsung S20s screenshots for reference and started creating the Mid-Fis in the same size (1080x2400p). This later caused issues when wanting to use a fitting Prototype frame. Since Figma does not have Samsung cellphone dimensions as an option I simply left the prototype as is and scaled it down with minor placement alterations in between some screens. (<0.05p)
Thank you for reading! I am always open for feedback and to hear your thoughts.
