Uptown Salon
A small family-owned and operated salon in Marshville, NC run by Darlene for over 30 years.
Uptown Salon - Creating a new website
Project Background
A small family-owned and operated salon in Marshville, NC. Darlene has run the salon for over 30 years. Her daughter is joining the salon, and they want to bring in younger clients.
Problem
They have no website and no real consistent branding.
My Role
UX/UI Designer
Tools
Figma
Working on this project was a little different from my other projects because when I began working with the team, the project manager had already done the initial user interviews and devised an implementation plan. She decided to bring on two additional UX Designers because she wanted extra help and different perspectives about how this could be accomplished. I was brought on because of my experience in HTML, CSS, and Javascript. Unfortunately, we could not finish the project for the customer due to some medical issues that came up with one of the team members. However, here is my account of the work I completed.
Research
I worked on this project with three other UX Designers. In the first step, we decided to complete a competitive analysis to get an idea of what other salons were showing on their websites. We each would do one comparison and report back to the team the following week. I ended up looking at quite a few websites in the Middle TN area. While doing this analysis, I concluded that these salons wouldn’t be comparable because they were big time salons in a big city. The salon in Marshville was in a small town and was run by one person. So I decided to look at my small town of Spring Hill, TN, to see if any salons had a website. I found one by the name of Haven House Salon. From their website, I gathered the following:
The images were clean and crisp.
Each stylist had a small bio that included a picture of them. The biography also included what they specialized in and linked to their Instagram page to show their work.
The site included the services available at the salon, an option to find the right stylist for the customer, and a way to book an appointment online.
Once all competitive analysis was gathered, we went back to the salon owners to get their ideas on what they wanted to include on the site. They suggested the following:
No way to book appointments online. They preferred that a new customer complete an interest form instead.
They wanted a page listing of services along with a minimum price. They suggested a plus sign be added after the price since this could change based on many factors.
They loved the idea of each stylist having a bio with what they specialized in. The owners would provide the headshot of each stylist along with their social media information.
Design
We started by developing a basic site map since the salon didn’t have a website. Based on our research and conversations with the owners, this is the first draft we presented to them. Surprisingly, they approved it, understanding that this could be changed at any time. We decided that each designer would be responsible for creating the wireframes and prototypes for specific pages. We would come back the following week and discuss our progress, make suggestions, and ensure we were all sticking to the same format so the site would be consistent. I was responsible for the Interest form and the Services page.
Before we began our designs, we had a few sessions where we came up with font types and brand colors. The customer already had a new logo and wanted the site to go with this logo and have a “warm” feel. We also considered accessibility rules and compared those rules to the brand and text colors. Whenever we thought we had created the right combination of colors, it would fail on the accessibility calculator. I never thought this much would go into choosing the basic color scheme of a site. After many hours we finally came up with this pallet. This was presented to the owners, who liked the colors but weren’t too fond of the green. They agreed to keep it in but wanted to use it sparingly.
After the brand colors were approved, I began working on the Interest Form and Services page.
Interest Form
Before beginning the design, I sat down, created a few goals, and thought about a couple of things I wanted to include on the form.
The form should include a place to enter the client’s name, phone number, and email.
I needed to confirm with the owners if both phone and email would be required fields. If so, I wanted a way to show that this was required. I would suggest using an asterisk to show this.
The form should be easy to use by not being too long
The form should be easy to maintain by the salon owners. The ability to add/remove stylists and services.
The form should include a disclosure statement before the Submit button.
My first sketch included many checkboxes. The user would go down the page and check everything that applied to the stylist and desired services. I just started small to see if the owners would like this design. If they did, the plan was to add any additional questions they wanted to add.
Other salon sites inspired the second sketch. I noticed many of them used dropdown menus for their forms, so I replicated that idea.
Both of these sketches were going to be presented to the salon owners to see which one they felt would be easier to complete. While designing, a few other questions came up:
What other questions did they want to add? I needed to know this to determine how long the form would be.
How many stylists were currently working at the salon there? Did they expect to hire more? What is the maximum amount they would employ? This would help determine if checkboxes or a dropdown were better. If the dropdown had 20 stylists, a person may want to scroll through only some of those names.
What other services would be available?
How deep did they want to go with service descriptions? In the checkbox example, the services provide a general service like Color. In the dropdown example, a customer can choose a Color, then select whether they want highlights or something else.
Once I received the answers to these questions, I would’ve gone back and designed other versions of these forms. I then would have asked them to have their current customers complete the forms and get their opinions on ease of use.
I presented my sketches to the team, and they felt the form examples had too much information. They thought it should be more generic. We went on Squarespace to review some examples of Interest Forms, and I went back to the drawing board based on these inspirations.
Additional work:
The week we were scheduled to present our sketches, one of the designers had a medical emergency, and the project abruptly halted. We were expected to reconvene the following week, so I went ahead and created a high-fidelity design and changed the design again based on feedback from the team. I made it a lot simpler for the customer and the salon owners. With this prototype, I was thinking about how this information would be presented in the email sent to the salon owners after the form was submitted. I also thought that this format would work for someone who knew exactly what they wanted AND who didn’t have a clue. It was a cleaner version, in my opinion.
Services
Due to time constraints, I could only create one sketch for the Services page. It was very generic but would give them an idea of what I thought this page should look like.
I presented the sketch to the team, and they liked it. We checked out Squarespace again to get some ideas on formatting, and the ones we liked were the format I used in my sketch. That made me feel thrilled on the inside!
After the review and having another week to create my designs, I decided to focus more on the high-fidelity prototype because seeing authentic images and actual services on the design inspired me more. Here is what I came up with.
Reflections
As stated earlier, this project didn’t come to fruition, but I think I learned a lot. This was the first project I collaborated on with a group of UX Designers, and it was a fun experience because we all came from different backgrounds. A few takeaways:
You need thick skin when working with fellow designers, but it makes you better
Your first design will never be perfect, no matter how long you spend on it
Everyone’s comprehension is different so explain things in the simplest way possible. Then explain it again and again.
Being able to bounce ideas off of teammates was the absolute best. We split up many tasks and came back together to discuss and make changes where needed. This happened a lot when deciding the branding colors and creating the site map. We accomplished a lot and learned much about empathy with the salon owners and ourselves. We all had work obligations, families, and life in general, so this was the perfect mix. I wish we could have given the salon owners a finished product. Better luck next time!