Salon Website Overhaul

Designing SNS Salon's new website from the ground up - complete with a brand redesign that shows off what it can bring to customers.

Role

Lead UX Designer

Platform

Mobile, Web

Time Frame

2 Months

Employer

SNS Salon + Beauty Supply

Areas

Research, Design, Strategy, Wireframing

Salon Website Overhaul

Designing SNS Salon's new website from the ground up - complete with a brand redesign that shows off what it can bring to customers.

Role

Lead UX Designer

Platform

Mobile, Web

Time Frame

2 Months

Employer

SNS Salon + Beauty Supply

Areas

Research, Design, Strategy, Wireframing

Salon Website Overhaul

Designing SNS Salon's new website from the ground up - complete with a brand redesign that shows off what it can bring to customers.

Role

Lead UX Designer

Platform

Mobile, Web

Time Frame

2 Months

Employer

SNS Salon + Beauty Supply

Areas

Research, Design, Strategy, Wireframing

Background

In Need of A Makeover

As a small family-owned nail and hair salon in Huntington Beach, CA, SNS Salon + Beauty Supply prides itself on its luxurious customer experience and strong word of mouth. Despite its in-person success however, its online presence is small and inexperienced.

When we initially approached SNS as part of a UCSD project to create proofs of concept for a site redesign, they agreed, keen to expand their customer base toward younger clients.

The final website redesign.

The original site.

Researching the Problem

Poor Branding & Functionality

After an initial round of interviews and user research with young salon-goers, we found that these users typically decide on attending a salon based on its mobile site. When it came to the SNS' site however, users were not impressed - the service menu was too small to read, the image galleries didn't show example work, and the salon's branding appeared unprofessional and therefore untrustworthy. As a result, 80% of the users we interviewed said they would have passed on going to this salon.

This led us to ask the following: How might we update the SNS website to have stronger branding and be more mobile-friendly to attract younger clients?

One major problem: the previous website lacked mobile readibility, especially for services.

We believed a mobile-focused approach worked best when developing wireframes.

Researching the Problem

Poor Branding & Functionality

After an initial round of interviews and user research with young salon-goers, we found that these users typically decide on attending a salon based on its mobile site. When it came to the SNS' site however, users were not impressed - the service menu was too small to read, the image galleries didn't show example work, and the salon's branding appeared unprofessional and therefore untrustworthy. As a result, 80% of the users we interviewed said they would have passed on going to this salon.

This led us to ask the following: How might we update the SNS website to have stronger branding and be more mobile-friendly to attract younger clients?

One major problem: the previous website lacked mobile readibility, especially for services.

We believed a mobile-focused approach worked best when developing wireframes.

Researching the Problem

Poor Branding & Functionality

After an initial round of interviews and user research with young salon-goers, we found that these users typically decide on attending a salon based on its mobile site. When it came to the SNS' site however, users were not impressed - the service menu was too small to read, the image galleries didn't show example work, and the salon's branding appeared unprofessional and therefore untrustworthy. As a result, 80% of the users we interviewed said they would have passed on going to this salon.

This led us to ask the following: How might we update the SNS website to have stronger branding and be more mobile-friendly to attract younger clients?

One major problem: the previous website lacked mobile readibility, especially for services.

We believed a mobile-focused approach worked best when developing wireframes.

Solution

Reworking the Website

After discussing our findings with SNS, we agreed that the first course of action would be to update the current branding with a more professional and luxurious design, and then to create a mobile-first site for easier scalability.

A key challenge in the redesign was the service menu - specifically over how to include item descriptions without cluttering the screen. Initially, we were split over if we should include item descriptions, create dropdown descriptions, or to forgo them entirely to save space. After quickly prototyping and testing solutions with users, we found that using dropdown descriptions worked the best.

Our new style guide directed our UI decisions.

We were debating whether to include item descriptions or not before deciding on dropdown descriptions.

Solution

Reworking the Website

After discussing our findings with SNS, we agreed that the first course of action would be to update the current branding with a more professional and luxurious design, and then to create a mobile-first site for easier scalability.

A key challenge in the redesign was the service menu - specifically over how to include item descriptions without cluttering the screen. Initially, we were split over if we should include item descriptions, create dropdown descriptions, or to forgo them entirely to save space. After quickly prototyping and testing solutions with users, we found that using dropdown descriptions worked the best.

Our new style guide directed our UI decisions.

We were debating whether to include item descriptions or not before deciding on dropdown descriptions.

Final Designs

Conclusions + What I've Learned

Finally, after updating the image gallery and about pages to include more relevant content, we conducted a round of user testing to successfully validate our prototypes before handing off our proofs of concept to SNS.

Final Designs

Conclusions + What I've Learned

Finally, after updating the image gallery and about pages to include more relevant content, we conducted a round of user testing to successfully validate our prototypes before handing off our proofs of concept to SNS.

Final Designs

Conclusions + What I've Learned

Finally, after updating the image gallery and about pages to include more relevant content, we conducted a round of user testing to successfully validate our prototypes before handing off our proofs of concept to SNS.

What went right? what went wrong?

Post-Mortem

What went right?

Time management worked excellently. Tracking tasks through a shared document allowed us to make design decisions stress-free. The design process and user testing were smooth as well, leading to a painless design process.


What went wrong?

Team management + communication. As students with different working and communication styles, we had a difficult time initially deciding our roles and contributions to the project. We found common ground eventually, and by the time we finished we had found our stride!


What I would do differently next time?

Next time, I would make sure that we are all on the same page when we begin. Ideally, we would set weekly meetings with our client to give regular updates and not leave them out of the either. I would also have loved to implement the final designs into the final website as well next time.

More Projects.

StallMate: Bathroom Kiosk

UCSD| 2023

Promotional Materials Page

Voices for Children | 2024

Voices for Children | 2024

More Projects.

StallMate: Bathroom Kiosk

UCSD| 2023

Promotional Materials Page

Voices for Children | 2024

Voices for Children | 2024

More Projects.

StallMate: Bathroom Kiosk

UCSD| 2023

Promotional Materials Page

Voices for Children | 2024

Voices for Children | 2024

© 2024 Nicholas Regli
© 2024 Nicholas Regli
© 2024 Nicholas Regli