Second Project: digital experience of a local e-commerce

Lolita Blu is an organic and cruelty-free hair salon from Barcelona. Located in El Born, the aim of the beauty parlor is to offer the best services using natural and eco friendly products. Ester Jordan, the owner of the salon, has more than 20 years of experience in the sector and manages the store by herself. The salon has a variety of clients (aged from 20 to 60) and also a lot of foreign customers that visit Barcelona because of their job or just tourists.

In this case, we had to improve the digital experience of a local e-commerce and we decided to chose Lolita Blue since we stand for its values and Ester is friend of one of the members of our group. Currently Lolita doesn’t offer an online service so we thought that would be a good idea to design an online reservation system in order to improve the experience.

We started by doing some research, which we divided in 3 phases:

-Google Form: We did an online survey asking consumers how they book a session on a hair salon and also what would they improve. We obtained 60 responses and 30% of the users suggested that an online reservation system would improve their experience. Also, we find out that 53% of the reservations were placed via phone, while 25% booked the session attending the store physically.

-Interviews: We also had the chance to talk to 2 clients that helped us find what would they improve from the current service that Lolita offers. Both of them suggested that an online reservation would be more useful than the current phone reservation process.

-Benchmarking: we also did some research comparing the current reservation options that the salons closest to Lolita Blu offered. We analyzed 5 salons and we find out that only 2 had the option of an online reservation. Also, both of them offered this service through an external app called Magnifique, so the service was not fully integrated to their own website. In this step we also discovered that the price of the same system varied depending on the gender of the client, which surprised us since the price should only depend on the quantity and length of the hair because it varies from one person to another.

Benchmark

With all the obtained information we created 2 user personas: Elias ❤, a Swedish correspondent that is in Barcelona covering an event and Marta ❤, a Spanish girl that lives and works in the city.

Value proposal

Based on the previous results and our user profiles, we decided to make the following value proposals:

  • Create an online booking system on Lolita Blu’s website
  • Eliminate gender categories and create a catalog of services with prices depending only on hair length
  • Add more photos to help users have more visual information to decide what they want
  • Create the possibility of registering on the web, as a loyalty club, so customers and hairdressers have all the information centralized. We will do this through an onboarding form where users will give their basic data and information about their hair.

The structure of the web

The first step after determining where we are going is to decide if the current structure of the website should be modified or maintained. For this, we used the card sorting methodology with 5 users, to check how these were related to the current sections of the web. First we did it in an open manner that, together with the analysis of sections of the benchmark, helped us summarize some sections; then we did it in a closed way to observe how the users categorized the different services within its section.

Card-sorting

By eliminating the categorization by sex, we chose to create a new way to filter the services: hair, face and special occasions, the latter to pick up some more services such as ‘makeup’, ‘collected’, ‘weddings’, etc.

The routes and the testing

From all the obtained info, we designed a first sitemap as a guide of the possible pages that we would need to create, and based on this, we went on to determine what would be the possible use cases or routes that each of our consumers would make, following three specific objectives:

  • Request an appointment without registering on the Club
  • Sign up at the Club and then ask for an appointment
  • Log in to the Club and request an appointment from your personal profile
Low-Fi structure

Keeping in mind our user personas, route 1 would be designed for a profile like Elias, who is a sporadic user and would prefer not to register; while tours 2 and 3 would be better adapted to Marta, a regular customer who values ​​monitoring what she got done in the salon.

Based on the different routes, we created the first user flow, we drew low fidelity prototypes and then we tested them with 6 users.

The tests helped us incorporate some improvements:

  • The Services page, in addition to being a catalog with detailed information and photos of each service, should allow these services to be added to the reservation (previously this function was only enabled from the ‘Request your appointment’ section)
  • Registration in the Club should have its own page with information of the advantages of registering to the Club and the basic data form (before ‘Register’ and ‘Login’ were on the same page)
  • Add the ‘Login’ section on the menu via an icon that allows you to enter your account from anywhere inside the web
  • Differentiate two flows in the process of ‘Request your appointment’: one that incorporates a section to add the contact information (in case the user is not registered) and another that does not require it (since the user is registered)

After making several iterations with the prototypes on paper, we moved on to the creation of the mid fidelity wireframes. As we built each of the pages we designed a more precise user flows, with the path defined by color according to the objectives.

Here you can check a video prototype of an sporadic user that’s not registered. They will be able to book an appointment from various sections of the website, like “Pide tu cita” or “Servicios”.

As next steps we’d like to test in a more real context and create high fidelity version of the wireframes we designed.

Thank you!