Project Summary

This is a real-life project. NJ Nails started in 2014 as a local nail salon in Novato. Their target audience is anyone who wants to have clean or beautiful nails and relaxation. They decided to take their business further by having a responsive website where their customers can explore NJ information and book appointment.

UI Designer
User Research
Analysis
Website
Brand developement

Project Details

Role :

Product Designer

Duration :

June 2020 - June 2020

Website :

Prototype

Tools :

Figma, Miro

Problem

Customer often complain about how the result was unexpected as they want the images they see on Yelp are shutterstock images which gave them disappointment. Also through the user research, I found that customers like to do walk in more than making an appointment. So they tend to call the salon 10 minutes or so to see if they can come in or they just walk in to see if anything available and either they have to wait for more than 30 minutes or they got turned away and post angry reviews that will affect businesses.

Competitive analysis is a key aspect when in the beginning stages of an SEO campaign.
Far too often, I see organizations skip this important step and get right into keyword mapping, optimizing content, or link building. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps.
Problem Tab Image

Solution

Problem Icon

- A booking appointment system where user can see availability
- Available technicians: clear description of each service and accurate pricing will be visible. Customer can check the skills and duties of each technician so they know who to go for when they make appointment.
- Testimonies and reviews will be transfer from Yelp and filter out accordingly to each technicians.
- Up to date operation hours will avoid walk-in customer visit when the nail salon is already closed.

Solution Image

1. Discovery Phase:

UX Research Plan

I started with conducting Market Research on local nail salon's success and failure. It gives me insights on what I should target at while asking users.

Market Research (Secondary Research)
:
This method can help to identify their competitors and learn from their gain or failure. I found 3 closest competitors in the area which are Bella Femme Nails and Spa, Nail Bar and Fancy Nails. None of them has a business website but Instagram. And they all share the same problem which is rush to take next customer, can't pick technician they want, hidden costs were being charged at the end. It's hard to make appointment because some of the nail salon don't pick up the phone.

Customer Survey( Primary Research) :
This method will help to obtain answers by asking those research questions and get a sense of how users feel about nail salon experiences . And have more sense of empathy when they add more thoughts on what will make them feel better when using the product.

Research Insights

A total of 45 participants responded to my survey who gave me good data to begin.

- 87% of participants were female and the other 13% were male. The Male participants started to exit out of the survey after the question about nail salon started. It gave me an idea about the target users.
- Most of them will be female from 18 - 36 years old who like to pamper their nails more.
- 63.6% got their nails done occasionally
- 18.2% of them got their nails done monthly
- 80% don't have a habit of checking out the Nail Salon Website but using Google and Yelp instead.

It helps me to understand Google Ad will be a great way to increase traffic and a catchy website can get more attention if they find the link through Google.

2. Define Phase:

Persona

After finished discover phase, I was able to established a persona below. A persona helps me to understand user behaviors and thoughts while using product. Primary user - Kat Smith is currently in college and also a beauty influencer on Youtube and Instagram. Kat likes to look pretty for her content. She is an Iphone user and love to eat at unique restaurant and has her plans organize on Asana. It shows she is an detail oriented person. She likes simple interface but unique in it own way. 

Plan Image

Empathy Map

Empathy map helps to synthesis observation about Cynthia’s thinking, feeling and her pains while shopping online. Uncover user’s needs and guide us to the right direction for an intuitive and effective website design.

Site Map

Understand how users interact with categories and apply the right taxonomy to the navigation bar. It's important to sketch out the sitemap first and see what I miss in the big picture.

Task Flow

A task flow is a diagram that represents a user's journey through a specific task. This task is to show user's journey in booking an appointment.


3. Create Phase:

Fidelity Concepts

Based on the site map and flows I created above, I started my sketches after getting inspiration from Dribble and Behance. Also, brought the insights from research phase to ensure that I will have an responsive website.

Concept Image

1. Low-Fidelity

I created low- fidelity concepts to generate as many unique ideas as possible and disregarded.

02. High Fidelity

Apply what we came up with in our research and brand color to the low fidelity to having our high fidelity.

Concept Image

Design System and Logo

We created a design system that would not only build the consistency but also save time for the client as they build new features. This will improve the overall process and experience for the website.

Style Image
Style Image
Style Image
Style Image

Demos And Pages

Limitations bring out the best in a situation, which is why we keep Small Studio a nimble little setup. Team members are - by necessity - highly experienced, skilled, confident and innovative.

Case Page Image

Home

Case Page Image

Services & Pricing

Case Page Image

About Us

Case Page Image

Book Appointment

User Testing Findings and Reflections

From the usability testings, participants could complete the tasks with ease. They came up with some feedbacks regarding to images for the services. They find it useful to include image and thorough descriptions which clarifies to the users what they are about to get. Some users don't like the illustrations for technicians. They think real photos will be better. Iteration is a must to make a better visual hierarchy.