MIADORI
Nov 2020: An online beauty service provider and retailer based in Madrid.
DESKTOP & MOBILE PROTOTYPE
Brief - UI redesign project
Scope: 2 months
As part of my product design freelance collective, Black Denim, me and one other designer were hired to redesign existing high fidelity mock ups for an Italian book-at-home beauty brand, Miadori. While they had designs, they were designed by print designers and not suitable for a digital product. We were charged with assessing the designs for usability and then applying the needed changes, as well as redesigning the booking journey.
A challenge we faced from the beginning was that Miadori had both already been designed and was already being developed - meaning that there were certain areas where we couldn't necessarily make the kind of UX changes that were needed.
This was a largely UI based project, which was an interesting change as I usually conduct the end-to-end process of UX as well. In fact, we found as a team that it was more difficult to work from existing designs and documentation without conducting our own research from the conception of the project.
Brief highlights
01. Redesign their existing designs for the beauty service website.
02. Assess the existing designs for usability
03. Rethink & redesign their booking journey
The Team
Product designer (me), and another product designer (my freelance partner).
My role: Though we shared a lot of the design work between us, I primarily focused on the desktop designs for this project.
-
For the purpose of this case study I will be only looking at what we did mainly for the booking journey process.
Important case study note:
Design process
We started with a heuristic analysis of the original designs - although parts of the design were already being developed, we could spot from the get-go that there were several areas that needed improvement to be more user-friendly.
We created a succinct list of design changes that we felt were necessary to accomplish a good user experience and discussed the possible changes we could make with the product owner. Many were not technically feasibly to change at the time - so we contented ourselves with bigger changes that we could make within the homepage and creating a valid booking journey.
A lot of what we had to do was translating the existing designs to usable sketch files, the client was already fairly pleased with the original designs (despite our misgivings) and wanted to keep as much of the look and feel intact.
- Original homepage design
- Redesign of homepage
Booking journey process
Our approach to designing the booking journey was to:
01. Break down every step of the process in easy-to-digest chunks
02. Remove as many unnecessary steps and pages as possible
03. Stay true to the airy, minimalist look and feel that the client wanted
Quick note regarding the previous booking journey designs
These designs were not in a finished state by any means at all, just one or two screens that they had previously designed before we start the project, so we decided to start from scratch with the full booking journey. The main approach for us was to separate the booking journey out into multiple steps instead of combining them into one main screen, which they had partly designed previously.
Step 01
Category selection
Step 02
Service category selection
Step 02.5
Service category confirmation
Step 03
Date and time selection
Step 04
Choose your Pro selection
Step 4.5
Pro selection confirmation
Just a quick note that the 2 final steps are not presented above (the payment and confirmation pages) as this was not part of our redesign remit.
We split the booking process into 5 overall steps - gender selection + service selection, sub-service selection, 'pro' selection and a time/date selector, followed by a confirmation.
- 1st booking step - Category selection
For the first stage of the booking selection, we wanted to offer the gender selection tabs, even though this was an option in the landing page, as users could have the option to select mens or women's beauty service selection without being confined to one service.
- 2nd step (modal pop up) / Category selection
In order to lower the number of overall steps the user needed to take and avoid them having to go back and forth between steps - we utilised modals and overlays to display extra information regarding sub-services and 'pro' profiles.
It was also an excellent way to maintain the beautiful amount of white space, as larger amounts of text could be hidden in the overlays whilst still giving the user an appropriate level of detail.
- 3rd step / Time and date selector step in process
In order to streamline the booking process while keeping the page as clean as possible, we implemented a vertical progress bar that served as a way-finding tool for the user as well a means of navigating back and forth between steps. It also meant that we could keep the header area visually uncluttered to focus the user on the process.
User testing
We got 4 users to test our desktop and mobile designs.
2 x female users (ages 24 & 31)
2 x male users (ages 28 & 32)
Overall response from testing
-
Users found the booking journey to be easy and straightforward, and when asked at the end agreed that separating out each booking step simplified their booking experience.
-
Users enjoyed navigating back and forward through the progress bar if they needed to go back and change a part of their booking progress.
Final product
After completing the various sprints, I feel we did a great job in taking something that looked visually beautiful and adding in the appropriate amount of functionality for a viable digital product. From a UI point of view, there were numerous changes that we felt improved the visuals of the site as well. This included realigning, font changing and producing a visually striking booking journey that was still in-keeping with the original look and feel of the designs.
If we'd had more time and the technical feasibility at hand - I would have loved to do more research and planning around the design as I still feel there are areas for improvement, however the client is very happy with the changes as the site is continuing to be developed.
You can view a video of the prototype below.
