UX, UI, Ixd Designer
Cover2.png

Beauty Shop

 

UX Case Study: Beauty Shop

_MacBook_Pro_1280_x_720_720P_HD_.gif

THE DESIGN CHALLENGE

“The most important part of a landing page is the part of it that the user will see when they arrive on the page. Don’t forget the call-to-action!”

Tools Used: Balsamiq Mockups, Adobe Xd, Adobe After Effects

Time Elapsed: 4.5 hours

1 - Research

assumptions:

As I will be creating a concept, I visited several hairdressing websites that are already in existence and I took some notes about the usability and design issues that I witnessed. I kept the issues as broad as possible to avoid my own biases.

  1. Website is not currently responsive, but should be.

  2. Website is not currently accessible, but should be.

  3. Navigation feels clunky.

  4. General look of the website is outdated.

I set out to conduct research in order to validate and expand on these assumptions.

field survey and user testing

I began with a survey on user goals of visiting hairdresser websites. I had conversations with around 20 individuals of varying demographics about their experiences in using hairdressers and barbers websites. I also conducted user testing on existing websites, where users were given tasks to complete on the website. The tasks were created based on information I gathered during the survey.

key findings

  1. Users were frustrated with both the visual presentation and organisation of information.

  2. The website was missing critical information, such as concrete closing times and certain menu options.

  3. Booking system and links are messy, cluttered and hard to find.

2 - Definitions

In this stage of the process, I am constructing a plan based on the needs and insights gathered from my research. I aim define objectives and subsidiary goals. There’s a number of things I create to do this. I aim to develop our understanding of the users and uncover what they want.

User Personas

Next, I created a user persona based on the three forms of research in order to help streamline the goals of the potential users.

 
Screenshot 2018-12-09 at 01.16.59.png
 

The user persona and user research assists me in validating information, expanding on my previous assumptions. I was also able to add more specific features. I revisited my initial list of issues I had created before conducting research, and revised them before moving into the prototyping stages of my project.

ASSUMPTIONS REVISITED

  1. Website is not currently responsive, but should be.

    Evidence: Survey respondents almost unanimously say they use mobile when browsing hairdressers websites.

  2. Website is not currently accessible, but should be.

    Evidence: Users said typography was difficult to read, difficult to navigate and felt put off by this.

  3. Architecture of navigation should be informed by user goals.

    Evidence: I noticed that users had a difficulties completing some tasks due to the current navigation being distracting. These included important tasks such as booking an appointment.

  4. Outdating, messy layouts.

    Evidence: Understanding the aesthetic and ethos of a hairdressing business is quite to some users.

3 - Ideation

Screenshot 2018-12-09 at 02.11.49.png

At this stage of the process, I begin to build the ‘skeleton’ of what the landing page will become. As the content website is aims to be relatively straightforward and visual, I began to consider and research minimal, visual-driven layouts.

I quickly sketched out a couple of layout options how the landing page would look like and began to build a some wireframes in Balsamiq Mockups.

I was able to make some key design decisions from building the prototype in Balsamiq.

  • When the user first encounters the landing page, they will be immediately presented with a video playing in the background. This will be complimented by a confident and bold statement and a button to allow impulsive users to avail of a free consultation.

  • There will a heavy emphasis on imagery in this exercise. There is a a number of reasons behind this. From user research I understand it is imperative that a user can get a sense of the aesthetics and/or philosophy of the business from one scroll. Another reason why emphasis is places around images is because our identified users have admitted to skimming past text/skipping it altogether.

  • A booking panel can be found in the banner, ideal for users who have already availed of the service and do not require to scroll through the landing page. The call to action features a ‘free consultation’ option, enticing new users to engage with the business, and if successful get contact/email etc info from user. This is contrast to other pushy and bad practice tactics such as instantly showing a popup and asking a user for their details.

4 - Prototyping and Testing

_MacBook_Pro_800_x_600_Dribbble_.gif
Booking button is conveniently placed beside a social media influencer’s instagram post. Although there has been a small backlash against influencer culture as of late, many people still turn to influencers for inspiration, reviews and testimonials.

Booking button is conveniently placed beside a social media influencer’s instagram post. Although there has been a small backlash against influencer culture as of late, many people still turn to influencers for inspiration, reviews and testimonials.

Midway through the scroll, users will be given the opportunity to flick through the ‘Press and Mentions’ section. Whilst many users aren’t extremely likely to flick through the articles, they will still be reminded of the achievements and high quality of the the salon.

Midway through the scroll, users will be given the opportunity to flick through the ‘Press and Mentions’ section. Whilst many users aren’t extremely likely to flick through the articles, they will still be reminded of the achievements and high quality of the the salon.

Check out the full prototype in high res, here.

5 - Conclusions

Takeaways

This challenge was a wonderful opportunity to think more in depth about landing pages and experiment with different decisions that go into such details as the placement of the CTA buttons.

At this point, the landing page is far from complete, since, in case of a real project, this would be the starting point to develop and launch the page to measure the reactions and interactions of the users. From there, I would create an iteration to further improve and optimise the design.