Case Study: Resonant Solutions - Julia Peden

Conceptualizing

Focus on a dyanimic and eye-catching landing page with a clear path based on the customer's needs.

Due to a limited timeline, I had to move into conceptualizing and designing the updates within a few weeks.

Working as the sole Designer for this project, I immediately had the general idea of a split screen website design in my mind the entire time, I knew that was how I wanted to visually “split” the company and the different services. So I started with some research to better understand how a split screen landing page could look and what information would be the most important to leave on the landing page.

Design Research

I quickly found this split screen design as inspiration, pulling 3 key elements into my landing page redesign:

- Bold colours separating the two sections

- Same "Call to Action" button style on both sides

- Large header text as the primary focus

icon of an arrow pointing up a path to a star at the end

Major Design Solutions

1. Modernized the company branding and established the design system

1.

Updated to a consistent and modern font: Montserrat

2.

Updated the red and blue colours to bolder and brighter tones that look better with colour overlays on images

3.

Updated the stock images to have a modern approach, focusing on humans and emotional responses in the photos

Image of odl branding on left side with updated workmark, font family, colours, and marketing assets.

2. Parsed and edited the website content

I worked closely with a copywriter to edit the existing website copy down and ensure there was a marketing spin on the content. I initiated the changes to sentences to focus on the value add to the customer and less on the company’s experience or expertise. Basically, removing all “I’ and “we” statements and restructuring sentences to have the value proposition first, to grab the attention of the audience.

This was a really hard ask and adjustment based on the President’s wants and needs to express the expertise, so I would say we only got about 50% there in regards to a true editing of the wording, however, we made substantial headway in reducing the website word count by up to 65%.

For context, we were originally working in a word document that was 64 pages.

Image of a screenshot of a word document with many pages.

3. Focused on a strong Landing Page design for clear guidance and direction

Updated the imagery and design for immediate recognition and a clear path for the user.

Image of the homepage design, split screen design - left side has a red overlay on an image reading, 'Looking for Business Solutions?' - right side has a blue overlay on an image reading 'Looking for Technology Solutions'.

4. Designed secondary “Landing Pages” for the Funding and IT sides

Organized the necessary information into new pages by combining similar information, using clear and direct headers, big visuals, and consistent Call to Action sections.

Image of wireframes for website, black arrow indicating two separate pages which are the secondary 'landing pages' for each Business and IT side.

Final Thoughts

Successfully improved the user experience on the website through visual clarity and design structure, leading the user to the right place and right action.

The final design of the Resonant Solutions website is a result of a total of 2 months of work, incorporating research and design thinking to improve the user experience. Not only did the statistics show an improvement of interactions on the website, the follow through from those users increased with a 23% increase of Funding Discovery Calls booked from the website.

By focusing the copy to the most important pieces of information and the pain points, along with an modernized brand identity, Resonant Solutions was able to define their service offering to their newly defined target market and increase the number of customers through the website's organic reach. The design solutions solved the initial user confusion and helped to better reflect the business goals and voice.

The project was completed in 2021, you can view the website here.

Resonant Solutions Website Redesign

My Role

Tools

Platforms

Initial Problem Discovery

The Problem

The audience was confused and lacked direction on the website resulting in a loss of customers.

Website Statistics & Data Analysis

Using Google Analytics, Inspectlet, and WordPress plugins, I found the following statistics noteworthy:

As of December 2020:

1.

Bounce rate of 87%

2.

Page/Session was 1.41

3.

Average Session time was 00:00:14 sec

4.

On the homepage, the scroll depth was 12%

5.

67% of sessions were from a desktop computer

Design Goals

To use graphic elements and copy to clearly indicate the separate business focuses.

To optimize the experience and direct the user to the best and quickest solution for their needs.

Conceptualizing

Focus on a dyanimic and eye-catching landing page with a clear path based on the customer's needs.

Design Research

Major Design Solutions

1. Modernized the company branding and established the design system

1.

2.

3.

2. Parsed and edited the website content

3. Focused on a strong Landing Page design for clear guidance and direction

4. Designed secondary “Landing Pages” for the Funding and IT sides

Bonus UX Feature

Results

The updated website design went live in February of 2021.

1.

Bounce rate immediately dropped by 45%

2.

Page/Session was up to 2.33

3.

On the Funding Landing Page, the scroll depth was 78%

4.

Bonus: Increase of Funding Discovery Calls booked from the website by 23%

Final Thoughts

Successfully improved the user experience on the website through visual clarity and design structure, leading the user to the right place and right action.