Designing ComputerTalk's First Help Center

ComputerTalk is a B2B enterprise contact center software delivering solutions for clients like NTPower, Kids Help Phone, and BC Ferries. I designed their first help center giving clients one place to find guides, training, and product updates without contacting support.

Role

UX Designer

Timeline

14 Weeks, 2025

Team

Developer, Product Manager, Product Marketing

Platform

Enterprise Contact Center Software

Within three months of launch, we saw

30%

fewer documentation-related support tickets

40%

increase in marketing engagement where event signups grew

1

default place support sent clients for guides and releases

GA4 showed "how-to" blog posts as our highest-trafficked pages, month after month. Though it told us people were possible looking for answers, it didn't tell us why

I started with research. I ran surveys and interviews with clients and the support team to learn how they were solving problems day-to-day. We found that users:

Could not tell if a guide was current

Did not have one place to find upcoming webinars, product updates, and more

Searched through email threads and saved bookmarks to find past guides and product updates (where of which were broken links)

Turning insights into designs

Bringing these insights to my team, we brainstormed and landed on building the solution into the contact center itself, so customer service agents could find what they needed without leaving their workflow.

That meant designing for a screen that was already full. Agents were taking live calls and monitoring queues in the same space, so the help center had to fit in without competing for their attention.

One place for everything

Instead of creating new content, we brought together what clients were already hunting for into a single Help Center module, organized by content type rather than product feature. Of these, the User Manuals was the most challenging. Setup, configuration, and troubleshooting were all there.

Across three modules, the most challenging were the manual guides.

The User Manuals contained guides across different roles and software versions. Each guide had a title and a short description, but titles alone weren't always clear, and important details were often hidden in the description. Users ended up viewing and downloading the wrong guide.

I needed a way to surface more context without overwhelming the page while keeping it accessible and simple. I explored different patterns to do that through tooltip, drawer, and dropdown.

Tooltip

Saved screen real estate But then… it required users to hover which is not accessible by default.

Drawer

Supported keyboard navigation and allows more space for detailed content. But then… with the additional white space, it felt disconnected to the usual list view.

Dropdown

It works with a keyboard and also keeps users focused in one place. But then… it requires users to take an extra action step which could be a risk if users don't notice it was clickable and had more to show.

and the winner is…

Dropdown! In testing with admins and agents, the expanded state made it obvious there was more to see, and no one hesitated over whether it was clickable.

#2 Reducing accidental actions

Agents were already working within an information heavy interface so including a row of visible action buttons per guide added more to scan and likely to click a wrong action. I replaced individual icon action buttons with an ellipsis menu: first step to reveal options and second step to intentionally select an action.

Then

Three icons per row

Download, Share, and View sat side by side and were easy to mix up.

Now

One ellipsis menu

Labelled actions show up only when they're needed.

#3 Building a shared design language

I was ComputerTalk’s first designer so we did not have a documented design system. I created their first design system using and learning Figma for the first time to show developers exactly how the user interface would look and behave before handoff.

back