Nails by Hana
Responsive web design: To promote services of an independent nail artist and allow current & potential customers to make appointments
Mobile-first responsive web
Overview
Nails by Hana is a responsive website created for a local nail artist, Hannah (aka Hana), who is interested in starting her own nail business working out of a home studio. This would allow the client to showcase their skills and manage their business effectively through allowing online appointment scheduling.
Project goals
The main goal of this project is to create a user-friendly business tool to help the client promote their services, and allow them to stand out from other nail service providers, including nail salons or other independent nail techs in the area. Ultimately, to help increase awareness and sales to build a successful business.
My role
UX & UI design
Key skills:
User research
Branding & logo design
Wireframing & prototyping
Testing & validation
Timeline
Week 1-2: Empathize
Problem statement:
The client, Hannah is a nail artist that is planning to start working independently out of a home studio and create a successful nail business. My goal as a designer is to explore how I can create an intuitive product to effectively showcase the client’s skills, while making it easy for current and future customers to make an appointment to utilize the client’s services.
Ultimately, to help generate more revenue for the business.
Market research
I started with doing some research on other independent nail artist in the Greater Toronto Area (GTA) to understand the common practices within the beauty industry, along with any frequent complaints among people who get their nails done.
User interviews
I interviewed 3 individuals who had gotten their nails done before, to understand how they go about finding and choosing different nail services, their expectations of nail artist’s website, and overall how can a website provide value to them.
Week 3: Define
To clearly define the problem, along with the motivations, needs and pain points of the target users, I started with creating different resources to help visualize the insights gathered during user research the empathize stage.
Point of view (POV) & How might we (HMW) statement:
I started with creating POV and HMW statements to clearly outline the problems experienced by potential and current customers that get their nails done, to identify potential opportunities and key features for the client’s website.
User persona
Based on the results gathered during user research, I created the persona, Jasmine, to highlight any characteristics, needs and wants found among the target users.
Week 4-5: Ideate & Prototype
With the goals and pain points of the users clearly defined, I started with brainstorming different features on the website that would be essential to attract and retain customers for Hannah’s nail business.
Storyboard
To illustrate how the website will help promote the business and make potential customers feel more confident about going to the client to get their nails done.
Information architecture - Sitemap
To ensure that the content is organized in a way that make sense to the customers, I referenced the navigation and grouping categories on websites of nail salons and other beauty-related services.
(The dotted lines shows next step features that the client would want to further developed, as the business expands.)
Sketches & mid-fidelity wireframes
I first started with sketching out the key screens, including the homepage, FAQ/help, reviews and lists of services etc. Then I proceeded to build these ideas into mid-fidelity wireframes in Figma to understand how to best organize the content.
Initial sketches
Mid-fidelity wireframes
Branding
I worked with the client to develop the brand “Nails by Hana”. Using the moodboard that the client created as inspiration, I designed the logo, colours and typography based on the professional and elegant feeling that the client is trying to emulate with the website and the business overall.
High-fidelity wireframe & clickable prototype
The final product included the homepage, reviews, services menu and help page to showcase the client’s skills and available services, as well as to address any concerns or questions that potential customers may have. The website also includes a user-friendly booking process that will guide the potential and current customers to book the right appointment.
Week 6: Usability testing
I did multiple rounds of testing at various stages to ensure the design will make sense to customers and made updates based on the feedback from the participants.
Mid-fidelity testing
Through testing with 3 individuals who’ve had their nails done before, I wanted to understand if the flow of the screens and current layout is user friendly.
1) Included estimated duration of appointments in the service menu
2) Include a start over button in the booking process, to make easier for customers that made a mistake when scheduling appointments.
3) Updated to use a simple colour bar to show progress in booking, rather than a step format.
Usability testing
I conducted a round of usability testing with the clickable prototype in Figma with 3 individuals, who have previously browsed for nail services or other beauty-related websites:
Participants liked the guided booking process, as it shows the client’s attention to detail & experience, and think the process would be especially helpful for people getting their nails for the first time
Iterations from feedback:
1) Prioritized reviews section on the homepage, as it is one of the key factors that help potential customers decide if they will try a specific provider
2) Updated booking process, to only allow customers to continue to the next step when they made a selection
Final Work
Here is the proposed website for Nails by Hana, to promote the client, a nail artist’s services, allow potential & current customers to easily book an appointment. The client is happy with the current product, as the business is not currently active yet. But the client is excited to put this business tool to use to help increase sales and revenue to the business.
🌟 Key takeaways
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 on the users and customers
📑 What could I have done differently
I actually spent more than my initially budgeted time on branding and logo, as we did many revisions and updates before the client was satisfied 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.
✏️ Next steps
In terms of the overall website, I prioritized the pages that would help the client get started and be able to manage the budding business efficiently.
The next steps would focus on taking the business to the next level:
Additional screens (Profile/account page, with a loyalty program; products page; events page)
Include more pictures and past works
Help the client focus on digital marketing and develop social media presence