Standard Beagle Studio

UX Analysis

The first step was to understand how people were currently using the client’s website and to determine overall usability.

SUS Usability Survey

Usability is defined as the ease of use and learnability of an object. The System Usability Survey (SUS) survey provides a reliable and valid measure of perceived usability based on user feedback from a 10 question survey utilizing the Likert scale. The SUS survey was shared with 10 individuals.

The average score was 75.5, meaning the website at the time of the study fell into the 70% percentile with a B- letter grade.

This score is higher than the average usability score of 68, meaning users had a relatively good experience using the old version of the website.

With that said, as the score moves up the scale, the better a user feels when interacting with the website as the interactions become less frustrating, so there was still room for improvement.

Heatmap Analysis
Crazy Egg was implemented for a month to analyze heatmap interactions and behavior.

The heatmap observation uncovered that 90% of visitors who entered the homepage bounced after viewing that page. While 10% of users spent more time viewing all the pages within the website — leading to the assumption that:

• 10% of users are serious, prospective clients who want to spend more time viewing the entire website

• the homepage experience could be improved with more engaging content

• the homepage offered enough information for the visitor and made the decision to reach out or look elsewhere

With that in mind, more research was needed to:

• understand what prospective clients expected to be on the homepage

• understand what information they needed to view when visiting the website to influence the decision to reach out

• confirm that addressing needs were either addressed or discover what was missing

User Research

A screener survey was shared to qualify and recruit participants for the study. The survey was shared with former and ongoing clients of Standard Beagle Studio.

The goal of the formative study was to learn about what motivates company decision-makers to engage with prospective vendors and to identify the pains and problems they experience. The study was conducted remotely with five participants.

Company decision-makers were asked the following questions:

• Have they heard of UX?

• When considering a third-party vendor, what is important to them?

• What helps them make a decision?

• How do they do research?

• What are they looking to see on a website?

• What information do we need to include to help them decide to reach out?

Quotes were pulled from the interview transcripts to create an affinity diagram to help sort through the data.

UX Research Findings

Based on the research findings, the decision to hire a prospective vendor was influenced by many things:

• companies look for value and expertise

• decision-makers want an ally to help solve problems to improve their bottom line

• they need a tested and proven method for solving problems with measurable success metrics

• positive reputation with well-known companies in their industry is a plus

• complimentary personality dynamics with the vendor also influence which vendor is chosen

• visually compelling case studies offer the evidence needed to make initial contact

Creating Empathy

The data gathered from the research helped to establish an empathic understanding of the decision-makers.

Company decision-makers have a lot of responsibility. They must think through the complexities of running a business, including looking for ways to add value for customers and employees while improving the bottom line.

The research identified common goals that company decision-makers experience.

Goals

• Find an expert to help move the company forward

• Increase revenue, customer experience, and employee experience

• Needs a better way to reach customers, provide value, and grow the brand

The Customer Journey

The decision maker’s journey was mapped out to explore all possible touchpoints with Standard Beagle and the potential emotions associated with those touchpoints.

Customer Journey Map

The customer journey map notated:

• the moment a decision-maker realized they needed to hire an outside vendor

• how they researched and discovered vendors

• what the initial point of contact looked like

• how they make a decision

• and what the journey looked like following the engagement

The journey also noted what a positive relationship would look like. Documenting the loyalty induced by creating a positive relationship.

The journey ended by highlighting what a successful experience with Standard Beagle looked like and how positive experiences often lead to recommendations to friends or colleagues.

Information Architecture

To ensure that the touchpoints experienced with Standard Beagle’s website corresponded with the customer’s needs, user flow, and sitemap diagrams were created.

User Flow Diagram

A user flow represents the path taken by a user on a website to complete a task. For this project, the task consisted of the decision-maker ultimately reaching out to Standard Beagle for help. The user flow diagram helped to ensure that everything they required for a decision was in the given path.

Sitemap Diagram

Additionally, a sitemap was created to help organize and prioritize the content. First, a sitemap depicting the old version of the website was created to see what needed to be removed or improved. The hierarchy of information was adjusted to better suit the customer needs that were uncovered from research.

The research indicated that a strong social presence was required, so the blog was moved to the primary navigation. New content also needed to be created to expand on all the services currently offered at Standard Beagle. The about page experience was also condensed and streamlined.

Mid-Fidelity Mockups

Mid-fidelity mockups were used to explore how the content would be laid out using Figma. This version of mockup was created first because there was a lot of discovery that needed to happen around how the new content might be portrayed. To keep time spent on iterations minimal, the content layout was also explored for the tablet and mobile experiences.

All key pages that would need to be built into the WordPress theme were mocked up. Throughout this process, communication with the development team was crucial to ensure the design layout was in scope.

Visual Design

Gathering Inspiration
Standard Beagle wanted to keep the core proponents of their branding while adding a new twist.

Gathering style inspiration, a mood board was created to identify visual elements that were on brand and complimented the new vision.

Style Tile
Out of the numerous mood boards that were created, the stakeholders voted on which visual representation best represented the desired direction. With the selected inspiration as a guide, a style tile was created to direct the high-fidelity mockups.

High-Fidelity Mockups

The styling was added to the mockups to create the look and feel, capturing the look and feel of the new website. This time was also used to work out image dimensions, finalize content and completely represent the website in its finished state. Responsive, high fidelity mockups were created for major pages, child pages, contact forms, and the 404 pages. The goal was to work out all the website complexities to spend less time in development.

Results

Thirty days after launch, Google Analytics was checked to record the impact of the new website.

• Sessions were increased by 92%

• User visits were increased by 95%

• bounce rate decreased by 10%

• session duration increased by 250%