Accolade Website Redesign

#Research #Information Architecture #Content Strategy #Visual Design #Front-end Development

Accolade

Problem

Accolade needed a new website to meet their growing business needs. They wanted to increase visitor engagement, offer thought leadership and attract new clients.

Solution

Together with my team, we created a customized Wordpress website to meet Accolade's current and future goals. Three months after launch, I proudly reported significant increases in visitors (118%) and engagement (94%).

See the Live Site  ❯

Research

About Accolade

I started by researching Accolade itself - reading all the content on it's current website and interviewing Accolade's CEO, CFO and CIO. I learned that Accolade helps credit unions manage their balance sheets to maximize returns and minimize risk. Accolade already had a variety of advisory services under their umbrella, including investment, asset/liability management (ALM) and a few online tools. They also planned to expand into loan and strategic advisories, among other services.

Audience

Once I understood Accolade's services, I needed to learn about their audience. Accolade works with CEOs, CFOs and board members of U.S. credit unions. These executives work in heavily regulated, financial environments and need help managing their balance sheets and complying with changing regulations. In fact, many clients reach out to Accolade specifically looking for help with credit union regulators.

Based on their Google Analytics reports, I could see that many visitors were still on legacy browsers. 23% of sessions used Internet Explorer 8 (IE8), and nearly 2% still used Internet Explorer 7 (IE7). I also knew that this demographic wouldn't respond well to flat design, but was increasing in their mobile use. For those reasons, I planned a contemporary, responsive design that incoporated skeumorphism and degraded gracefully for users on IE8 and below.

Accolade

Accolade's previous website

Competitor Research

I conducted research on Accolade's largest competitor, who I'll refer to as Competitor A since due to a confidentiality agreement. What I can say is that Competitor A had a much more modern looking website with self-service tools and a visual grouping of their services that Accolade really liked.

While Competitor A's site looked nice, I found it challenging to actually learn anything about their services. To confirm my suspicions, I ran a quick usability test with internal staff. Most testers couldn't complete three simple tasks, and those who did expressed a lot of frustration.

From this research, I determined that service information needed to be complete and easy-to-find. I also persuaded Accolade to use a service visualization that offered more information scent, so users weren't pogo-sticking through their website as they did with Competitor A's.

Goals

From all of this research, I worked with Accolade to define the following goals for the redesign:

  • Provide thought leadership, easily and without the need for a webmaster's help
  • Attact new clients
  • Engage with existing clients
  • Support current services with room for growth
  • Describe Accolade's services clearly and simply
  • Support legacy browsers (IE8 and lower) and optimize for mobile
  • Streamline information architecture

Information Architecture

Sitemap

Creating the right sitemap for Accolade's site was a challenge. First, Accolade existing services could be organized and labeled in many different ways, and we tried them all. Second, Accolade was growing quickly and continued to add new services throughout the redesign, including two new services just a week prior to launch.

I pushed for card sorting, but it was limited to internal staff since some new services were yet to be announced.

Accolade Sitemap

Wireframes

I created wireframes for the home and service pages while we were iterating on the sitemap. This helped the team to visualize the content on each page, in addition to looking at the relationship between pages.

After introducing wireframes to Accolade, we had a much easier time finalizing the sitemap.

These wireframes also helped us to select appropriate Wordpress themes as the base structure of the site. We compared these wireframes against several themes and chose Avada, which had similar templates and could be easily customized to our needs.

Accolade Sitemap

Content Strategy

While creating the sitemap, I also performed a content audit on Accolade's existing site. This helped to prioritize content for the new site, and determine what resonated most with their clients. I worked closely with Accolade's CFO to bring the most relevant and accurate content to pages and blog articles on their new site. Together, we decided to create a new FAQs page to address common questions they're asked by almost all new clients.

During this audit, I also discovered that ALMonitor, one of Accolade's most profitable products, had suspicious SEO results. It was often on the first page, but never clicked. I did some quick Googling and realized that an unrelated news publication with the same name dominated the results. And there was Accolade's product towards the bottom of the first page of search results. I quickly brought this to the attention of Accolade management, and we worked together to rename the product to CUAnalytics.

Accolade Content Audit

Visual Design

I worked closely with a graphic designer to create the visual design for Accolade's new website. The graphic designer focused on the page template designs, typography and color palette. I created the majority of the in-page elements, including the mega menu, services page and visualizations, blog posts, forms, calls-to-action, buttons and sidebars.

Accolade Services visual Accolade FAQs

Front-end Development

I coded the in-page elements for Accolade's site using HTML and CSS, while the graphic designer coded the page templates using these language as well as PHP and Javascript.

I also created and ran the test plan, including mobile, browser and bug testing and documentation. Since we had to gracefully degrade in IE7 and 8, we had our hands full with minor bug fixes.

I used Asana to manage the entire website redesign, and it was particularly helpful for bug tracking, assignment and resolution.

Accolade IE8 Bugs

Success Metrics

Three months after launching the redesigned website, I reviewed the analytics and reported significant improvements in acquisition and engagement: