Danielle Vernelson
Web Designs
Case Study Working on the Highspot Website During a Special “Design Week”
Goal of the project: Improve the Look of the Customer Success Stories section of the Highspot website, as well as the Highspot CTA buttons
Created while working at: Highspot
Role: UI/UX Designer
Project Details Improving the Highspot Website During Design Week
Introduction
Twice while working at Highspot, I participated in a week-long break from delivering the designs needed for marketing campaigns, and instead, our team focused on free-form design projects. The 2023 design week focused on the Highspot website. The project manager had a few different projects we could choose between, and I chose to work on our Highspot Customer Success Stories section (landing page and individual success stories), as well as CTAs on the website.
How Our Website Looked in 2022
Many of our webpages hadn’t been updated in a couple of years, and it showed. We had contrast issues, bounce rate issues, and didn’t have a clear customer journey through the site. Our CTAs (buttons and text links) were getting lost because of how we handled our colors.
Design Week 2023
What follows are Before/Afters for how I proposed we improve the look of our Customer Success Stories page, followed by my work to improve the CTAs on the Highspot website as a whole.
Customer Success Stories Page
Before:
There were several issues, as I’ve pointed out in the screenshot below. One of the biggest issues was that there was no way to filter the success stories by industry, so companies couldn’t easily sort to view just the stories they were interested in reading about. And, the design feels a bit plain and out-of-date overall.
After:
My new hero is more modern, and gets right to the important content. A horizontal filter lets users sort by the industry they’re interested in. Instead of showing full-color logos, I changed the content cards to show logos in either white or navy, against one of our brand colors. And, I added the option to feature a particular brand, with an emphasis on the customer result statistics.
Individual Customer Success Stories
Before:
There was very little standardization between case studies. Interesting stats were buried, there was so much text that readers got lost, and there were way too many circles in the left margin.
After:
The header bar is much more graphically interesting, and gives a nice preview of the content. I then recommended a summary paragraph, and “At a glance” section with stats about the solution, followed by a more detailed (but less wordy) Challenge/Solution/Results section. Finally, the reader is invited to provide their email address and download the PDF, which would give more details about the case study.
Results
I took my redesign for the Customer Success Stories section through review with the project manager, but the design was then put on hold until a future date. (There were several designs submitted for many different webpages during design week, so the project manager needed to sort through everything and make a plan for what to implement.) As of this writing, the success story pages are on their roadmap to build and launch in the future.
Highspot CTAs
Before:
The Highspot buttons and text links (also known as CTAs) had a few problems, primarily color: The buttons and links were in light teal, dark teal, and blue. And, text was also highlighted in light teal, which looked like a link to viewers. Below, I’ve added flags to highlight the issues:
Research:
I spoke with the project manager in-depth, and went on to do some research on best practices for CTAs. I put together a presentation with my findings:
After:
The main problem I addressed is to stop using blue for buttons, since it’s our primary brand color, it just didn’t stand out enough. Instead, my final recommendation was to use teal for all CTAs: Light teal when a dark background is used, and Dark teal when a light background is used. I applied a subtle gradient to buttons, and made sure contrast was high enough to be accessible.
Now, the message for viewers is clear: Teal means click.
I also recommended switching to title case (rather than all-caps) for headers, and did away with text highlights in the titles, so readers wouldn’t think the highlight was clickable.
Results
I presented my thoughts to the team that was primarily responsible for the web redesign, and even though they saw my point about a combination of blue and teal buttons being confusing, in the end they decided to continue with that combination, because that’s how it worked in the app. The lesson was, even the best ideas don’t always move forward. I was ok with it because I knew that what design week is all about exploration. And, I was proud of the solution I came up with.