StandardBeagle.com

UX overhaul of visual branding and online presence

The Challenge

How might we redefine the online experience to ensure engagement with the target audience?

Our Process

From our research, we knew that CEOs are constantly under pressure to improve all aspects of the business and satisfy annual goals.

They are frustrated because they know customer experience can be improved, but they do not have the resources to hire an internal team and are not sure where to find an external team they can trust and depend on to help move the company forward.

The Solution

We needed to position our website to ensure that we were engaging CEOs and other executives to let them know we were here to help.

At Standard Beagle Studio, we wanted to create an online experience that demonstrated expertise, acumen, and trustworthiness by showcasing our success metrics, methodologies, and create a strong social presence.

While our TRU/X process was defined and followed internally, we needed to ensure that people who came to us for help understood what that meant and understand the benefits of working with us.

To achieve this goal, we knew we needed to understand:

  • The user; their pains, goals, and needs.
  • The discovery and decision-making process of those who want to work with us.
  • How the user interacts with the website and what content is most helpful for them.
  • How the information architecture might be structured to better achieve the user’s goals.

Results

The new Standard Beagle website was launched at the end of 2020.

Since launch, we’ve seen an increase in:

  • website engagement sessions
  • longer session durations
  • a lower bounce rate
  • an increase in sales

Scope

The scope of this project included UX strategy, extensive research, and full website redesign based on our findings.

Constraints

Being an internal project, we had to balance with our client projects. We spent about a year on this project.

Implementation

We implemented the strategy defined by research through design and developed the new website.

Understand

We started by conducting research to understand how people currently used our website, to determine our website usability, and to understand who came to our website for help.

System Usability Scale (SUS) 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 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 we knew there was still room for improvement.

Heatmap Analysis
We implemented Crazy Egg for a month to analysis heatmap interactions and behavior.

We found that 90% of visitors who entered on the homepage bounced after viewing the homepage. While 10% of users spend 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

With that in mind, we needed to:

  • understand what prospective clients expected to be on the homepage
  • understand what information they needed to view when visiting the website
  • confirm that we were addressing their needs

Screener Survey
We shared a screener survey to qualify and to recruit participants for our study. The survey was shared with former and ongoing clients and through our networks.

Vendor | Company Relationship Study
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 in-person and remote, depending on participant needs.

We asked decision makers the following questions:

  • Have they heard of UX?
  • When considering a third party vendor, what is important to them?
  • What helps them makes 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?

Affinity Diagram

We pulled quotes from the interviews to create an affinity diagram to help us sort through the data. Categorizing information and create insight statements based on what we found.

We found that the decision to hire a prospective vendor was influenced by many things:

  • companies are looking for value and expertise
  • want an ally to help solve problems to improve their bottom line
  • need a tested and proven method for solving problems with measurable success metrics
  • positive reputation with well known companies in their industry
  • complimentary personality dynamics
  • visually compelling case studies

Empathy Map
To create empathy with prospective clients, we created an empathy map to help us focus on their needs. Creating empathy with those we are creating an experience for helps us better understand and address their needs.

User Persona
From the data we gathered during our research, we were able to piece together a user persona. 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.

I value the help of an expert and need to find someone I can trust.

The research identified common goals and frustrations 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

Explore

Using the data collected in the understand stage of our TRU/X Process we needed to further explore how they might interact with our website.

Storyboard
Storyboard helps visualize UX needs. This particular touch point of the user journey references the discovered frustrations leading up to the point of initial contact to utilize the services we provide.

From this, we realized the importance of complementing the decision maker’s preference for research and knew we needed to clearly represents our brand as a viable method for assisting in all user experience needs.

User Journey Map
As a storyboard describes a fragment of the entire user journey, we wanted to expand on their experience to include all possible touch points with Standard Beagle and the potential emotions associated with those touchpoints. Based on our research, we created a user journey map.

This map notates the moment a decision maker realizes they need to hire an outside vendor, to the research of that vendor, discover of, and the moment they decide to contact Standard Beagle.

The journey also includes a successful hand off and documents the loyalty induced from creating a positive relationship with us. This ending of the journey highlights the ultimate goal of a successful experience with Standard Beagle and would result in positive recommendation to friends and colleagues based on their experience.

User Flow
Now that we mapped out the emotional journey of the user, we wanted to ensure that the touchpoints experienced with our website corresponded with decision makers need.

A user flow represents the path taken by a user on a website to complete a task. For our case, this task consisted of the decision maker ultimately reaching out to Standard Beagle for help, but we needed to ensure everything they require for a decision was in their given path.

Design

It was time to put pen on paper to design out solutions to address user needs. This included evaluating how we might need to adjust content.

Sitemap
We recreated the current sitemap experience, so we could better understand how we could improve the sitemap on the new website. We needed to improve the hierarchy of information presented to the best experience was available on our website.

The research indicated that a strong social presence was required, so we moved the blog to the primary navigation. We also needed to create content to expand on all the services we offered at Standard Beagle. We also wanted to streamline the about page experience.

Mid-Fidelity Mockups
We used mid-fidelity mockups to explore how we might portray the content, layout, and hierarchy of the redesigned website. We also chose to use this version of mockups first because we had a lot of discovery around how we might best implement these changes and wanted to keep our time spent on iterations minimal.

We mocked up all of our key pages to ensure we could identify all the potential layout possibility that would need to be built into the theme.

Gathering Inspiration
While we wanted to keep the core proponents of Standard Beagle branding, we also wanted to use this opportunity to add more flare and a new twist to our new website.

We started this process by gathering style inspiration. We created moodboards to identify visual elements we liked, that were on brand.

We created moodboards to help us visualize our intentions.

Typography Inspiration

Illustration Inspiration

Style Tile
With our inspiration as a basis, we wanted to solidify our style for the redesigned website.

This guide acted as a tool for us to begin applying visual styling to the mid-fidelity mockups.

High-Fidelity Mockups

We added the styling identified in the style tile to capture the look and feel of the new website. We needed to work out image dimensions, finalize content and completely represent the website in its finished state. The goal was to work out all the website complexities to spend less time in development.

Create

We needed to verify that the new look and feel complemented overall usability.

Prototype
An interactive prototype was created with the high fidelity mockups, so it could be tested internally to receive iteration feedback.

After several rounds of internal iteration, we had a viable product to be created by our development team.

Take a look at the interactive prototype here.

Validate

Since the launch of the new website, we continue to measure impact.

Google Analytics

We monitored Google Analytics to observe the new websites impact. Thirty days after launch we saw that:

  • Sessions were increased by 92%
  • User visits were increased by 95%
  • bounce rate decreased by 10%
  • session duration increased by 250%

How can UX improve your organization's value with customers? Schedule a short conversation to find out how Standard Beagle's TRU/X process would work for you.