Michael Harrower
02

Disciple · Chapter 02

Improving the IA of a B2B dashboard

The dashboard had a very large number of features with very little thought applied to architecture or pattern design.

Product designResearchEngineering
Scroll

The scene

Michael Harrower

Michael Harrower

Head of Product Design · Disciple

The Disciple Console is the B2B dashboard every community creator uses to design and manage their community app. Over four years, it had grown steadily and the increasing complexity was starting to cause issues.

It was tough for new customers to make connections between related features, because they were so disconnected in the platform. The product team were nervous to add any new screens, because the main menu structure had grown to an unmanageable size.

The problem

Poor IA led to an overwhelming experience that required a lot of hand-holding.

54% of customers had not progressed 2 weeks after their initial 1 hour onboarding call. 33% of usability testers (non-customers) confused the Console with the end product (the app). The team was actively choosing to combine unrelated features and functionality to avoid adding to the growing menu.

54%

Of customers didn't progress in 2 weeks

33%

Confused the dashboard with the end product

The work

I broke the project into four phases (mapping, restructuring, pattern design, and implementation), treating each as dependent on the last.

Phase 01

Mapping and research

In order to understand the breadth of the Console's functionality fully, we put together a full IA sitemap, including every section, page and major action in the Console. At this stage, it was important to focus on mapping things agnostically and not draw any conclusions.

We spent time researching other B2B dashboards, in the community space and also outside of it. Having used and appreciated the way Hubspot is organised, it became a strong influence on the project.

The Console IA Sitemap, showing every section page and major action.

Phase 02

Card sorting

Using UXTweak, we ran a card sorting exercise with existing customers and leads in our nurture list. We catalogued every area included in the sitemap without hierarchy and participants were invited to cluster/group the cards they felt were most closely related.

There were 59 respondents, including roughly 26% of active customers. Enough to give us some interesting signals.

We catalogued every area included in the sitemap without hierarchy.

The similarity matrix shows strong card pairings and potential groupings.

For each pair of cards, the intersecting cell shows the percentage of respondents who grouped these cards together.

The dendrogram shows what proportion of the participants agreed with particular card groupings.

Cards on Y axis, level of agreement (%) on X axis. Clusters closer to the left indicate that more participants agreed with this grouping.

Phase 03

A New Information Architecture

While there were some clear outliers, the card sorting data give us a pretty good picture of how the participants related features to each other in the Console. To ensure we delivered something quickly, we split the project. First release would include reorganising of the screens and the menu, but keeping the functionality on each screen the same even if it's unrelated. Following releases would include uncoupling features that shouldn't be included in the same area.

First we mapped the cards using a combination of signals from the similarity matrix and the dendrogram.

Eventually we landed on 6 sections.

Early designs included a tiered menu system as well as exploration around the relationship between the Console, the end product brand and the console user.

The final design featured tiered menu, text labels to aid accessibility and "Disciple Console" prominent top-left to reduce confusion with the end product.

"Disciple Console" now features top-left of the screen, making it clear which part of the product the user is in.

The customer app's logo and name appears in the top-right, to improve usability for those with multiple Disciple apps.

The outcome

90%

Customers make progress after onboarding (up from 46%)

100%

Of new customers understand the relationship between console and community

For a few days, there was an expected spike of noise from existing customers complaining about things not being where they expected. The remaining customers stalling were non-profits, which have historically been slower to get started. Usability tests with prospects and new customers before their initial onboarding call returned 0% confusion between the Console and the end product. And internal feature location decisions became very easy. The team has made more logical and effective decisions on where to place new features in the Console since the project was completed.

What I learned

The first impression of a product is majorly dictated by the IA.

It's hard to measure because it didn't happen in isolation, but it's clear to me this project had a huge impact on the work completed in the self-serve launch project. Without good logical organisation of features, I'm certain we would have seen significantly less activation in the users' first sessions.

More prospect/lead participants would have been beneficial.

Given existing customers were onboarded before participating in the card sorting, you could argue they were heavily influenced through our customer success team's guidance. Because leads/prospects are much less available for studies like this, they represented a small amount of the results. If I was to redo the project, I would focus on incentives to increase their representation.

Next chapter

Increasing notification opt-in with product psychology

Most members never heard from the communities they joined. A poorly-timed permission prompt was quietly killing engagement before it started.

Read it