Website Analytics & Improvements

User Research Web Design Google Metrics

Client Profile

Beauty and the Babes is Colorado's leading on-location hair and makeup artists for weddings and events. The owner also oversees the website, social media, and marketing.

Project Summary

I conducted a variety of UX research methods and examined available analytics to uncover opportunities for improvement on the business' website.

Project Goal

To provide evidence-based recommendations for improving website usability and increasing conversions to ultimately increase business profits

Team & Timeline

January-February 2022 • Six weeks of independent research, processing, and design; ongoing remote communication with client to continue monitoring website stats

Responsibilities

  • Qualitative research
  • Persona & requirements
  • Prototyping & usability testing
  • Web analytics evaluation

Tech & Tools

  • Figma
  • Miro
  • UXtweak, Maze, User Interviews
  • Google Analytics, Search Console, and Ads

Initial Consultation

The owner recently updated website and asked for feedback; there were several areas that needed to be addressed. And, while the client did make many of the suggested changes, I could see that there were deeper opportunities for improvement. So, I proposed a deeper dive into the site.

photos from the initial consultation showing website snapshot and information on concerns

Easy-to-Understand Annotations

Example screenshot and annotations using Figma and Annotate It! plugin.

photos from the initial consultation showing website snapshot and information on concerns

Suggested Corrections

The client clearly had vision, and I was excited to help them bring it to life in a user-friendly way.

The Challenge

I would assess the current-state of the business' digital strategy and learn more about the end-consumer's needs to ensure the business has a user-friendly and ultimately profitable website.

01. Investigate Site

  • Access connected tools
  • Qualitative research
  • Usability testing
  • User interviews

02. Define the User

  • Affinity mapping
  • Persona development
  • Website requirements

03. Craft Solutions

  • How might we statement
  • Website styleguide
  • Sketches & wireframes
  • Mockups

04. Test Prototype

  • Connect prototype
  • Prototype testing

05. Share Findings

  • Prototype v2
  • PDF of recommendations

06. Reflect on Project

  • Outcomes
  • Next steps
  • Lessons learned

Investigating the Current-State

It was important to begin by exploring the website and audience exactly as they currently exist to get a baseline for measuring success later on.

Google Tools

Problem When work began, the client and I explored their Google Metrics together - only to realize that these tools were not functioning! After a bit of conversation, I learned that in January 2021, the business underwent a name change which included included updating the URL to the website.

Solution Once we updated the URL in Google Analytics, Google Search Console, and Google Ads and refreshed their connections to WIX, all of the business' tracking and marketing resources were up and running again.

Qualitative Research

Then, I used several research methods to gain a deeper understanding the current-state of the business' website.

example from the full heuristic evaluation

Heuristic Evaluation

I performed a heuristic evaluation with Jakob Nielsen's 10 criteria to find usability issues within the website's visual and interaction design.

example from the full competitive analysis

Competitive Analysis

I performed a competitive website analysis to assess the current-state of the business' industry and to uncover trends within the market.

example from the full accessibility evaluation

Accessibility Evaluation

I performed an accessibility evaluation to uncover opportunities where the site could become more friendly and usable for ALL users.

Insight Because the client manages their own website, I would need to provide education to help them learn how to enhance their site's accessibility and make it a more user-friendly experience overall. What is the best way to teach this without overwhelming?

Insight A few norms seem to have been established on the competitors' websites like long scrolling homepages. However, the client is breaking these norms. Are the breaks in pattern working in the client's favor? Are they working in the user's favor?

Usability Testing

Next, I established five areas for usability testing and got the current website into the hands of users: business identification, initiating contact, navigating the site, impressions of style, and homepage first click. Three of these areas indicated opportunities for improvement.

graphic from navigation test results

Navigating the Site

Task Tree test of navigation with question "Where would you click to view photos of the business's previous work?"

Results 5/10 participants used Testimonials page
5/10 participants used Hair and Makeup page

Concern The client believes seeing photos of past work to be the most important part of searching for an artist; however, users are unsure of where to find these photos.

graphic from style question

Impressions of Style

Opinion Scale What is your impression of the design?

Results Average Score Rating of 4.8/5
10/10 users shared comments about what they liked
7/10 users shared comments about they they did not like

Concern While there was much praise regarding the site's overall appearance, there were several comments questioning the photo selection and text, or lack thereof, on the homepage.

graphic from first click test

Homepage First Click

Task You are trying to decide if you want to hire the business featured in the next screen. Where would you click to help you decide if you might want to hire the company?

Results 9/15 participants clicked on areas that currently have no action (photos and Home)

Major Concern Users are unsure about what to click on as there is no clear call-to-action or indication of what they should do once they land on the homepage.

User Interviews

Finally, I wanted to speak with users regarding their experiences with finding and hiring professional artists. I used the User Interviews recruiting service to connect me to potential participants.

Who Was Interviewed
  • Six females, aged 24 to 45
  • 4/6 live in Colorado
Screener Criteria
  • Interviewees must have hired or retained professional hair and/or make up artists in the last year.
Key Questions
  • What prompted you to seek out services?
  • How did you search for professionals?
  • What factors were most important when deciding which professional to hire?
graphic from affinity mapping

Affinity Mapping

I used affinity mapping to help synthesize my findings from the user interviews. It is so great to see clear insights emerge from this activity.

Defining the User

I developed a user persona to help guide the remainder of the project. I also defined what the users and business would need on the website to both be successful.

persona graphic

Persona

This persona is a synthesis of affinity mapping user interview responses, Google metrics, and insights gathered from research.

User Requirements

The users need to feel a connection to stylist and impressed by their past work.

  • Independent business website
  • Website can be found in searches
  • Trust and confidence in artist's ability
  • Artist-in-action photos
  • Finished style photos / 360° photos
  • Before and after photos
  • Testimonials from past clients
Business Requirements

The business should demonstrate authority and emphasize skill to attract clients.

  • Display awards & testimonials
  • Show off knowledge of hair/makeup through photos and videos
  • Convey excitement through site/social media personality and communications
  • Evidence from neutral, 3rd party platforms that business cannot affect

Crafting Solutions

How might we maintain the owner's recently refreshed aesthetic while incorporating evidence-based and purposeful updates? I spent time sketching structure before designing pages that increased in fidelity with each iteration. I also assembled a styleguide to capture the soft, feminine vibe that users loved while incorporating accessibility updates and assets that meet users' expectations.

example from sketches

Sketches

The Crazy 8s activity helped me get ideas down on paper so that I could explore them while wireframing later on.

example of wireframe

Wireframes

I used Miro to make up some quick wireframes to organize elements and structure the pages.

styleguide document

Website Styleguide

Major updates include a darker pink that has sufficient contrast with white and photos that emphasize the hair and makeup.

example of mockups

Mockups

Finally, adding the visual elements to the purposefully designed structure helps bring the website proposal to life.

Site Proposal

Essentially, I had developed a four-point plan for my website recommendations. However, before I could present to the client, I needed to turn mockups into an interactive prototype and validate these proposed ideas.

01. Strategically Add Content

  • Update text to demonstrate excitement and authority in the industry
  • Add Education and Awards
  • Add links to neutral, 3rd party reviews
  • Add new gallery page

02. Update Photography

  • Ensure photos throughout site feature what potential customers want to see
  • Hair & Makeup page features photos for each service listing
  • Replace heart counting modal with "enlarge photo" modal

03. Be Conversion-Focused

  • Add Wedding-specific, conversion-optimized landing page for use with Google Ads
  • Add CTAs on footer of each page to keep driving potential customers to Contact page
  • Homepage clicks focus on most important pages users want to see before making decision to hire

04. Improve Accessibility

  • Utilize a darker pink to ensure appropriate contrast with white
  • Restructure headings throughout site
  • Enable user control on form with "Reset" button option
  • Optimize error prevention on form by adding labels

Testing the Prototype

I retested the same five areas of concern with the new prototype and was pleased to see that business identification and initiating contact were still non-issues. Two more areas (navigating the site and homepage first click) had clearer, more positive results than before while impressions of style appears to be static.

graphic from navigation test results

Navigating the Site

Task Tree test of navigation with question "Where would you click to view photos of the business's previous work?"

Results 10/10 participants used proposed Gallery page

A Win! With photography of past work being so important to potential customers (as the client correctly believed), we should implement an actual Gallery page. The word "Gallery" seems to match users' mental models and they clearly know to click here for photos.

graphic from style question

Impressions of Style

Opinion Scale What is your impression of the design?

Results Average Score Rating of 4.2/5
10/10 users shared comments about what they liked
6/10 users shared comments about they they did not like

Concern The average score took a small dip, there was a bit more variance in the feedback received. Three of the six mentioned text readability (homepage text and logo) so we can look to improve that.

graphic from first click test

Homepage First Click

Task You are trying to decide if you want to hire the business featured in the next screen. Where would you click to help you decide if you might want to hire the company?

Results 10/10 participants clicked on areas that will take the user deeper into the content of the site

A Win! Users now have clear pathways for getting deeper into the website to learn what exactly they want to learn before they make their hiring decision.

Sharing with Client

Finally, I was ready to deliver my proposal to the client. I shared with them a stakeholder-friendly document of findings from research and testing; we also discussed the changes as seen in the v2 site prototype which began addressing some of the concerns from the prototype usability testing.

Reflecting on Project

I really enjoyed working with this small business to help improve their website.

Outcomes

The client was excited to see talk with me about all of the data and insights from research - and thrilled to see how it all came together in the prototype. They felt the evidence was trustworthy because they were hearing from people who would actually hire them. Here were some interesting outcomes:

  • Page views up 155% since ads were able to begin running again
  • Conversions currently at 23%
  • Dominant user is now on mobile

I love that the break in patterns paid off here. While most of the competition opts for long, scrolling homepages, Beauty and the Babes captures and converts visitors with simplicity and effective navigation.

Next Steps

The business owner and I will meet soon to discuss their feedback on the prototype and answer any questions from the takeaway document. There are a few other things I'm looking to do as well:

  • Create a mobile version of the prototype/suggested changes and run usability testing
  • Update the website and then monitor the Google Metrics. I would want to see if there are drastic changes (hopefully improvements) as we make website updates.
  • Conduct testing on the new the Wedding Hair & Makeup landing page. Revise and connect to the Google Ads to see if there is a further increase in conversion by using a conversion-optimized page

Lessons Learned

  • I focused on the desktop version of the website because it's what the client uses to manage the website and there was some early evidence when that users were about 50/50 desktop and mobile. However, it is now clear that 75% of users will be coming to the site on a mobile device (which was also supported during user interviews). I hope the client will keep me on so that I can do a mobile workup for them as well.
  • I needed hyper-specific people to interview and I didn't have access to them; but, I found a user recruitment service called User Interviews. I'm so excited that I got to get into a new tool and learn how it works. And, it helped me get the exact type of users I wanted to talk with!