Website Audit & Revamp for Skintervention Studio

Mockups of skincare website
Photo of client Diane Quartel

“You've been totally ACES to work with and I am totally thrilled with what you have accomplished! We will work together again... Be warned .. lol.. 😉”

— Diane Quartel, Owner of Skintervention Studio

Overview

Skintervention Studio is a small business in Pennsylvania, U.S. specialising in aesthetician services. I completed an audit of her Squarespace website to uncover usability, accessibility, and design issues, and I made updates to the website accordingly. The owner, Diane Quartel, also hired me to add new content to the site.

Issues Uncovered by Website Audit

There were many excellent decisions made by the original designer, such as the elegant heading font and the use of blue, which is associated with tranquility and relaxation and is thereby well-suited to a skincare brand.

However, I uncovered a variety of issues to address, such as the following:

Accessibility

  • Insufficient text contrast: In order to comply with the Americans with Disabilities Act, text must have a contrast ratio of 4.5:1. In other words, text that does not contrast strongly enough with the background colour can cause issues for people with vision impairments or in low-light conditions (and is also a potential legal problem).

  • Missing alt text: Many of the images were missing alt text. Alt text is a text description that is helpful for people with vision impairments who cannot see the image itself, and it is also important for SEO.

Usability

  • Header height: A very tall fixed header took up valuable screen real estate and obscured the call-to-action button for the 16:9 screen ratio (the most common ratio for desktop computers).

  • Heading visibility: The Heading 1 and subheading were placed below a large banner image on all of the services pages, which meant that they could not be seen without scrolling down. This is not ideal because if a user lands on the page, we want them to be able to understand at a glance what value the page offers to them so that they stay on the page.

  • Image resolution: A few images were a low resolution, which can give a low-quality impression to site visitors.

SEO

  • Incorrect SEO titles: Some pages had incorrect SEO titles (for example, the “About” page had the title “Services 3”). SEO titles are important because they affect how a link appears in search results and therefore whether people will decide whether to visit the web page.

  • Missing alt text: As I mentioned, alt text is important for SEO as well as for accessibility.

Example page of audit report

Updates Based on Website Audit

The owner hired me to solve these issues on her Squarespace website. Here are two examples of my changes:

Before and after of home page

Issues Solved:

  • The text is now easier to read and has a contrast ratio sufficient to meet the Americans with Disabilities Act requirements

  • The header is thinner, taking up less valuable screen real estate

  • The call-to-action button is now visible on desktop

  • Dropdown menus in the desktop header now have down arrows to indicate that more options can be seen on hover

Before and after of service page

Issues Solved:

  • The Heading 1 and subheading are visible, which allows users to understand at a glance what value the page offers to them

  • Grainy images have been replaced with high-resolution images

New Content

The owner also wanted to add new content to her website. Here is some I added for her:

  • Credentials: I recommended that she add some of her aesthetician credentials to her home page in order to increase trust.

  • Blog: I created a blog as well as a detailed tutorial on how to create new blog posts so that the blog can go live whenever she is ready.

  • New service: Because of legal issues, the owner needed to create a separate business for her permanent makeup service called Powder & iNK Boutique. In the future, she will consider having the service on a new website, but for now, I modified the page to match the new business logo (which was designed by Jim Lebbad) and used custom code to change the logo in the site header.

Mockups of new permanent makeup page

Let’s Work Together

Think your website might be in need of some love? Get in touch through my contact form, or book a free discovery call to discuss your goals!

Previous
Previous

Consulting Website Redesign

Next
Next

AI-Generated Conversation Starter Web App Design