Sometimes the website needs a refresh. Often, it’s much more than just a new coat of paint. More Moz’s homepage and product page, we knew for a while that we could use some upgrades in how that page guided users to the information they wanted, and converted them into our goals (in most cases, a free trial). Being an SEO company, we knew the main pages of the site received views. Could we convert those views into better numbers for our product?
Challenges
The old site wasn’t doing it. Position on google was good, visitors were solid, but there weren’t as many clicks as we thought there could be on the main CTAs. No big surprise, there was minimal information nor much enticing about a pair of side-by-side buttons to go find out more about the primary products. We needed to communicate better (and in a shorter space) about the value of what we offered. Once a visitor went to the product page, we needed to do even better about showing the value there, as information and design were rather sparse. Finally, the top nav was outdated and did not reflect very well where we wanted to direct people on our site. It needed work as well.
The design itself was plenty of a challenge, but there was a requirement to balance the needs of a lot of different stakeholders as well. A number of departments felt certain content needed to be included in the main page, and different people had different opinions on how to arrange the information.
Project
We used analysis software like Lucky Orange to evaluate where visitors were clicking, how often, and how far they scrolled down our pages. Research was done into competitor sites and sites used by similar SaaS products. I went through phases of planning and meetings with various stakeholders to decide what information was needed, and what kind of target numbers we were looking for with the face of the site.
The core product needed to be the focus, and offering two side-by-side options right at the top created confusion. We added spot illustrations and small bursts of copy to help guide visitors through the value of the tool, and also felt it was important to include depictions (abstracted illustrations) of what the various tools looked like. Guiding visitors through the offerings and providing multiple points of interaction through CTAs proved to help clicks and scrolls through our information. We performed some A/B testing to help determine final placement of CTA buttons and the amount of them we’d use.
Top Nav
A UX consulting company was hired to take on the project of information hierarchy of our site, and helping to develop a plan around the site map and where the top nav menus would lead. Previously they featured a very simply drop down menu, and it started to make less sense what information lived where as the site grew and the company evolved. Their assessment lead to some more clarity on the paths of our navigation, and I helped develop the new dropdown navigation which also featured a small space for some visuals we could swap in when needed.
Products Page
Besides the home page, our product page also needed some help. Modules were added to simply and effectively communicate the value of the tool, with product illustrations and testimonials to appeal to various potential users. They were designed such that as the tool evolved, we could more easily swap in values that best reflected the current offering. A header was needed and designed that better reflected Moz branding and personality.
The old product page is shown below.
And here is the new page after redesign. It focuses entirely on Moz Pro (the primary product) and also has multiple opportunities and different CTA copy for the user to get into a free trial. This design had a noticeable positive impact on both CRT to the free trial sign up as well as actual free trials.
My Roles
- Represented design in meetings with marketing and executive stakeholders
- Art direction for contractors doing parts of the design
- Visual design for prototypes and final pages
- Coordination with UX consultancy for information hierarchy
