Digging into the I.A. of the FreshBooks Add-On Store

A Little Context

Shortly after I started at FreshBooks, I was asked to jump into a project that needed some UX love. The FreshBooks Add-On page on the marketing website was a directory of products and services that integrated with FreshBooks, but over the years it had grown to be a long page of logos, categorized haphazardly. A third party had started a redesign, and while it looked great, it didn’t solve some key UX challenges.

 

The Problem

Customers needed a simple, clear structure to find add-ons that would help them run their business more effectively. The old Add-Ons page didn’t effectively guide the user to add-ons that would be useful for them; it was simply a long list of options, haphazardly categorized.

The business also had some key needs for this project. Specifically:

  • The Product Marketing team wanted a way to feature key partners, but the proposed design used a small icon to call out those partners, so it wasn’t clear that they were featured;
  • The new design needed to be consistent with other emerging patterns on the website, which were responsive; and
  • In particular, the redesign didn’t reckon with the haphazard categorization of add-ons, and how users would effectively browse and search.
 

The Approach

While the redesign looked great, I felt the key customer need wouldn’t be met unless we stepped back and re-examined the information architecture of the Add-Ons store.

I did a card sorting exercise with customers to figure out how they’d look for add-ons (would they understand a category labelled “CRM”? We went with “Customer Management.”) I determined about a dozen categories that best fit customers’ mental model for add-ons, including the most effective labels for those categories. That simplified the categorization drastically, cutting in half the number of categories.

I recruited FreshBooks customers to complete an online card sort, and used the insights from their categorizations and labels to re-organize the Add-ons Store.

I also designed and tested a responsive pattern for searching and browsing within the section that we could apply to another key area of the website, our Support section. This helped us align the patterns across the website, and optimize them for mobile users. And, to meet the needs of my friends in Marketing, I established a Featured category as the landing page for the section.

The landing page featured a handful of add-ons that the Product Marketing team hand-picked, which was one of the project's business objectives.

Since content was a key part of this project—users needed to know what these add-ons would do for their business, how much they’d cost, how to connect them to FreshBooks, and more—I also worked closely with a content strategist to design content-first page templates.

So, I provided a mix of content strategy, information architecture, interaction design, usability testing, and visual design.

You can view it at www.freshbooks.com/addons.

 

Lessons Learned

This project’s success was built on stepping back from a redesign that had been focused on a polished UI and a business case, and asking, “What do customers need to succeed when they’re looking for add-ons to FreshBooks?” The answer was a better, simpler organization system and content structure, and a redesign that proceeded from that insight.