Case Study: How UX Strategies Increased Visitors Engagement

 
This case study dives into my web design process (which is different from most designers out there) and how we got double-digit analytics improvements.

I met Tess in the spring during a group program. She was different than a lot of other “business coaches” that I’d met before. She already had a super successful corporate freelance business and she wanted to take those strategies she used to grow corporations to help other online entrepreneurs grow their teams.

I could tell that she knew her shit. And, while she appreciated the impact that good user experience design can have on an online business, her own website was lacking. Some time later, she contacted me to redesign her website.

Not only did she want a website overhaul, but she needed support in transitioning from Wordpress to Squarespace.

Her Wordpress site was frustrating, difficult to manage, and didn’t showcase her as the expert that she was. She needed something that would be easy for her to manage and that positioned her as a leader in her niche.

To start with, we defined her business goals, her target market, and identified competitors.
One of her top goals was to get more organic traffic to her website. She wanted to grow her email list and generate more client leads.

We worked on her positioning.

We discussed colors (and did an audit of competitor’s color palettes) and identified tone words for her brand (confident, creative, and direct). It was easy to position her as unique from her competitors because, rather than focusing on systems and outsourcing for productivity, she coaches entrepreneurs in building their virtual teams to establish and expand their online empires.

I dove into her current site and did a content audit.

By pulling out all of her existing copy into Google docs, I could easily visualize the flow of content and make suggestions for copy tweaks and improvements. In this stage, we developed a sitemap and agreed on the navigation.

Then it was time for wireframes (like website blueprints)

Unlike many other designers that start with “branding” (doing colors, fonts, and other aesthetic choices), I always start with the copy. I use a content-first approach to design because my number one priority when designing a website isn’t the looks, it’s the user experience.

By crafting a delightful experience for your users (or visitors, readers, audience, etc.), you’ll not only keep them coming back, but you’ll position yourself as someone that’s credible and professional.

By making it about your audience and not about you, you remove a lot of frustration AND you craft a website that works.

So, what exactly are wireframes? You can think of them as a blueprint for your website. Essentially, if you took your website and made in grayscale (removing the colors) and added in placeholders instead of specific images, then you’d have a wireframe.

Now it’s time for aesthetics (colors, fonts, and photos, oh my!)

Contrary to most other designer’s workflows, I actually do the brand aesthetics at the end of the design process. The reason for this is so that I can design for the content in a way that is user-friendly and aligns with the business goals. By removing the colors and images, I can focus on these two essential things.

User Testing

I performed user testing during the wireframe and design stages. I used user feedback to select the primary header color and to compare the credibility judgments before and after the website redesign. I use Usability Hub (paid) and Peek (free) for quick and easy user testing.

Developing the Squarespace site

Did you notice how I didn’t mention Squarespace templates at all in the above process steps? That’s because I don’t design for a template. I design for the business goals and user experience.
I see this happen all the time: you’ll find a beautiful Wordpress theme and buy it and then try to fit your content into that mold. That’s not the way to go. I always recommend starting with YOUR content, business goals, and target market and design from there.

Squarespace is easily customizable.

The key when selecting a Squarespace template is to look at the layout and functionality of the template, rather than the design aesthetics.
For example, I might choose the Horizon template, because I like the way the navigation is presented and the fact that I can create full-width background images easily. But the end result won’t look anything like the original Horizon template.

The Results: One-Month Post Launch

Now for what you’ve all been waiting for… the epic results! In just one month after launching Tess’s new site, she saw some extraordinary double-digit improvements in her engagement metrics.

  • 30% increase in number of sessions
  • 30% more pages viewed in each session
  • 70% increase in overall page views
  • 20% decrease in bounce rate
  • Over 2x increase in returning visitors
  • Mobile traffic tripled
  • Organic search is now the #1-way visitors are acquired

Check out these before and after metrics:

Take a look at Tess's page views and bounce rates before we redesigned her site.
And compare that to Tess's page views and bounce rate after we launched her new site. The improvement is incredible!
Before we redesigned Tess's website and switched her over to Squarespace, organic traffic was her lowest source of traffic.
Within just one month of launching Tess's site on Squarespace, organic search was her number one source of visitors! This was one of her business goals for the new website.

The moral of the story is this: user experience matters much more than aesthetics. By designing with your business goals and target audience in mind, you can craft a user-friendly website that gets way more engagement.