Andrew Nascimento | UX Designer

The Problem

CRM System Was Bloated Causing Decreased Company Productivity

CBT had an in-house built CRM system that was core to business operations, managing all customer, contact, and quote information. Users complained about its complexity and the amount of context switching required. As a result, an initiative was launched to quickly update the system within four months, which meant limiting the research & design process to one month.

Previous Design

Key Issues

Context Switching

Users frequently complained about having to switch sections within the platform, which disrupted workflow.

Finding Information

During user interviews, a recurring frustration was the time it took to access information. Most users were unaware of the system’s search function and found the filtering process clunky.

Not Inline With Company Design System

CRMgo was originally developed before the company design system existed. As a result it needed to be brought inline with the system to streamline maintenance, updates, and make it cohesive with the rest of CBT's digital platforms.

Kit Creation Complex and Frustrating

Kits are bundles of products sold at a grouped price, and they are central to the company’s quoting process. The existing workflow required a lot of training, and even after being trained, users still struggled with it.

Solution

Bringing Platform Inline With Design System

Navigation, colors, and typography were updated to align with the current design system, streamlining the user experience across all platforms.
A top menu bar with a visible search function was introduced, while still retaining access to navigation via a hamburger menu. Reclaiming the full horizontal screen space was essential to support the proper functionality of larger slide-outs.
User testing showed that when the search feature was prominently displayed in the top menu, users were more likely to use it. Those who used search were able to find the information they needed more quickly than by navigating manually.

Section titles were added to card groups to improve visual hierarchy and make content easier to scan.
Cards were given a maximum height with internal scrolling, preserving a consistent grid layout. This approach also ensured that, even on smaller viewports, a portion of the next card remained visible—encouraging users to continue scrolling.
Section links were added to the page subhead, allowing users to quickly navigate between card groups.

CRMgo Using CBT's Design System

CRMgo With Hamburger Menu Open

Reducing Context Switching

After interviewing and observing users interacting with the previous system design, it became clear that context switching was slowing them down. For example, many users expressed frustration about having to navigate to a separate contact detail page just to view a phone number or update contact information—often losing their place in their original task.
After testing various solutions, such as pop-overs and opening pages in new tabs, slide-outs were ultimately chosen.

A key challenge with both pop-overs and slide-outs was maintaining a cohesive editing experience. The final decision was to make each card individually editable, as it was uncommon for users to need to edit large amounts of information at once. In editing mode, the "Edit" button changes to a "Save" button, and all fields within the card become editable.

Customer Contact Slide-Out

Editing Customer Contact Slide-Out

Improved Filtering

Filtering options included thousands of entries. To improve load times, results were loaded in batches when a filter was expanded. This allowed options to appear instantly, without the user noticing the loading process.
Upon expanding a filtering option, a filter search is displayed to help users quickly find the options they need.

Previously, filtering was done through dropdowns, which meant filters had to be applied one by one. The new design allows users to apply all filters at once.

Browse Contacts

Contacts Filter Flyout

Contacts Filter Flyout Expanded

Contacts With Filters Applied

Streamlined Kit Creation

Kits are groups of products offered at a bundle price. The complexity arises when kits need to be nested within other kits.
Previously, a tree view was used to manage this nesting. However, this approach presented several usability issues:
- On mobile devices, the tree view became too narrow to be functional.
- Navigating kits with hundreds of items—especially when those kits included other large, nested kits—quickly became overwhelming. Users struggled to scroll through the content to find what they needed.

To address these challenges, a slide-out panel for kit creation was made. Within the panel, users can create and manage nested kits. A breadcrumb trail at the top of the slide-out helps users navigate the nested structure, making it easier to explore and organize complex kit hierarchies.

Quoted Products

Create Kit Slide-Out

Nested Kits With Breadcrumbs

Results & Impact

Future Development Time Decreased & System Made Consistent With Other Company Platforms

By applying CBT’s existing design system to CRMgo, future updates and maintenance have been streamlined. This also brought visual and functional consistency across all of CBT’s digital platforms.

Reduced Context Switching

Context switching was significantly reduced—especially when accessing contact information, which had been a major source of user frustration.

User's Time Saved

With a more prominent search bar and improved, user-friendly filtering, users can now find information more quickly. This saves time and boosts overall productivity.

CRMgo Modernization

Updating A CRM System To Increase Employee's Productivity

Project Overview

Client

My Roles

Duration