Designing a responsive webpage for a local small business:
Nails by Hana website
About Nails by Hana
Whether it is to feel more put together and professional, wanting to feel pretty or just liking the way it looks, many people get their nails done professionally. According to market data from Gitnux, “73% women have visited a nail salon in the past year”.
Nails by Hana is a responsive web project that I started for my friend, Hannah. She is currently working part time as a nail technician, but has an interest in starting her own business as an independent nail artist working out of a home studio.
The goal with this website is to both attract customers by showcasing the services that the client, Hannah offers, and also provide a platform to allow customers to make appointments. Ultimately, to create a tool that would help Hannah promote and manage her small business effectively.
The project was done over 6 weeks:
-
User Research
-
Defining the problem & Ideation
Branding
-
Usability Testing
-
Final iteration & handoff
User research
Secondary Research
I first started with doing some research on other independent nail artists or technicians in the area, to understand the common practices in this industry. When doing a simple search for “nail services” on google maps or yelp, it typically only shows nail salons.
Most people usually find independent nail artists through social media, specifically instagram, which is the primary platform for them to promote and market their services.
However, 80% of independent nail artists that I found during research, do not have their own website or an online booking system. Instead, they will have a “dm to book appointment” message in their bio on their social media page to have customers reach out directly about scheduling. If they have a website, it typically only includes a waiting list or booking form, that allows the customer to enter their information, then the nail artist will contact them about scheduling. Some nail artists do have an extensive website, usually only if they are also selling other products or services, such as press-ons nails, nail technician courses, and giftcards etc.
User Interviews
I wanted to get some first hand insights on individuals who had gotten their nails done before, to understand how they go about finding and choosing different nail services, what they would expect from a nail artist’s website, and overall how can a website provide value to them.
I conducted user interviews with 3 participants, who have had their nails done professionally before. I’ve included 2 female and 1 male participants, aged between 20-45, who all had office jobs (admin, accountant, and data analyst).
Key findings from user interviews:
Only 1 participant had previously been to an independent nail artist, others mostly visit nail salons, since it is easier to find, and more convenient if going with multiple individuals at the same time
Reasons to get nails done:
Pampering / self care activity
Convenience / not good at doing own nails
To look more professional and maintained
Criteria for choosing a nail service:
Reviews (cleanliness, customer service, overall experience)
Design
Skill & technique (if people mentioned they were bleeding or experienced pain etc.)
Features people expect on a nail artist’s website (mentioned by number of participants):
Past work (2)
Reviews (3)
Menu / explanation of services (3)
Calendar / schedule for booking (2)
Key complaints from participants:
Some website do not have a price list
Some salons have booking system, but you still have to wait when you arrive for the appointment
Can get different types of service and result, even when going to the same salon (e.g. if with different technicians etc.)
Websites for beauty-related services often assume that the customers have an understanding and knowledge about the service; not everyone will know the technical terms before their first visit (e.g. shellac)
Do not like having to call to book an appointment; should be able to book appointment through the site directly or through messaging
The inability to schedule an appointment online was a common complaint among the participants in the user interview, thus I did some more research on why many technicians do not use an online booking system to automate the scheduling process. Due to the complexity of nail services, many nail technicians expressed that it is very common for customers to book the wrong kind of appointment, which can lead to errors in appointment times and wrong preparation for the client’s appointment. This is why many just opted to have the customers contact them to ensure that they are booking the appropriate appointment.
Defining the problem
To define the problem and highlight any potential opportunities, I started with creating 2 Point of View (POV) and How Might We (HMW) statements based on the insights I’ve gathered from user research.
I’d like to explore ways to help people prepare and schedule for their nail appointment, to make the process more efficient and simple, because of how complex nail services can be, especially if they have no prior experience.
How might we make it easier for people to make an appointment for nail services?
I’d like to explore ways to help individuals who have lost confidence in going to nail salons, find alternative options for their self care activity, because it can be frustrating to not get the service that they are promised.
How might we help people easily choose the nail service and artist that suits their needs and wants?
Summary of the Jasmine persona
With the research results, I was able to better understand the preferences along with frustrations of the target users, which allowed me to develop the persona, Jasmine.
All participants from the user interviews worked in an office setting. They would get their nails done for convenience and to look more professional, while considering it as a pampering experience. Since getting a manicure is often not a cheap expense (nail budget varies from 30-75+, depending on the type of manicure and designs), it is important for them to find a nail artist that they can trust to take care of them, and make them feel that this self care activity is worth the money.
The participants mentioned some specific complaints and frustrations that they encountered with other nail or beauty-related services, which includes differences in promised and actual services provided, quality of service varied with different technicians even in the same salon, long waiting times despite having an appointment, and dislike having to call to book an appointment.
These insights were helpful to create the goals for Jasmine:
Want to find a nail artist she can trust
Want to be able to easily set up an appointment
These were helpful in identifying features and contents that are essential to attract and retain customers for Hannah’s nail business, which includes information about the nail artist, examples of their work, clear understanding of the types of services provided along with pricing, reviews from previous customers, and the ability to book an appointment online.
Storyboard to illustrate how the website will help solve Jasmine, our target user’s problem
To visually illustrate how the website we are designing will resolve the problems that our target user will encounter, I created a simple storyboard of Jasmine, the persona.
To ensure that the contents of the website is organized in a way that make sense to the users, I created a sitemap to outline the information architecture of the site. I referenced the navigation and grouping categories on websites of nail salons and other beauty-related services.
In the sitemap, I’ve also included additional features that the client wants: products, and events page. However, after some discussion, since the client is planning to start operating on a part time basis, these features would not be necessary at the moment, thus we planned them as a next step for the future, as the business expands.
Sitemap for the Nails by Hana website, dotted line items indicate next steps features
Based on the problems, I’ve outlined previously, I then created 3 different task and user flows:
Account creation
Book a nail appointment
Find out if the nail artist does a dry manicure before booking an appointment
What even is a “dry manicure”, you might ask. And why is that even a task??
It is definitely a specific and almost technical question to ask, according to the client and some of the participants I interviewed, it is very important in the nail world. While it might not be as important to someone who is brand new to nails, it is important to people who care about their nail health (the target market for this business), how the nail artist will be handling the removal process, which is why I included it as one of the tasks.
User and task flows to show how the user will go about creating an account
User and task flow to show how user will book an appointment
User and task flow to show how user will look for information on the website (how manicure removal is done at Nails by Hana)
The design process
The design process starts with sketching potential ideas for the screens required for the users to be able to complete the 3 tasks we’ve outlined: account creation, book an appointment, and find out if the nail artist does dry manicures. I also included the menu and reviews screens, since all 3 user interview participants mentioned that they would expect to find these information on the website, and would contribute to their decision when considering to make an appointment.
Sketches of mobile and desktop versions of the screens
These screens were then digitized in Figma to create the mid-fidelity wireframes as I further experimented with the layout of the content.
Mid-fidelity versions of the homepage, menu, reviews and help screens on both mobile and desktop
Booking appointments was one of key features that the user interview participants expects on a nail artist’s website. The client was initially deterred by the idea of including the online booking option. She was concerned that customers might schedule the wrong appointment, which can potentially create delays in her next appointment and her overall schedule. So I worked with her to understand how we can create a process that can minimize errors when customers are booking the appointments themselves. I simulated booking an appointment over the phone with her, to determine what are the questions she would ask to ensure that the customers are booking the right appointment. This led to a step by step, survey-like booking process to cover crucial aspects that customers might not consider when they are booking an appointment, such as if they currently have a manicure on (which would require removal).
As I started designing the mid-fidelity wireframes in Figma, I realized that this booking process would require more screen than initially intended.
The main goal of the website is to help Hannah promote and attract customers to use her services. So we decided to prioritize building the service menu, reviews and FAQ pages, along with the booking process, which would be essential to attracting customers and gaining their trust. While account creation would definitely be important for customer retention, especially if Hannah plans to implement a loyalty program or points system in the future. The client’s information are collected during the booking process, and at this moment, customization of a personal profile might not be as important compared to the other tasks. So, at this point, we changed the 3 tasks: finding out services provided, booking an appointment and finding out if Hannah does dry manicures.
Mid-fidelity versions of some of the booking process screens
Click here to see the all the first draft of the mid-fidelity frames
Mid-fidelity Testing
I conducted a round of testing with the mid-fidelity wireframes while I developed the branding, with 3 individuals to understand if the flow of the screens and the current layouts made sense.
Key feedback from mid-fidelity testing:
Should prioritize “reviews”, then “about” section on homepage (reviews and previous customers’ experiences are more important when it comes it deciding if they would make an appointment)
Should include information about duration of appointment on the menu
Should include a start over button option, in case they change their mind
Booking process is longer than normal, but seemed thorough and detailed
Liked that the idea that FAQ entries expands only when people click on the question of interest
Key updates from mid-fidelity testing:
Reorganized to put reviews section, before the about/bio section on the homepage, as users find that more important when deciding whether or not to book with a certain nail artist.
Add estimated time frame to the cards in the service menu screens, so users have an idea how long the appointments will be.
As part of the mid-fidelity testing, I also did some A/B testing to determine the best way to show progress throughout the booking an appointment. All 3 participants preferred the design of a simple coloured bar (right most option), rather than a steps format.
Screen used for A/B testing to test preference from participants between 4 different progress bar variations
Snapshot of the moodboard created by Hannah, with inspirations of her brand and how she wants to decorate the studio
For the branding, I started with creating a shared pinterest board with Hannah to allow her to add any inspiration or designs she liked to understand the feeling she wants to emulate with the website and her business overall.
The overall brand values are: Professional, Creative, Honest, Elegant, Adaptive.
For the logo, we created a combination mark of a marigold flower line art with the text “Nails by Hana”. We got the inspiration to include a flower in the logo as her Japanese name “Hana” actually translates to “flower”, and marigold is Hannah’s birth flower. We also explored a few variations of the name including “with love, Hana”, “Hana Nail Co.” etc., and decided to use “Nails by Hana” as it was simplistic and easy for customers to know what kind of services she will be providing.
For the colour palette, I opted for a beige as the primary colour, as it is often associated with simplicity and elegance, and a green for the secondary colour, as it is often described as refreshing and related to growth. We wanted to allow the nail designs to stand out, and also to match the overall theme that she is planning for the interior design of her home studio as well.
For the typography, I opted for Prata for the headings, a serif font, which gives a more elegant and classic feeling, then Montserrat for the body, a sans-serif font, which is modern and also helps with readability.
Branding and UI elements for Nails by Hana
These branding elements were then applied to the wireframes, along with copy from Hannah about her services (e.g. list of services, pricing, FAQ information) to create the high-fidelity wireframes and the eventual prototype.
The final product included the homepage, reviews, services menu and help page to showcase the client’s skills and available services. Along with the booking process screens that will guide the users to ensure that they schedule the right appointment.
Testing & iterations
I conducted a round of usability testing to get some feedback with 3 participants, who have previously browsed for nail services or other beauty related websites, to determine how users will look for information on the website, as well as if they are able to successfully complete the 3 tasks: find out what services Hannah provides, book an appointment, and find out how Hannah does manicure removals. These tests were done in person, where the mobile screens were tested using the Figma mobile app.
All participants were able to complete the 3 tasks, and found it mostly easy (0-being easy; 10-being difficult):
Find out what services Hannah provides: Average 2/10
Book appointment: Average 1.3/10
Find out how Hannah does removal: Average 1.6/10
Key feedback from usability testing:
Find menu page self-explanatory and simple, liked that they can easily find more information (e.g. pricing) if needed by clicking on it
Find booking process longer than usual, but feels guided and supported, which would be especially helpful for first timers
Think the FAQ section is very educational but would not look for the help page normally, unless prompted or have a specific question (e.g. if the artist do a specific design)
Feels that Hannah is passionate about her craft and that she genuinely cares about her clients’ nail health
Want more pictures or visuals to show Hannah’s designs and skill
Key changes from usability testing:
Updated menu to show “removals”, instead of “soak off removal” to avoid any confusion, since some types of manicures must be removed physically by filing.
In booking process, should only be able to continue when the required questions are answered
Include section on menu page to guide people who have questions
Updates to screen based on usability testing (continue button only appears once user made a choice; button to guide user to help page)
Conclusion
Here is the proposed website for Nails by Hana, to peak interest and gain trust from potential customers and allow them to easily make an appointment. And ultimately allow the client to promote her services and attract new customers.
Hannah is happy with the current product, as the business is not currently active yet. However, it did get her more optimistic and excited about the prospect of actually starting her own nail studio.
-
Everyone will perceive something differently, even among your target audience group.
Everyone has different priorities, so what is considered important to one, might not be as significant to another person, and vice versa.
While it is important to consider the ideas from the client and their business goals, don’t forget to make decisions that are guided and informed by the research evidence.
-
I actually spent more than my initially allotted time on branding and logo, as we did many revisions and updates before we were happy with the final design. While I am very happy with how it turned out at the end, I definitely learned that it might be beneficial to set some ground rules at the beginning of the projects to ensure that the project can stay on the timeline in the future.
-
In terms of the overall website, I prioritized the pages that would help Hannah get started and be able to manage her budding business efficiently. The next steps would focus on taking her business to the next level:
1) Additional screens (Profile/account page, with a loyalty program; products page; events page)
2) Include more pictures and past works
3) Help the client focus on digital marketing and develop social media presence
