mockuuups-macbook-pro-mockup-floating-to

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. 

Screenshot 2021-03-03 at 08.57.54.png

- Original homepage design

Screenshot 2021-03-03 at 08.57.45.png

- 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

1.2 Man catagories NEW.png

Step 02

Service category selection

1.3 Services.png

Step 02.5

Service category confirmation

1.3 Services.png

Step 03

Date and time selection

1.5 Time and date booking.png

Step 04

Choose your Pro selection

1.6 Pro Profile list.png

Step 4.5

Pro selection confirmation

Desktop HD Copy 8.png

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.

1.2 Man catagories NEW.png
3.2 Mobile man catagories.png

- 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. 

1.3 Services.png
3.4 Mobile Service page.png

- 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.

1.5 Time and date booking.png

- 3rd step / Time and date selector step in process

3.5 Mobile booking.png

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.

Want to see my other projects? 

Miadori