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.