ME Beauty

Role

UX/UI Designer

Timeline

1 month

Tools

Figma | Figjam | Miro

Project Type

Redesigning a responsive website


Overview

ME Beauty stands for Mavro Esthetics Beauty, and it's a small esthetics business that offers a range of services including facials, waxings, lashes and brows, peels, and more. Currently, the owner is the sole employee managing and operating the business. However, she has aspirations to grow her business and increase traffic to her website. To achieve this goal, she has enlisted my help.

Background

Design Process


Empathize

To get more people to visit ME Beauty's website, we need to figure out what the market and target audience want. By analyzing their preferences, we can identify the features that are most likely to catch their eye and keep them interested. That way, we can increase traffic and engagement on the site.

Research Goal

Competitive Analysis

I specifically looked at competitors in the Los Angeles area, especially those near Venice since that's where the salon is located. My goal was to find businesses with a similar aesthetic to the one we wanted for the website design. Some of the things I noticed from the advantages was one of the aesthetics was gender neutral and another offered tips. The disadvantages were no testimonials and no description of the services.

Number of Participants: 3

Age Range: 22-27 Location: Los Angeles

Interviews

Generally all of the participants had similar answers. They have goals of finding a location with positive reviews, strong social media presence, and where they feel comfortable. They have identified the pain point of coming across locations with poor reference photos. To fulfill their goals, they require that the location is up-to-date with Instagram and social media.


Define

Affinity Mapping

During the discussion, we found that reference photos and reviews were the most discussed topics. Users stressed the importance of having access to images and reviews to inform their decisions. Concerns were raised about the reliability of certain providers, making reference photos essential.

Journey Map

The focus of the user journey is limited to the user's lack of information. As the journey unfolds, I carefully mapped out the user's actions, thoughts, and emotions. These valuable insights, combined with the user journey itself, sparked ideas in my mind regarding design opportunities to address the issue at hand.

POV & HMW

POV

I’d like to explore ways to help business owner of ME Beauty to understand more of her clients needs because this can be beneficial to improving her website.

HMW

How might we help understand her clients to improve ME Beauty’s website?

POV

I’d like to explore ways to help users to be more informed about ME Beauty because it would drive more traffic to her business.

HMW

How might we drive more traffic to ME Beauty’s website to bring in more business?


Ideate

I wanted to gain a deeper understanding of how users would navigate the process of viewing the service details button and booking an appointment, as this knowledge would be critical in identifying the most effective strategies for improving the user experience and ensuring that users can easily and efficiently book the services they need. By gaining these insights, we can gain a better understanding of what users find most effective when booking services and tailor our approach accordingly.

Task Flows

Wireframes

Next, I created frames of key screens to support the task flows. To achieve a cleaner and more organized outcome, I opted to create the lo-fi frames digitally.

Low Fidelity Wireframe

After receiving feedback in design critique, I made corrections to my midfi wireframe designs. This helped me identify areas that needed improvement and refine the user experience.

Mid Fidelity Wireframe

My objective was to create a website with a tranquil and soothing atmosphere, achieved through a careful balance of both strong and light undertones. Above all, I wanted it to have a sense of serenity and peacefulness, ensuring that visitors to the website feel at ease as they navigate through its content.

Mood Board & UI Kit

High Fidelity Wireframe

Just before conducting the testing, I made a few additional iterations based on design critiques. One notable change was creating a clearer hierarchy on the home page to improve user experience. In general, I integrated visual elements, typography, and colors that align with the brand's identity and messaging.

Before & After

Before

After


Test

Number of Participants: 4

Age Range: 22-27

Location: In Person & Facetime

Usability Testing

  • Overall the testing revealed that the product's design was "clean and easy to use", which contributed to the positive feedback received from users

  • The detail page and symbols were the most talked about. Users found them interesting and informational.

  • While there were some minor issues reported during the testing, they were quickly identified and resolved.

Usability Testing Feedback

Iterations

Iteration #1: Detail Page

One of the suggestions that came up was to fill the detail page instead of having it off to the side. The reasoning behind this was that the current alignment didn't feel quite centered, and there was also an opportunity to include more information. Taking this feedback into consideration, I decided to make the change, allowing for a more balanced and visually pleasing layout. .

Before

Iteration #2: Home Page

After

Based on the feedback received, I took note of the comments suggesting the need for a clearer hierarchy on the page. To address this, I made adjustments by adding more content to establish a visual hierarchy. This approach ensures that important information stands out and guides users through the page with ease, resulting in a more engaging user experience.

Before

After


Working with the client was truly enjoyable, and her input proved to be incredibly valuable. While at one point we had differing opinions on design elements like branding colors and typography, I was able to convince the client of what I believed was best, and at the end she was very happy with the design. The key to our successful collaboration was our open and transparent communication, as well as our unwavering focus on our shared goal of improving her website.

Reflection