The business owner does a bride's makeup
Brittany Bellanca
Brittany Bellanca
Product Designer | UX Strategist
Hey there! I'm an experienced Product Designer who enjoys creating intuitive visual interfaces and interactive experiences with multi-disciplinary teams.
Uncovering opportunities for website improvement
Research, design, and testing to create a more user-focused website for small business
Project Overview
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.
The Goal
To provide evidence-based recommendations for improving website usability and increasing conversions to ultimately increase business profits
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.
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.
6 Years in Business
500+ Clients Served
5x "Best of The Knot"
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.
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.
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.
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
I performed a competitive website analysis to assess the current-state of the business' industry and to uncover trends within the market.
Accessibility Evaluation
I performed an accessibility evaluation to uncover opportunities where the site could become more friendly and usable for ALL users.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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 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