Tribyl Case Study

Introduction

Enterprise SaaS products are hard to build. Not only does it take a lot of work to figure out what features to build, in which order, and how they should work, but it’s also especially challenging to strike a balance between the amount of information displayed at any given time and the cognitive load that the platform poses on its users.

As the company acquires new customers, new features and requests will start to pile up and that means potentially hiring new designers and developers to keep up with the release cycle. With more people in the team, the risk of inconsistencies of design elements increases, introducing costly bugs and hurting the overall usability of the product.

About Tribyl Inc.

Tribyl’s product is not your typical CRM. It’s a powerful platform that allows sales reps to leverage business intelligence across all parties involved in closing an enterprise deal. But it doesn’t stop there. Tribyl also uses machine learning algorithms to make smart recommendations to the sales reps on what to say, how to say, when to say and who to talk to for more insights.

When they approached us in early 2019, they had a validated MVP with a one early adopter client. Their challenge was: how can we ensure that the internal team will be able to scale the production of the platform while maintaining a consistent experience that appeals to new customers?

The Challenge

“The main challenge for WANDR’s strategy and design team was to enable scalability without sacrificing consistency in the experience.”

Execution

Understanding the Product

The WANDR and Tribyl teams held several discovery and brainstorming sessions throughout the first part of the engagement. We had a good mix of in-person and remote sessions during the first couple of months. These sessions allowed the WANDR team to examine the existing flows for each feature and to gain insight into how they work together to help reps and account executives close deals.

For the first modules of the product, the Tribyl team created some very helpful mockups in Google Slides that helped us wrap our heads around how a certain feature worked.

Once we started to work on the new modules, we had to conduct a UX Audit of what was in development in order to propose more usability improvements.

Original demo interface:

Initial wireframes

Creating a Robust Design System

WANDR has been helping B2B SaaS companies to scale their product for a few years now. What we’ve found is that it’s tricky to scale systems that are already complex. A better approach is to break the system down into its most simple components.

Tribyl’s development team already had some React-based components that accounted for most of the functionality but were not modular –meaning they couldn’t be combined to create larger organisms– and therefore they were limited in what they could do.

We started by inventorizing the existing components to see what could be recycled and what needed to be designed from scratch to account for the new functionalities that were going to be created.

Once we had a good idea of what we needed, we proceeded to design the new system with a modular approach. In Tribyl’s new system, every single piece of UI can be broken down into its most basic elements like a set of LEGO building blocks.

“Design systems are the collections of components and patterns that constitute a user interface.”

There are three ways in which Tribyl’s new design system helped scale their product:

Consistency: All the modules of their product were now following the same shared visual language and set of patterns. This created a cohesive experience for the sales reps while boosting consistency across the platform making for a more which in turn reduces their cognitive load.

Efficiency and speed: Having components for the great majority of functions, there was little to no necessity for ad-hoc front-end code. With less code to write, developers can work faster, reducing the amount of work needed to develop new pages and making for more efficient release cycles.

Scalability: As Tribyl hires new developers, they can all use the same constituent components from the system and start pushing new pages and features to production in a fraction of what it took new hires prior to our collaboration.

Putting it All Together

With most of the necessary components standardized and the wireframes in place, we were now able to start designing the final pages for all the modules in the platform.

Conducting a Front-End Visual QA

Tribyl’s development team works fast. Quite often we would see new pages being deployed to the staging server in less than 72 hours. Typically we would run iterative tests during the design phase before handing the designs off to development, but given the ambitious deadlines the developers were dealing with, this became an interesting challenge for our team to overcome.

With such an aggressive development cycle, a few design details were bound to be misrepresented in the code. WANDR’s team created a methodology to audit the visual aspects of the front-end code and to keep track of all the inconsistencies. It works as follows:

1. Page Serial Numbers: We serialized all the artboards in Figma with the formula XX – ##. Where XX were acronyms for the module name e.g. Win & Loss module = WL. Then ## was the page number that each artboard represented. So the 17th page of the Win & Loss module becomes WL – 17.
2. Issues Tracker: We created a spreadsheet to keep track of all the visual issues that we found during our weekly revisions to the staging server version. This tracker was updated after every release.

Conclusion

Given the complexity of the product and the sheer number of features and moving parts, Tribyl has been one of our most challenging projects. It pushed us to come up with creative solutions to address usability and cognitive overload issues that we had not faced before and are certainly going to be very useful for the product design and SaaS communities.

We hope this case study has been useful to you. If you would like to learn more about how we solve enterprise grade design and usability problems, don’t hesitate to reach out.

‍