Transforming Asia Beauty's Online Presence:
A Website Overhaul Case Study

Tools

  • Miro

  • Adobe XD

  • Figma

Team

  • Roya E (UI/UX lead)

  • Medi N (Project manager)

  • Mary A (Marketing specialist)

My Role

  • UX design

  • UX research

  • Workshop facilitator

Timeline

  • Overall: 10 weeks

  • Discovery & Research: 3+ weeks

  • Design & testing: 6 weeks

Project background

Asia Beauty is a small business with four branches in Tulare County, CA, that provide beauty services with a focus on eyebrow services. The business has grown well in the last few years, and people are loyal customers. However, the website needed some help, and that's where two collaborators and I came in.

Project Goal

Complete a website overhaul, including UX research, Redesign, and SEO solutions, in the course of 10 weeks.

Process

Empathize

In this phase, I focused on conducting Site audits, Competitive Research, User Interviews, Usability test, and creating Personas. But even before we started a site audit and user testing, I interviewed owners to know more about their need for an upgrade.

Asia Beauty Lounge

Business Owner Empathy Map

CEO Interview insights 

The owner believes:

  • The website content is not up to date.

  • They are frustrated with repeated answers to common questions in emails.

  • The domain name is not relevant to the business goal.

  • They want to improve the overall look and functionality of the website to bring new clients.

Website Audit 

With notes from my interview with the CEO, I looked through Asia's current website and found significant problems in the navigation, user flow, and design. 

  • The call to action button navigated me to the Location page.

  • The elements in the header were not aligned properly.

  • There was no search bar on the entire website. 

  • There was no quick chat option.

  • There were no testimonials on the website.

  • And the only language was English.

  • And a few links didn't navigate me to the right content, such as Get Directions and About me.

Asia Beauty Lounge

Competitive Analysis

After the website audit, I looked into the local competitors' space and a couple of successful examples in the Fresno area to get an idea of What are the competitors already doing in Central Valley?

Asia Beauty Lounge

Aggregated User Empathy Map

User Interview and Usability Test

Although it was essential for us to understand issues with the site, we also wanted to see what other people thought. Therefore, I conducted a series of moderated usability tests focused on three main tasks:

  1. Sending a message.

  2. Making appointment.

  3. Finding available services.

Based on the insights gathered from our usability test, we identified three main pain points, and later, we created personas based on users' pain points.

Process

There is no online appointment option on the website.

Accessibility

The website is only in the English language. However, 65% of the population in Tulare county is Hispanic.

Support

Users had difficulties finding proper ways to contact the site owner.

Asia Beauty Lounge

Define and Ideate

After finishing up round one of the usability tests, we gathered and organized key takeaways to do affinity mapping and came up with more ideas for the next steps.

Asia Beauty Lounge

Target Customers

We narrowed down our target audience to help us create personas and define our customers based on four traits.

Asia Beauty Lounge
Asia Beauty Lounge

Possible solutions 

Based on the user problems and recommendations, I ideated possible solutions to update the user flows and add new features to the website.

Asia Beauty Lounge

Site Map

After analyzing user pain points and possible solutions based on research and recommendations, I created a site map with the help of imagining the user flow. But before this step, I analyzed the existing site map to find the navigation issues and design the new site map based on identified barriers.

The goal for the final user flow was to start from the homepage to find a service and book it.

Prototype

I started the prototype phase by creating quick paper sketches to generate some ideas for the overall structure of the home screen. The next step was to create digital wireframes for each screen, and after that, I designed a Lo-Fi prototype for the website and the mobile version in Adobe XD.

Asia Beauty Lounge

Sketches

The user flow gave me enough ideas to start sketching wireframes. Here is the example of the Home page and iterations to decide on the primary sections of the Home page.

Asia Beauty Lounge

Digital Wireframes

When it came to laying out my wireframes, a few things that I kept in my mind were:

  • The goal is to improve visual elements and navigation but not change the design.

  • The home page should represent a quick scan of the site's important information.

  • Services, Social icons, and get directions should be bold and accessible in various ways.

Asia Beauty Lounge

Home Page Lo-Fi Prototype

First Prototype

While I stayed true to my wireframes for the layout, I concluded the main tasks for the first prototype:

  • Images should be updated. 

  • Design should be minimal.

  • Booking an appointment should be added.

  • For the booking, the employee calendar should be integrated into the site.

  • Chat Feature should be added.

User Testing

We did a usability test after creating a Lo-Fi prototype. the goal was to identify issues that the user might face before we start the high-fidelity prototype.

Methodology

  • 20 minutes

  • In-person, Moderated

  • Visalia, CA

Participants

  • two females

  • and three males between the ages of 20-65.

Asia Beauty Lounge

Desktop and Mobile Versions of The Home Page

Insights from the Usability test 

The results from the Lo-Fi prototype usability test gave me a few insights for the Hi-Fi prototyping stage.

  • Available services are better to be categorized. 

  • Instagram posts should be somehow embedded in the website.

  • The booking process should be very easy and quick. The goal was to book a service in no more than three steps: choose the service, choose the time, review and add email, and confirm.

  • Prices should not be included on the website (Owner feedback).

UI Design

Once the usability issues were resolved, I moved on to design the final screens in Adobe XD and Figma. My goal was to create a visual identity that was aligned with the business values and follows the beauty industry standards.

  • visual style: Fresh, subtle, and bright

  • Color should change and be matched with the business type. Pastel and subtle palettes are desirable.

Next Steps and Final Thoughts

There are a few thoughts for the next business development plan.

01

Frequent customers prefer discounts and promotions, especially in a business the main customers are from the middle/working class. We are working on developing an online reward program for loyal customers to earn points to use for future services.

02

The owner is looking for a way to let the clients feel the final result on their eyebrows/eyelashes. I proposed an idea for an AR app that enables them to scan their faces and see different brows/eyelashes and choose their desired shape.

Thank you for your time reviewing the Asia Beauty Lounge case study!

Feel free to contact me or just say hello on my social media!