Collibra: Redesign + Design System

The  Arbor Migration initiative was the primary initiative I worked on while I was with Collibra. I grew the team from one full-time designer to six at its largest. Within two years we redesigned the entire user interface and designed, built, implemented, and launched a new front-end architecture, and design system.‍

- - - Presentation available upon request - - -
Company
Collibra: Founded 2008, B2B Enterprise
Time Frame
2022
Role
Manager
Environment
Web Responsive
Responsibilities
Design Manager, Product Manager, Creative Director, Program Manager

Goals

  1. Shift user perception of the product - Instead of people referring to our UI as "Legacy" or "Complex," we want to hear words like "Inviting" and "intuitive."
  2. Create a design and development environment that is modular while being easier and faster to iterate with so we could increase velocity in the design and development lifecycle.

Outcomes

The new user interface, front-end architecture, and design system was launched to all customers June 3, 2024.
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
~20
Scrum teams supported through migration across NA and Europe

Personal Achievements

  • Directed ~300 designers, engineers, product managers, and test engineers across ~20 scrum teams in North America and Europe.
  • Lead cross-functional group of designers, researchers, and UX writers in a 6-week design sprint to redesign the entire Collibra user interface.
  • Created UX/UI career growth framework for product designers.
  • Developed a contribution and governance model for designers and engineers.
  • Championed and implemented first program to ensure WCAG 2.2 accessibility compliance through design, writing, development, auditing, and remediating best practices.

Improved Tech & Tool Stack

  • Agreed on one data visualization library for all teams.
  • Migrated whiteboarding and diagramming to Figma (FigJam) rather than than using Miro and Figma.
  • Grew accessibility testing tools and libraries from three to six.
  • Procured zeroheight for design system documentation and integrations eliminating unnecessary engineering help to publish to production.
Tech and Tool stack as of June 2024

Implemented A11y Best Practices

  • Created Collibra's first A11y Guild, #a11ygators comprised of designers, engineers, writers, product management, and QA engineers.
  • Migrated 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.
Image above shows the A11Y Guild's branding, a clip of our latest VPAT/ACR, and the initial roadmap cadence for auditing and remediation.

Improved Library Structure

  • Followed industry standards with atomic principles.
  • Rebuilt Figma components to utilize Variables and Variants.
  • Created primitive and semantic tokens structure.
  • Matched library structure taxonomy and nomenclature of code (and improved code nomenclature).
  • Structured libraries for the future with web, iOS, and Android specific scaling in mind.
* These are unpublished assets, that are embedded where needed

Leading a Complete UI Redesign

In March of 2023 I was appointed to lead a 6-week design sprint with the goal of establishing a new user interface design. This would entail new visual language, page layout templates, and menu design. Once established we would then evolve the current vanilla theme, Aspen, to what is now known as, Banyan, within the design system, Arbor.
I utilized the 6-week sprint to brainstorm, research, validate, and flesh out a fully functioning prototype of 4 user flows. I planned the sprint with the following phases:
  • Week 1: Map out user flow diagrams of four drastically different user flows in the platform.
  • Week 2-3: Develop visual concepts and test user sentiments of the different styles against competitors and the Aspen theme.
  • Week 4: Flesh out all four user journeys and create an interactive Figma prototype.
  • Week 5-6: Create and deliver presentation of validated UI to the C-Suite and Senior Leadership Team (SLT).
  • Week 6: Iterate on feedback from the review board until approval is received.

My Role

  • Manage the team and project to ensure we stayed on track with goals and timelines.
  • Inform stakeholders and triage their feedback.
  • Provide daily and weekly recaps through a private, dedicated Slack channel, Confluence, and weekly video recording.
  • Direct the creative direction of the team while ensuring scalability for things like accessibility, responsive design, adaptive design, and white labeling.

New Visual Language

New Component and Pattern Designs

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

When it comes to how people choose software--regardless if it's B2C or B2B enterprise--people do judge a book by its cover. 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 concentrated on improving and iterating leading into our private beta program slated to start in September 2023. I personally oversaw and lead my team in:
  • Fleshing out visual language tokens needed for, Banyan.
  • Applying visual language to all core and shared components (~120).
  • Creating documentation for foundations, components, and patterns.
  • Providing support to all scrum teams in P&E (~20) throughout adoption and implementation.
  • Enforcing and participate in a new UX review process I rolled out in our official SDLC.
  • Prioritizing feedback from stakeholders and iterating on the UI as needed.
  • Launching and moderating 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 my design team and our front-end architecture team to provide support to all 20+ scrum teams of Collibra P&E organization using the new design system.
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 the private beta closed in October 2023, our public Beta kicked off in December 2023. The New UI Beta Program became our largest public beta program the company ever conducted with 110 customers participating (16% of our customer base).

During the Beta programs, my role was to
  1. Tag and categorize feedback in the form ideas, bugs, compliments.
  2. Respond to customers that pertained to UI and Design System issues.
  3. Log issues that needed to be escalated with the apprpriate scrum team and document the user story or bug in Jira.
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, 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, they enabled it in their production environments right away.

*Metrics are as of June 28, 2024 (four weeks of being in GA).

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.
(
Next
)