Branding, Web Development, UX Design
Pearl Hair Salon
Pearl Hair Salon is a locally owned business in Monett, MO that specializes in Paul Mitchell products and services. As a salon and spa that differentiates themselves by offering a signature Wash House Experience, Pearl Hair Salon needed a new digital presence that paralleled the quality of service they offer.
Pearl Hair Salon prides itself in offering their customers a unique Wash House Experience, and they needed to communicate this experience through their digital presence. Paul Mitchell's service framework describes the Wash House Experience as a "unique opportunity to transform a simple service into an unforgettable spa-like retreat with small yet impactful details. Soft music, dim lighting, and luxurious add-on treatments create an indulgent experience that inspires your guests to book their next appointment."
This project primarily took place between November 2016 and February 2017. I worked on this project as a freelance Web Developer and UX Analyst for Pearl Hair Salon. Throughout the redesign of the logo, branding, and online presence, I worked closely with salon owners James and Angel Probyn. I was responsible for competitive analysis, visual design, copywriting, and primarily front-end development. I also helped migrate their digital infrastructure over to Amazon Web Services and G Suite.
Pearl Hair Salon's logo was originally created as a bitmap image, limiting the ability for the salon to work with larger branding. As screen resolutions and pixel densities increased over the years, the low-resolution logo was beginning to look more and more dated. The salon owners also requested that Paul Mitchell's logo and slogan "Live Beautifully" be integrated into the salon logo as well.
Pearl Hair Salon's website was built by the owners using GoDaddy Website Builder with a template that was not tailored towards mobile platforms. While the site's navigation did shrink down into a hamburger menu, the content on the page, as well as the collapsed menu, the content did not adequately adapt to or fit smaller screens. Aware of the limitations of the site builder, they wanted the site to be more approachable and easier to navigate on a variety of devices in order increase traffic, the ability to contact, and online bookings.
As a Paul Mitchell Focus Salon, Pearl Hair Salon wanted to emphasize Paul Mitchell's branding and culture to build upon and align with an already established brand. Some products in the salon were also being replaced with Paul Mitchell products, so Pearl Hair Salon's online presence needed to emphasize this change to increase those product's sales.
Research & Discovery
According to Google Analytics, most users were accessing the site through mobile sites. Analytics also showed that many sub-pages for products and services were not visited as frequently. I went with the hypothesis that many users were skipping or not seeing these pages because the menu being difficult to traverse on a mobile device.
For the limited amount of content on the site, in comparison to other salon sites, the sitemap was too intricate and broad for the amount of content on the page. The site felt too fragmented by having to visit individual pages for small bits of information. To figure out what information people online were actually seeking about hair salons, I looked at online reviews and comments on social media for Pearl Hair Salon and other salons. Many people ask for prices of products and services, hours of operation, and the ability to make appointments by phone or online.
As a Paul Mitchell Focus Salon, Pearl Hair Salon typically caters to an audience that is willing and able to spend more on quality hair products and salon services. While the quality of the site in its current state at the time was better than competitors in the area, it was not necessarily on par with other Focus Salon websites. Other Focus Salons, as well as Paul Mitchell, utilize clean, bold fonts and images to support a bright, white canvas to convey their branding and message. Customers seeking out Focus Salons need to be presented with an aesthetic and quality that matches Paul Mitchell's.
Vision & Approach
Our Wash House Experience is really our bread and butter so I am trying to figure out how we can play on this concept as our niche.
- James Probyn
My first redesigns of the logo followed more of a flat design based on current web trends, imagery, and iconography of other bespoke salons. The pearl became more of a metaphorical symbol, but after a few iterations, the salon owners decided to keep a more realistic pearl incorporated in the logo. And personally, I felt like my designs looked too similar to the brand of drums sharing the same name. With the realistic pearl still on the artboard, I decided to shift my design focus to typography by using fonts that were similar and consistent to those of Paul Mitchell.
Initial wireframes and layout were built with static HTML/CSS files. I then drew inspiration from other websites with simple navigations and minimal information, such as Soma's website, with clean, bright design elements on a white canvas. After testing multi-page layouts with Pearl Hair Salon's content, I decided that there wasn't enough information to break into multiple sets of pages. Users could easily access the most relevant information they needed about the salon on a single page, with supplemental information placed elsewhere.
Instead of relying on stock imagery or raster images of pearls, I had the logo drawn by hand (I don't claim to be a visual designer, and this task was definitely out of the scope of my skill set) in Illustrator. Throughout the iterations, the most drastic changes were in color. The original designs were black and pink-toned pearls, but we settled on something more natural and in-between the two design choices with gray.
Since Pearl Hair Salon's content and services don't change often, I decided to build the site statically. In addition to being more secure, small sites built statically can load incredibly fast and are cheaper to host and operate. The website is a single-page scrolling style landing page created using Creative Tim's Rubik framework that's built on Bootstrap. To learn more about working at Pearl Hair Salon or services they offer, viewers can tap/click on the site to open a modal with more information. At first, I was hesitant to use modal, but no further action is taken when they are expanded. Collapsing the modal with a tap or click appeared to be a simpler navigation method than having the user return to the landing page from a separate screen.
According to Facebook statistics, our new site reached out to 886 people on launch day. That's the most any of our posts have reached. I know that's not a lot for a large company, but for our little salon, it's huge!
- Angel Probyn
By hosting the site on Amazon S3 and transferring the domain to Amazon Route 53, Pearl Hair Salon reduced the cost of operating their site from $14/month to less than $3/month. Business emails, which were an additional cost on the previous hosting service, were set up using G Suite at $5/month. Having a dedicated business email account was a more efficient communication solution than having business emails forwarded to personal Gmail accounts.
People are loving the website. I woke up with a new client messaging us wanting and color and cut. She even sent a picture of what she wants from one of my before and after photos off the website!
- Angel Probyn
With the new logo in a scalable vector format, Pearl Hair Salon now had more creative opportunity with signage and branding. James got their new logo embroidered on polos, window decals made for the front of the salon and even mentioned the possibility of getting a metallic backlit sign for the front of the building.
Refinement & Retrospective
Despite the favorable impact the new site had on the business, I would like to have performed some guerrilla usability tests on the some of the basic functionality and tasks carried out on the site. I plan to implement usability testing into future iterations of the site. Even though the new website is faster to load and render than the old one, I intend to continue with optimization, especially with images and SEO. Improving site performance is a primary concern for me, and some of this can be achieved through reducing CSS code and overall minification of files.
In addition to knocking out a few bugs here and there, I would like to explore the possibility of managing the online booking service internally. Currently, Pearl Hair Salon relies on a third-party vendor for customers to book online, so clients are redirected to a different page when selecting the Book Now call to action. If the third-party vendors offer APIs to connect to, the functionality to book online could easily be built into Pearl Hair Salon's website.