Marcy K Salon
The Team
Software Engineer: Puskar Dev
UX Designer: Abby Harris (Me)
Client: Marcy K Salon
Constraints
Budget: $0
Time Frame: 5-weeks
Tools
Figma wireframing and prototyping
FigJam card sort
Figma Dev to collaborate with Puskar
Adobe Photoshop logo modification
UX Metrics first card sort
MS Word user interview notes, questions, and insights
Zoom user interviews
Backstory
After creating a disaster by cutting my hair on my own at 3 am, I Googled the nearest salon with 5-star reviews. Marcy K Salon was at the top, but her website didn’t work, so I waited until the next day to call her. After calling to find the prices and book an appointment, I later called again to reschedule. At the appointment, I learned about the issues she had with her previous website and offered to design her a new one and she agreed!
This is what I did to my hair... Super uneven!
Stay tuned for the end result.
Problems
1. She had to manually keep track of her appointments because they were sent to her email and got lost in the sea of her other emails.
2. Customers had to call to find an available time slot which took more of her time.
3. Everyone paid in-salon after receiving service resulting in one of her customers leaving without paying.
4. Customers had to write down their appointment, or manually add an event to their calendar to remember it.
Process
First I met with the owner, Karina to understand her business needs and get a list of all the services she offered as well as what she wanted to promote. I created a quick mockup to show her an example of what we could do. -->
She wanted to promote extensions, coloring, and haircuts to make more money since these services charge more. To promote this, I highlighted these 3 services on the home screen.
Then I met with 5 women who frequent salons to understand what questions they have when visiting a new salon, specifically if they were to visit Marcy K Salon.
They wanted to know, does she speak Spanish, does she have a specialty, what does the salon look like?
I answered these questions in the About section as well as the FAQ's on the home screen. This will help her reach a broader customer base of English and Spanish-speaking people.
Next, I conducted a card sort using FigJam to organize the 38 services she offers into categories that make sense to customers
I used this to create 6 categories that her clients can easily navigate through. I wanted to follow a similar pattern of an established company, so I took inspiration from JCPenney's salon site for the layout of the services screen.
Finally, I wireframed several versions of what the site could be and reviewed them with the developer as well as Karina. I reiterated and continued this feedback loop until we reached a collaborative agreement that met the business and customer needs and was feasible to develop in such a short time frame.
Convincing Karina
Calendly was an obvious solution to her booking problem. It sends her bookings straight to her and the customer’s calendar, and allows her to collect payment upfront to avoid non-paying customers. It integrates seamlessly with her website with customization options to match the design theme.
Other options were considered such as Google Calendar events, but it didn’t offer the same level of customization that Calendly did, nor did it have a way to accept payment beforehand. So, we threw out this idea.
I initially told Karina the website was free, however, the free version of Calendly only allowed 1 event type with 1-time frame which would leave her over or under-booked since the time frame of each service varies from 15 minutes to 6 hours. This would also create more steps for the user since they'd have to sort through all 38 services in a drop-down menu, after already searching through them on the website. To solve the problems with her bookings getting lost and without creating new problems, she needed the paid version of Calendly which was $12/month.
I took the advice of my LinkedIn connections and showed her the plans Calendly offers with the pros and cons of each. She opted for the paid version!
Logo Modification
The logo had text font and color that didn't fit the theme of the website, so I used Photoshop to remove the text, but keep the illustration. The website theme was taken from the interior design of her salon. I did keep the full logo on the booking page, for branding purposes since the full logo is on the outside of her salon.
Compromises
Puskar and I compromised on some designs I made due to the time it would take to develop them, or because it didn’t respond how we thought it would.
Image Rendering
Some of the images on the site didn’t render properly, so they don’t appear crystal clear like they did when I downloaded them from stock images. Since we were on a $0 budget, there was not much we could do to get higher resolution pictures.
A pop-up window on the home screen
I initially had a single CTA under a list of services which was confusing because each service has its own booking. We removed the single CTA and made each service clickable so that a pop-up with the booking appears for each service selected.
Embeded map
We initially had a screenshot of the map location for her salon, but this didn’t respond well, so we embedded Google Maps on desktop. For mobile, we did use the picture of the map, but we linked the address to Google Maps, so it directly takes the user to the address.
Text Filled with Image
I filled the text with an image of hair from someone she styled. I thought it was fitting since this was a hair salon, but Figma for Dev exported it as an image, not text. This didn’t respond across devices, so we used plain black text instead.
Outcome
1. Appointments are automatically added to her calendar so they won't get lost in her email.
2. Customers can view available appointment times online reducing the number of calls the salon receives.
3. Customers pay online when booking the service preventing nonpayment from recurring.
4. Customers can add their appointments to their calendar with the click of a button and will receive a text reminder, so no need to write it down or try to remember it.
Learnings
Create a detailed plan with talking points and questions before meeting with the client. This will reduce the number of meetings you need to have later on.
Communicate with the developer during the design process, so you don’t design something they can’t code.
Double-check free and paid versions of services before suggesting them to a client to avoid miscommunication.
Sometimes the developer will create things that are different than what you designed. Communication is key here.
