Ann Nails
Responsive Web Design
Ann Nails, a long-standing family-run nail salon, offers a wide array of services, including manicures, pedicures, acrylics, dip powder, eyelash extensions, and waxing, exclusively catering to the Killeen, Texas community. This business was established by first-generation Vietnamese immigrants, and over the years, they have cultivated a friendly and inviting atmosphere, making them one of the most established nail salons in the region.
Project Timeline: 5 weeks
My Role: UI/UX Designer
Tools: Figma, Fig jam & Miro
Solution
Ann Nails faces a unique challenge due to the city's transient population, primarily military personnel relocating annually. The salon's visibility is impacted by a lack of online presence and social media exposure. Despite having a website, it is limited in functionality, offering basic features like service prices and images. However, it lacks insights into the salon's rich history in the 'about us' section and the crucial capability for clients to book services online. This hampers the salon's reach and engagement with potential clients in the digital age.
Problem
By updating their existing website to incorporate features for clients to explore a portfolio of previous work, access pricing information, and delve deeper into the salon's details. Simultaneously, a visually appealing color palette will be crafted to harmonize with the redesigned physical salon space. The overarching goal is to elevate the online customer experience and fortify the salon's digital presence.
Discover
How did we get here?
Reaching this conclusion required engaging in exploratory research to gain insights into the realm of the problem, showing empathy towards users, and revealing their needs, wants, and goals.
Understanding the moving process
RESEARCH GOALSTo guide the research, our emphasis was on answering three key questions:
What technical specifications and design components are essential for clients to efficiently access information, ensuring confidence in their decision to choose the salon for their services?
Resources
How can we develop a visually appealing color palette for the website and salon space that aligns with Ann Nails' identity and meets customer expectations?
Visuality
What are the best practices and strategies employed by successful local competitors in the nail salon industry for their websites and online booking systems?
Compare
Gleaning inspiration from leading nail salon platforms
COMPETITOR ANALYSISIn the initial phase of our research, we performed a competitive analysis, examining websites of top-rated nail salons, including both local competitors and those recognized as inspirations by the client. This analysis allowed us to pinpoint strengths and weaknesses in their designs, providing valuable insights to shape our own approach.
Taking our questions to the users
USER INTERVIEWSNow that we had the lay of the land from our competitor analysis it was time to speak to the users directly.
We conducted virtual interviews and distributed surveys to both regular and occasional visitors to nail salons, exploring a range of expectations and preferences.
27 survey responses
Avg. time to complete: 4 minutes
Completion rate: 81.48%
5 remote interviews
Ages range from 24-36
30-minute to hour-long sessions
Past or potential customers
-
1. Could you walk me through your typical process when deciding to get your nails done?
• What would be your process when you looking for a nail shop you haven’t been before?
2. What factors are most important to you when selecting a nail salon?
• Ex. Is it location, services offered, pricing, or something else?
3. What specific services or features do you look for when considering a nail salon, such as manicures, pedicures, acrylics, or others?
4. How do you typically make an appointment or booking for nail services?
• Do you prefer online booking, phone calls, or in-person scheduling?
5. Can you describe an ideal experience when visiting a nail salon?
• What factors contribute to a positive experience/lasting impression for you?
6. How do you typically choose a specific nail technician or stylist when you visit a salon, and what information is important for you to have?
7. Have you ever had any memorable positive or negative experiences at nail salons that influenced your decision to return or not?
8. How do you typically find out about promotions, discounts, or special offers that a nail salon might be having?
• Ex. Is it through the website, social media, or other means?
8. When you visit the nail shop's website, what information are you typically looking for?
• What features stood out to you, that could be adopted into Ann Nails website?
9. What features or information would make the website more helpful in your decision-making process when choosing a nail salon?
10. Can you describe any challenges or frustrations you've encountered on the website in terms of navigation, information, or design?
11. Are there any specific design elements or color schemes that you find attractive or off-putting on a nail salon's website?
• When looking at a pricing page, do you prefer it to be a PDF image that can be downloaded or a typical website layout?
12. What would drive/persuade you to use online booking through the website instead of calling in or in person?
• What would be your ideal online experience when booking nail services, from visiting the website to completing the booking process?
Define
What did we learn?
Analyzing the data gathered from our research to identify primary users and the problem we can address for them.
Users are in search of support while moving, but they encounter challenges due to its complexities
AFFINITY MAPPINGBy deconstructing insights obtained from individual interviews and then reconstructing them using affinity mapping, we successfully recognized significant trends and recurring patterns.
Patterns
Pricing is a key factor in the decision-making process.
Pricing
Preferred the convenience of online booking while searching for a nail salon.
Booking
Conducted online searches to determine the most well-reviewed salons, shaping their decision based on the feedback they found.
Research
A source of frustration occurs when the website is missing crucial contact information, such as a valid phone number or accurate business hours.
Insufficiency
Primarily utilized their phone to browse a salon's website.
Devices
Needs
A collection of images displaying the nail designs crafted by the salon's technicians.
References
A site offering a transparent list of services, including detailed descriptions and pricing.
Services
Details regarding the specialties of each technician, enabling them to request a preferred technician.
Team
Desired a website that offered easy navigation and appeared regularly updated.
Navigation
The primary user: the customers
PERSONASFollowing affinity mapping, we've crafted user personas representing the intended audience for our product. One is a discerning potential customer with high expectations for her nails, and the other is an existing customer who frequents the salon a few times a year but is considering more regular visits.
How can we help?
I'd like to explore ways to help both the nail salon owner and their clients by enhancing their existing website. This improvement is essential in providing potential customers with the information they need, retaining current clients, attracting new ones and ensuring the loyalty of returning ones to generate revenue and a consistent customer base.
How might we…
…Help create a website that provides clear and comprehensive information?
…Help establish a cohesive online aesthetic that aligns with the salon's physical interior?
…Help effectively communicate and inform customers about the special promotions, services, and ongoing deals at the salon to draw them in?
Design
How can we solve this?
With a well-defined problem and a clear user base, it was time to think big and brainstorm solutions while building roadmaps for the future.
Visualizing overlapping goals
PROJECT GOALSOur end product needs to be easy for my client to maintain while still driving their business goals. At the same time, it needs to offer a pleasant and seamless experience for its customers. Luckily some simple diagramming revealed ample overlap & complementary needs!
Click to enlarge project goals
SITEMAPPINGPrioritizing ease in navigation
Our key design consideration is how to enhance the site's usefulness for users, despite the absence of online booking functionality. The goal is to make sure the site remains valuable in addressing any questions users might have before they decide to visit the salon.
Click to enlarge sitemap
Setting the foundation for testing
TASK FLOWSWith the sitemap finalized, we established two task flows for testing the overall experience. The envisioned scenario involves users visiting the site initially to gather information about the salon and check if they offer the desired services. Once confirmed, if the user is more interested, they would proceed to the team page to explore the available nail technicians before contacting the salon.
Click to enlarge task flows
Picturing the solution
WIREFRAMESWe kicked things off by sketching some low-fidelity prototypes to explore various design layouts before presenting them to the client.
Low-Fidelity
Click to enlarge low-fidelity
Following that, we transitioned to Figma to convert the sketches into mid-fidelity wireframes, providing the client with a more detailed representation of the potential designs. This allowed us to gather their feedback on preferred layouts.
Mid-Fidelity
Click to enlarge mid-fidelity
Deliver
How can we improve?
Bringing all the components into a functional prototype for further testing and prioritizing necessary revisions.
Reimaging a brand identity
BRANDING & COMPONENTSOne topic that arose in our discussions with the client was the potential redesign of their logo to align with the renovated interior of the nail salon. To address this, we began sketching several ideas to modernize the lotus element present in their current logo.
Logo
Click to enlarge user interface
While the client liked the different versions of the updated lotus element, concerns arose during our discussion. They were worried about recently printing staff uniforms with the old logo. This led us to consider focusing on the lettering, with the idea of creating a logo by making slight color edits to enhance contrast.
User interface
Click to enlarge user interface
Implementing insights gained from usability testing
ITERATIONSWe carried out four user tests to gauge completion rates, overall satisfaction, and identify any lingering usability issues. The participants included a mix of regular and occasional visitors to nail salons, with two of them being part of the initial interview phase.
In summary, user feedback presented a mix of opinions, with some appreciating the site's simplicity and others not favoring it. One initial concern was the absence of a booking system, but fortunately, many users expressed that it was more of a want than a necessity. They understood the challenges, especially in an industry where workers may not be as tech-savvy. Despite some harsh criticism, we collected references to demonstrate specific elements that many users deemed necessary to the client.
Homepage
MOCKUPSThe primary elements we aimed to feature on the homepage include an image showcasing the salon's interior, serving as an enticing visual. Additionally, we wanted to highlight promotions and benefits, showcase reviews, integrate an Instagram plugin, and introduce the concept of a "Call Now!" button that stays accessible as users scroll through the pages.
Click to enlarge
About Us
Despite users generally not frequently visiting the "About Us" page, incorporating it proved valuable in setting their salon apart. It allowed them to share their unique story and family history, contributing to the salon's distinct identity.
Click to enlarge
Services
The services page is crucial for informing users about the available services, including expected prices, and aiding them in discovering options they may not be familiar with.
Click to enlarge
Click to enlarge
It’s coming together
Team
The team page is crafted to acquaint users with the service providers and assist them in deciding whom to request when scheduling an appointment.
Live prototype
Click your way through this prototype to experience the design for yourself.
Where do we go from here?
NEXT STEPSReturn to the users for further testing of iterated flows.
Build and launch finished design in Squarespace.
Assistance in creating a booking system and incorporating extra details.
REFLECTIONPersonal takeaways
Compromise and advise: Working closely 1-1 with a single client for 5 weeks sparked crucial discussions about balancing client preferences with optimal user experience. Throughout the process, I gained insights into effectively communicating accessibility and design requirements, while finding solutions to accommodate the client's desires. Ultimately, the client was pleased with the result, which harmonized well with the salon's interior.
Design for longevity: A key aspect of this design was that the product needs to be easy for the client to maintain and update independently. This occasionally meant sacrificing advanced design elements in favor of ease.
