Nick Conflitti: Collibra's, Arbor Design System, Case Study

Overview

The completion of the Arbor Migration initiative marked a significant milestone for our product and engineering teams. It entailed the development and launch of a new React-based front-end architecture and design system known as, Arbor.

Shift user perception of the product - Instead of people referring to our UI as "Legacy" or "Complex," we want to hear "Inviting" and "intuitive."
Create a design and development environment that is modular while being easier and faster to iterate with. to speed up our development lifecycle.

April 2022: Tech & Tool Stack

Three data visualization libraries when one will do
Separate whiteboarding and design tools
Not enough accessibility testing in place
Inefficient design system documentation CMS and process

May 2024: Tech & Tool Stack

Agreed on one data visualization library for all teams
Migrated whiteboarding and diagramming to FigJam
Added new tools for accessibility testing
Procured zeroheight for design system documentation

April 2022: Accessibility

No formal best practices or processes in place
No Centralized group overseeing accessibility
Latest VPAT was from Q3 2021

May 2024: Accessibility

Created the A11y Guild, #a11ygators. Comprised of designers, engineers, writers, product management, and QA
Outlined processes and best practices for sustainable, proactive, design and development.
Set a quarterly cadence for auditing and VPAT/ACR reporting
Fixed 12% of compliance issues within one month of auditing our new user interface and architecture in Q2 '24

April 2022: Figma Libraries

Not following atomic principles
Design kits did not align with how code was structured

May 2024: Figma Libraries

Aligned with code and atomic principles
Allowed for future iOS and Android libraries to be added

Designing a New UI

In late March I was appointed to lead the 6-week effort. We would be moving on from the initial vanilla theme called Aspen to, Banyan.

With receiving the news on a Friday, I spent the next week planning how the 6-week design sprint would work. With only six weeks to brainstorm, research, validate, and flesh out a fully functioning prototype of 4 user flows, we executed the following phases:

Week 1: Map out user flow diagrams of four drastically different user flows in the platform. This would allow us to design for different personas, layouts, and patterns
Week 2-3: Develop visual concepts and test user sentiments of the different styles against competitors and the Aspen theme. We were able to validate that there was a visual language that clearly resonated with both customers and non-customers
Week 4: Flesh out all four user journeys and create a clickable, Figma prototype.
Week 5-6: Create and deliver a knock-your-socks-off presentation to the CEO, CPO, CTO, and other members of the senior leadership team.
Week 6: We iterated on feedback from the review board and got 🎉approval🎉 to continue design and development work for the Banyan theme.

April 2023

One of the early phases of the sprint was getting qualitative feedback from customers and non-customers about initial concepts. We represented these concepts with simple screens like a login page, home page, and search results.

We researched and validated for two weeks and proved one of our design proposals was the right path forward.

May 2023: Visual Language

May 2023: Components and Patterns

Before: Homepage

After: Homepage

Before: Asset Page Overview

After: Asset Page Overview

Before: Index Page Template

After: Index Page Template

Quote: "People choose with emotion." - Felix Van de Maele, CEO, Collibra

May 2023

With the design sprint officially over, and the final direction approved, it was time to reveal the new UI to the rest of the company. When it comes to how people choose software--regardless if it's B2C or B2B enterprise--people do judge books by their covers. As Felix, Collibra's CEO, would put it in the unveiling of Banyan, "People choose with emotion."

We were all confident that the new user interface design was certainly going to make it easier for people to choose Collibra.

Company Recognition

Screenshots of zoom chats with Collibra employees praising the new redesign

June - December 2023

The second half of 2024 moved quick leading into our private beta program slated to start in September. The rest of 2024 consisted of the following work and milestones for my team and I:

Flesh out every visual language token needed for Banyan
Apply visual language to all core and shared components (~120)
Provide as much documentation as possible on components and patterns
Provide support to all scrum teams in P&E (~20)
Enforce and participate in a new UX review process created and implemented by me and other program managers
Continually field feedback from stakeholders and iterate on the platform that were not covered in the initial six-week design sprint
Launch and moderate a private beta program; ~30 customers

Supporting P&E

By the end of November 2023, the #arbor-support Slack channel was the 10th busiest human-moderated channel out of 3,528 channels at Collibra. The #arbor-support channel's purpose is for CDS and CFT to provide engineering and design support to all 20+ scrum teams of Collibra P&E organization.

Screenshot of Slack message about the Public Beta being available to all customers after a year of hard work particularly by design. The message has lots of positive reactions and special praise from the CEO.

February 2024

After we closed our private beta in October 2023, our public Beta kicked off in December 2023. The New UI Beta Program became our largest public beta program we had ever conducted with 110 customers participating (16% of our customer base).

Quote from Solutions Architect at Adidas: "The new UI looks great. It's pretty intuitive and is amazingly beautiful."

June 2024

After a two year design, build, and launch marathon, Collibra's new UI released to general audience. 91% of our customer base have Banyan enabled in at least one of their Collibra instances.

25% of those were so confident in their experience with the beta (or were just that excited to have something new), they enabled it straight to their production environments.

*Metrics are as of June, 2024 (one week of being in GA).

91%

Customers who have adopted the new UI in the first month of launch

+17.8

NPS score increase from May to June since launching the new UI

~25

Scrum teams supported through migration across NA and Europe

Goodbyes and Testimonials

Image of goodbye message from Collibra designers, engineers, and leaders to Nick Conflitti. They're all praising of his hard work, leadership, and transformation of his team and the designs he oversaw.