Hello Nails
User-centred redesign to improve Hello Nails usability
In this project, I redesigned the Hello Nails app with a focus on improving usability. Problems with navigation and understanding of services were identified, implementing solutions that resulted in a more intuitive and accessible user experience.
Rethinking Hello Nails: a heuristic approach to an intuitive experience
The challenge in this project was to select an app of my choice and carry out a redesign based on a heuristic analysis to optimise its usability.
Thus, I chose the Hello Nails app, a company with many franchises throughout Spain dedicated to nail care and aesthetics. I have been a customer of one of the franchises for 3 years, and I have always booked through the app. In my case it has never been an obstacle in the usability of the app because I knew the centre I wanted to go to, however, I understand that this does not have to be the case in all situations. This is how I started my heuristic analysis:
In this first screen what we can see is that the app assumes that the user knows the centre they want to go to. The list of centres that appear in the offer is huge, it includes all the centres that are currently active in Spain. Therefore, the search has to be very precise. There may be situations in which the user does not have this information: they do not know the street, they are in another city, etc. and all the cities appear here, so the visualisation and intuitiveness of the app are complex.
When selecting a specific centre we observe the following information:
This screen, at first glance, does not present usability problems as the information is understandable and visual. However, the areas for improvement that could be worked on are, on the one hand, increasing the size of the map to make the location of the centre more visual and accessible and, on the other hand, changing the naming of ‘Enter’, which generates doubts as to what it refers to.
When we select the button to book the appointment, the following screen appears:
This screen, at first glance, does not present usability problems as the information is understandable and visual. However, the areas for improvement that could be worked on are, on the one hand, increasing the size of the map to make the location of the centre more visual and accessible and, on the other hand, changing the naming of ‘Enter’, which generates doubts as to what it refers to.
When we select the button to book the appointment, the following screen appears:
Somewhat along the same lines, the user should be aware of the different treatments offered to them. Furthermore, the difference that this screen brings is the information icon. A priori it seems that it will resolve the user’s doubts, but nothing could be further from the truth, as only the description of the treatment appears, with no further information about what it refers to.
I took the first step towards a new experience…
I started by looking at the competition, so I downloaded different apps and saw how they solved the problems I detected from the heuristic analysis. I detected the aspects that I considered could best solve the problems to have as a reference such as: distance from the centre, intuitive shortcut icons, images that differentiate the different parts of the body, a descriptive with the information highlighting the most relevant information and information in the user’s profile indicating future and past appointments.
With these aspects in mind, I started to sketch out the design and began to implement the improvements.
I started designing the high fidelity prototype with the following aspects in mind:
In this first screen we can see what the app looks like in its original form. It has a list of different centres, randomly placed. By this I mean that the screen at no time asks you for the location where you are, and you can not only see places in Madrid but also in Albacete, Valencia… Other cities in Spain. Therefore, it assumes that you have to know the centre you want to go to or, at least, a keyword, to search for it in the magnifying glass icon above.
In the redesign I have carried out, the home page presents information in a very visual way. As you can see, by clicking on the search engine you can not only activate the location, but you can also access the most recent searches you have made. I have developed the location process, in which we are given two options: activate the option or continue without activating it. In the case that we want to continue without the location, a message pops up, and allows us to manually enter an address. In the case that we want to activate it, it shows us the closest locals to the detected location, as we can see.
Next, we can see the information of the place we want to go to. On this screen, the original one, there are no serious usability problems. The layout feels compressed, the map is a bit small, with low visibility, and the term ‘Enter’ is not clear. However, none of these options is a major usability pain for the app.
In the redesign what I have done is to give the information more harmony, more space. The ‘Enter’ button refers to ‘Log in’, but this part I have not developed, I have simply changed the naming to make it easier to understand. This section would contain information about the booking that has been made, past appointments, information about the person, etc.
In this screen of the original app we can see the different treatments they perform, mainly on hands and feet. The differentiation of the information is depending on the techniques being done (semi-permanent, traditional or unglazed services). On this screen, the usability problem detected is that it is assumed that the user knows these techniques, that the users are familiar with these terms. However, this may not be the case.
This is why, in the redesign, I wanted to be more user-oriented. For this reason, the techniques have been divided according to the area of the body: hands and feet. An information icon is offered next to each of the techniques so that the user, by clicking on it, knows what it refers to. The information that has been included is related to how the technique is carried out. In this way, in case of need and interest, the person could click on it.
Once you have chosen the area of the body and the type of technique you want, the last step is to choose the treatment. As in the previous screen, the usability problem detected is that it is assumed that the user knows these treatments, that the user is familiar with these terms. However, this may not be the case.
For this reason, in the redesign, I wanted to show the different treatments that are performed in a very visual way so that the person entering can identify the ‘style’ they want. In addition, the user is offered information related to the duration of the treatment and its cost. In case they would like to have more information about the treatment, they can click on the information button and read about it.
Once the treatment is chosen, the user would click on it and the next screen would be the calendar to book the time.
The following steps I have not developed because they don’t present any usability problems. So, the result is the following one: