Uncovering opportunities for website improvement

Research, design, and testing to create a more user-focused website for small business

Project Overview
Woman working on computer

Existing State

As a business owner, the client always aimed to stay relevant and on-trend, but their recently refreshed website wasn't performing as well as expected.

Arrow pointing upward

The Goal

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

Dragging a text box onto a web screen

Highlighted Skills

Qualitative and quantitative user research, persona development, user requirements, prototyping, usability testing, website accessibility evaluation

Interesting Outcomes

This solo project began in January 2022 and last six weeks. In the month following the project, the following outcomes were observed:

+155%

Page views have increased by 155% since Google ads were able to begin running again.

23%

The current conversion rate is 23%, which is based on the visitors who have contacted the client.

Mobile

It is definitively clear that most users are accessing the client's website site with a mobile device.

business owner doing makeup for customer

The business owner does a bride's makeup

Beauty and the Babes is an on-location hair & makeup artists for weddings and events.

A young entrepreneur owns and operates this small business as a side-hustle. The business provides award-winning beauty services to brides and other clients on their special days, with a team of traveling artists who work across the state. In addition to managing the team, the owner is responsible for overseeing the website, social media presence, and marketing efforts.

Makeup compact and brush

6 Years in Business

Happy customers

500+ Clients Served

Happy bride

5x "Best of The Knot"

Uncovering opportunities for website improvement

The owner requested that I provide feedback on the website's visual appearance and user experience.

The business owner wanted to stay relevant and on-trend, so they recently rebranded their website.

While the refresh had a distinct and stylish vibe, there were areas that were very difficult to read without adequate contrast and areas that did not follow web norms or were low quality which may impact the user's perception of the business.

Decorative banner of various makeup items

Working the Project

To start, I briefly explored the current website.

The client requested a list of things they could immediately do to have a positive impact on their website. So, I completed an initial website review that focused on surface level fixes and promised that more would come as I explored the site more deeply.

Uncovering opportunities for website improvement
Icons for Google Services

Google Analytics, Google Search Console, and Google Ads

Then, I diagnosed and repaired the site's connections to Google tools.

As a small business, it's important to utilize any available resources that can contribute to success. The client and I hopped on Zoom to explore their Google tools together - only to realize that these tools were not functioning!

After a bit of poking around, I updated the URL in Google Analytics, Google Search Console, and Google Ads and refreshed their connections to WIX. Then, tada! All of the business' tracking and marketing resources were up and running again.

Through qualitative research methods, I learned more about the current-state of the client's website and industry overall.

Upon reviewing the research, two major points emerged that would need to be addressed: general site management and deviation from industry-standardized norms.

Sample from 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.

Competitive analysis document

Competitive Analysis

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

Sample from 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 it being overwhelming?

INSIGHT A few industry norms seem to have been established through competitor websites like long scrolling homepages. However, the client's website is currently breaking norms. Are the breaks in pattern working in the client's favor? Are they working in the user's favor?

5 icons representing the various testing areas

Usability testing revealed three areas of concern.

Conducting qualitative research helped me generate questions for users which were grouped into the following categories: Business identification, navigating the site, initiating contact, impressions of style, and homepage first click.

Four of the five tests were conducted in the Maze platform with 10 female users aged 26 to 58 from the tester pool. The first click test was conducted in the UXtweak platform with 15 females aged 18 and older from the user panel.

Results from navigating the site tests

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 chose Testimonials and 5/10 chose Hair & Makeup

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.

Results from impression of style test

Impressions of Style

OPINION SCALE What is your impression of the design?

RESULTS Average rating 4.8/5 with 10/10 users sharing positive comments and 7/10 sharing negative comments

CONCERN While there was quite a bit of praise regarding the overall appearance, there were still several comments questioning the photo selection and lack of text on the homepage.

Results from homepage 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 areas that have no action

MAJOR CONCERN Without a clear CTA, users do not know what to do after landing on the homepage.

User interviews allowed me to speak with people regarding their experiences with finding and hiring professional artists.

Affinity mapping exercise

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

Interviewees

  • Six females, aged 24 to 45 recruited via User Interviews

  • 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

  • Tell me about the last time you used professional hair and makeup services?

  • What prompted you to seek out services?

  • How did you search for professionals?

  • What factors were most important when deciding which professional to hire?

From research, I developed a user persona to define requirements for the revised website.

Image of persona

User Requirements

Users need to feel a connection to the stylist and be 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 and makeup through photos and videos

  • Convey excitement through site/social media personality and communications

  • Evidence from neutral, 3rd party platforms that business cannot affect

I crafted a four-point plan to meet both user and business needs in a website.

01. Strategically Add Content

  • Update text to demonstrate excitement for upcoming events and authority in the industry

  • Add Education and Awards on About page

  • Add links to neutral, 3rd party reviews

  • Add new gallery page

02. Update Photography

  • Ensure photos throughout site are content that 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 when used with white

  • Restructure headings throughout site

  • Enable user control on form with "Reset" button option

  • Optimize error prevention on form by adding labels

Image of website style guide

A multi-step design approach allowed me to refine ideas through each iteration.

I assembled a styleguide to capture the soft, feminine vibe that users loved while incorporating accessibility updates and assets that meet users' expectations.

This guide will be an essential asset for the client so they that they can maintain site consistency with future updates.

Then, I spent time sketching structure before designing pages that increased in fidelity with each iteration.

Samples from sketching

Sketches

My preferred initial step is to let my mind roam freely in divergent thinking. I find a Crazy 8s activity to be helpful for jotting these ideas down.

Example gallery page wireframe

Wireframes

I used Miro to make up some quick wireframes to organize elements and structure the pages while beginning to think about function and interaction.

Example gallery mockup

Mockups

Using Figma, I incorporated the visual components outlined in the style guide with the intentionally crafted framework to bring the website proposal to life.

I turned the mockups into an interactive prototype and validate these proposed ideas.

I retested the same five categories with new prototype to validate my proposal.

I 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 appeared to be static.

revised navigating the site 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.

revised impressions of style

Impressions of Style

OPINION SCALE What is your impression of the design?

RESULTS Average rating 4.2/5 with 10/10 users sharing positive comments and 6/10 sharing negative comments

CONCERN The average score took a small dip, there was a bit more variance in the feedback received. Three of the six negative comments mentioned text readability. We can look to improve this by investigating text sitting directly on the patterned background.

revised homepage 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 clearer pathways for getting deeper into the website to learn what they want to learn before they make their hiring decision.

samples from the stakeholder report

Sample pages from the stakeholder document

I shared a document outlining research and testing results.

Finally, I was ready to present my work to the client. I aggregated all of my work into a takeaway document that spoke directly to the client and aimed to reduce barriers to understanding.

The client report included:

  • Summaries of each activity with key findings

  • Deliverables for each activity

  • A "final" prototype which addressed concerns from the prototype usability testing

  • Detailed next steps including a request for client feedback

The client expressed joy and excitement upon seeing my work. They felt the evidence was trustworthy because they were hearing from people who would actually hire them.

Decorative banner of various makeup items

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 began 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 website 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

user interviews homepage 

User Interviews was pivotal to the project's success.

Lessons Learned

When I started this project, I decided to focus on the desktop version of the website for two reasons:

  • It is the version that the client uses to manage the website which would help with securing their buy-in, and

  • There was some early evidence when that users were about 50/50 desktop and mobile.

However, it is now clear from Google Analytics that 75%+ of users will be coming to the website 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!

Want to see more?
Explore my portfolio & learn more about my creative process