User Interface Design by Zepei Zhao
SOHO Nails & SPA is located in little Tokyo, Los Angeles, who provides full service manicure and pedicure treatments. They offer the latest in colors, design and technology from the most reputable names in nails, also aiming at providing customers with professional full body waxing and exclusive eyelash extensions.
I chose this particular store because of their high quality products and services. However, their website is not pretty and professional enough to attract users and customers.
Initial Website State
I felt I could redesign this website by changing tacky color matching, plain styling, uptight layout and unsightly images.
Persona Hypothesis
Based on the conversation with customers and the store owner, I categorized the users into two types:
1. Frequent customers (Primary Persona): They regularly enjoy services in this store.
2. One-time customers (Secondary Persona): They may find this store by chance and want to make a change.
User Interviews
In order to focus on the user's experience, I designed interviews separately for primary persona and secondary persona with questions which intend to explore important aspects from users' perspective when they choose a beauty service store. For each persona, five interviews were conducted by visiting the store and contacting customers on yelp. The interview questions are as follows.
Frequent Customers
1. How often do you go to the nails or SPA store?
2. What are the considerations when choosing a nails salon?
3. Have you ever booked an apartment on their website?
4. Which type of media will attract you most? (Photos, Comments, Videos, etc.)
5. What is the process when you are going to choose a nails salon?
6. What kind of services do you usually enjoy in nails and SPA salon?
One-time Customers
1. How often do you go to the nails or SPA salon?
2. What are the most important considerations when choosing a nails salon?
3. Have you ever booked an appointment on their website?
4. How many different nails stores have you been?
5. What are the factors that will make you unwilling to visit the store again?
6. What kind of services do you usually enjoy in nails and SPA salon?
After reviewing and organizing my interview notes, I constructed the primary persona for this business. Let us focus on the goals and needs of a representative named Caroline.
Primary Persona
Frequent customers
User Stories
After getting familiar with the needs and goals of primary persona, I worked on transferring users need into system requirements based on the persona hypothesis and interviews.
Use Cases
I wrote three use cases which were important for the website to implement.
Sitemap
After defining the main use cases and features, I created a site map to demonstrate the high level structure of the website, using Sketch.
Final version of site map
User Flow
User Flow shows the path how users interact with the pages and features to complete a task. Take "Make an Appointment" as an example:
User Flow for "Make an Appointment"
Wireframes
A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. To show the basic structure of a page before visual design, I created wireframes with Sketch.
Visual Design
Next, I added visual design to mobile responsive wireframes. The top-level designs are shown as follows:
Prototype
In visual and prototype design, I took Adobe XD as the tool. To finish prototyping, I linked pages and buttons to make a clickable prototype based on the logic of use cases and user flows.
Part of prototype
You can play with the prototype by clicking HERE
Prototype Scripts
I wrote two main prototype scripts which I think are important for this website. One is making an appointment, and the other one is exploring the gallery. The scripts are as follows:
Usability Testing
Research Plan
Usability testing is a way which evaluates how easy to use something by testing it with real users. Users are asked to complete tasks, typically while they are being observed by a researcher, to see where they encounter problems and experience confusion. This part includes goals, assumptions, questions, tasks and results.
Goals and Assumptions
- Users will be able to browse store’s introduction, menu, photos and videos
- Users will be able to follow the steps to make an appointment
- User will be able to input their information correctly and manage their account
- Users will be able to submit information or requests
- User will be able to explore ways they can get contact with the store
User Profile
Person who does nails or massage or waxing or eyelash at least twice a year
Screener Questions
1. When is the last time you did nails or eyelash or massage or waxing? (must be less than 2 years)
2. Do you live in Los Angeles? (must be ‘Yes’)
Establishing Questions
1. How did you go about having services at SOHO the last time?
2. Have you been to SOHO stores with appointments online?
3. If yes, was it easy or hard? If not, why haven’t you?
4. What is the most important reason for you to choose a beauty related store?
Tasks
Task 1: You are browsing the home page and trying to get know about this store
Task 2: Your friend did nice nails in SOHO store and she recommended this store to you. You are looking to view the menu online and explore the photos and videos gallery to see if you like this store
Task 3: You were satisfied with this store so you decided to sign up an account. In this task, please sign up an account and then sign in to check your account.
Task 4: You planned to do massage with your friend to relax, so you followed the reservation steps online and made an appointment
Task 5: You had emergence on the appointment date, you sent a message to the store for rescheduling by using contact us
Results
I conducted unmoderated tests with 4 users using Userzoom. The results are as follows:
Test Findings
Click here to view the highlight reel of tests in this project
Basically, users are satisfied with prototyping. The interactions between prototype and user are flexible and straightforward.
Improvements
Based on the users' feedback and observation of tests, I made improvements as follows:
1. Take the detailed menu as main menu so that user can choose the page directly.
2. Make "Select Staff" page more concise. In the previous version, all staff are shown in one page. While after the change, the available staff chosen by the user are shown to be selected.
Click here to see the final version of prototype
Conclusion
This project redesigned a great beauty service store's website, which provided a more elegant and attractive platform for merchants to expand their business. The whole redesign process includes defining problems, building a sitemap, creating wireframes, visual design, prototyping, testing, and making improvements so that the final version prototype could have validation for providing users with a friendly, effective and high-performance website.
