Project Summary
Welcome to the Pink Salon
Orchid Nails is a local nail salon that I helped invigorate their web presence by redesigning their website to create a seamless desktop and mobile experience.
Responsibilities
UX design, user research, competitive analysis, feature ideation, wireframing, and prototyping
Tools
Figma, FigJam, Dovetail, Notion
Platform
Responsive site
Timeline
1 Month
Problem Statement
Orchid Nails needs a new coat
Operating a nail salon in the modern age is a difficult task. Salons are always finding ways to get new clients, and having a beautiful website that is easy to navigate is always a good first step to that journey. With this project, the owner of a local nail salon contacted me to reinvigorate their business's website to help separate them from the rest of the competition.
Client Meeting
Why the change?
After the initial contact, I set up a meeting to better understand my client's needs and wants, and, more importantly, why they want to redesign their site.
Complaints and wasted time
Although my client didn't have much information about their website analytics and data. They knew they had an issue with their site when they have been receiving a lot of confused callers, complaints, and comments about the state of their site.
They want to redesign their site so it's easy to navigate for potential clients so they spend less time dealing with confused callers and more time doing more productive activities.
Client needs and wants
After discussing my client's why, I wanted to know what they were envisioning for their redesigned site. They didn't have anything exactly in mind, but they knew there were a few aspects that they needed their site to have.
New Branding
My client wanted their site to mirror the aesthetic and brand that they cultivated in their salon.
Easy to Navigate
To avoid having to deal with questions that the website should answer, my client wanted the site to be easy to navigate and find all relevant information.
Online Booking
My client wanted to modernize and optimize their booking system to allow for online booking.
Preliminary Research
What's wrong?
Before diving into the meat and potatoes of redesigning the site, I wanted to see Orchid Nails' current site and make a quick assessment of what needs work.
The Home Screen
Generic
The page is nondescript. It mainly employs whites, blacks, and grays with no use of branding that is specific to Orchid Nails itself.
Unfocused
Immediately when landing on the home page I notice that there is no call-to-action. The page leads the user's eyes towards the name of the salon, but not much more. This could confuse the user to know what to do next.
Cluttered
Continuing onto the the next section of the home page, there are too many elements and too much information packed into a small section of the page. Once again the site fails to maintain focus and help users navigate the page frictionlessly.
Redundant and Unfinished Pages
The site has many redundant and seemingly unnecessary pages that are either unfinished or serves a purpose that another page on the site already accomplishes.
Competitive Analysis
What does the competition like?
I decided to look at what other salons, day spas, and related businesses are doing with their websites. I noticed a few common patterns that they employ to create a successful website experience:
-
Use of basic visual design principles that help users easily navigate the site.
-
A clear CTA that directs users to do a specific task.
-
Important information easily accessible on every page.
User Interviews
What's expected? What's needed?
To avoid falling into the trap of making assumptions for the users, I knew I needed to touch base with them. I needed to better understand what actual users want, expect, and need when accessing a salon's website.
I interviewed seven users that had recently booked an appointment at a salon by any means, whether it was over the phone, online, or in person. I wanted to know their methodology, why they use it, and what can be improved upon.
"I just waited and waited […] I need to get this done. I need a quick response time, I just need a response. So I just stopped going and switched places."
"I usually have an objective. I'm like, okay, I'm here for that purpose. Let me book it."
Three Patterns arose:
Convenience
5/7
Interviewees talked about the importance of convenience. If the site isn't easy to use or make any process easier then they won't use it.
Communication
6/7
Interviewees talked the importance of being able to communicate their needs with the salon whether it be over the phone or over the internet.
Transparency
7/7
Interviewees talked about being transparent and having correct information that is easily accessible.
User Personas
Who is this for?
After all of my research I was ready to create a persona of the model user of the salon's website. This persona kept me grounded and forced me to remember to always consider the needs of the user when designing the site.
Meet Montana
Sitemapping
Plotting out the site
To keep myself organized, I created a sitemap that accounts for every necessary page that a user will be able to access.
User Flow
The User's Journey
Before I started sketching wireframes, designing, and getting to the fun stuff I had to create a user flow to plan the user's journey when accessing the site to book an appointment.
Exit strategies
I had to make sure I considered every action that the user might have whether it be deciding ending the process or wanting to add more options.
Easy communication
I learned from my users interviews that ease of communication is extremely important to the experience when booking an appointment. Here I accounted for that by adding options to add comments and consultations to the booking process.
Booking an Appointment
Wireframing
Accounting for functionality
When going into sketching my wireframes I knew I had stay grounded. I knew that first and foremost I had to account for the site's functionality. Using my user flow and sitemap I accounted for every main page that I knew was required to make a successful, functional website.
Mobile first
From my user interviews, I learned that most users access a salon's site through their mobile device. Knowing that I made sure that I focused on making the mobile experience perfect first before I moved to desktop.
Focusing on the main feature
Booking an appointment was the main feature I knew I had to focus on. Once I finished that I could easily go onto the next pages with a clear mind.
Communication
In my sketches I accounted for the user's need for ease of communication by adding the ability to add comments and additional services during the booking process.
Going digital
When moving my sketches into the digital space I was reminded to keep accessibility in mind. I was mindful to keep the design simple and easy to digest. I was also mindful to have every element easy to click on with minimal errors.
Simplify, Simplify, Simplify
To avoid overwhelming the user with so many options, elements, and just information, I decided to simplify the calendar and removed the additional comment section on this page.
Branding
Redefining Orchid Nails
Orchid Nails isn't a new business, my client bought the struggling business and did their own reinvigorating. Tons of time and effort went into remodeling and renewing the salon only to have the shadow of its former self loom over.
Keep it pink
I was given a lot of freedom to explore different possibilities of the brand, but one of the few things they were adamant about was the color pink.
Keywords
My client also knew they wanted their brand to reflect their core values of being professional, bright, colorful, and most importantly fun.
Illustrating the logo
I wanted to stay true to the brand values by illustrating a light and simple orchid.
Choosing the right type
Knowing the parameters that my client has given me, I set out to find a suitable typeface to represent their brand. I knew it had to be something fun and bubbly, but also restrained and most importantly legible.
Final Styletile
High Fidelity
Something's not right
Now that I finished creating the styletile and updated the branding for the product, in my mind, all I had to do was just plug-in and poof it's that easy. Was I wrong. Plugging in the logo, the colors, the type wasn't enough. I stood at a creative block of knowing something was wrong but not knowing what it was.
Getting back to the basics
After spending some time thinking and getting feedback I knew I had to go back to the basics of design. I was relying so heavily on the pink that everything looked bland and nothing popped from the page. If I wanted to really highlight the brand's flagship pink I had to use it more sparingly.
Finally making it responsive
Designing the desktop screens after working on the mobile ones was so much easier. All of the heavy lifting was finished and with some minor tweaks I would be done.
Keeping the basics
I kept the basics of the design I made for the mobile screens and just expanded upon it to fit the desktop screens.
Expanding the design
In the same way I simplified the design of the calendar for the mobile screen, I expanded the design back to the full month calendar for the desktop screen.
Final Designs
Orchid Nails - The Pink Salon
Convenience
Convenience was a major factor in user motivation. Allowing the convenience of booking online was a major priority while designing.
Communication
Allowing the user communicate their needs was a major need when designing this site.
Transparency
Giving the users a transparent and informational experience allows both the user and the owner save time avoiding unnecessary calls of confusion.
Final Thoughts
Staying grounded
Throughout this case study one major theme has shown up, me going back to my roots and staying grounded. I personally, but I also think that many people, fall into the trap of losing sight of the original goal of a project, or of losing sight of the basics that I learned a long time ago.
This project let me learn and relearn to keep things simple. To keep the designs clean and simple, and to always look back at where you came from. Every moment and every project is a chance to learn something and in this case relearn something, and I hope to remember it in my future endeavors.