WildCat Design System
The Situation
NewsBank initiated a company-wide redesign to modernize both their "current and historic news" flagship product suites. I was a key figure in NewsBank’s redesign efforts as I was tasked with building and maintained NewsBank's Enterprise Design System "Wildcat" from the ground up including the entire variable collection used inside of Figma.
Mui Components
I really enjoyed working with the Mui component library as the components were built solid with great instructions from the start.
The Tasks
My task as the UI designer was to establish and manage a large future proof scalable enterprise design system, codenamed 'WildCat'. It was built using the MUI component library to standardize on NewsBank's overall user experience, interactions, accessibility across all products, and streamline cross-functional collaboration.
I aligned with Atomic design principles when building the design system strategy itself in conjunction with the Principle UX designers “UX Strategy” roadmap. We had multiple meetings in the beginning to Below is a list of some of the items I was handling on a daily basis:
Team collaboration with Principal UX designer to map out and strategize our approach to custom components and patterns needed.
Performed a competitive analysis of other popular design systems to understand them better.
Performed a full UI audit on their three flagship products.
Established consistent design UI patterns and UI elements across the NewsBank product suites.
Established a consistent design language after working with the development team 1:1.
Maintained the Mui component library of over 100+ pre-built components and variants.
Built and maintained 87 custom WildCat components.
Established a weekly meeting cadence for other designers to ask me questions or teach them how to use the components.
Introduced a true "tokenized" variable system for the following:
Colors
Spacing & gap-padding
Sizing
Typography
Effects
(top) Figma’s modes in action, (bottom) Production ready CSS tokens used in production specs
result & Outcome
Successfully standardized NewsBank's flagship product suite user interfaces.
Improved consistency and reduced design debt across the entire portfolio by 70%.
Significantly accelerated product design spec cycles as now designers didn’t have to think, “What color is the NewsBank blue?”.
Significantly accelerated product development cycles by providing designers and developers with a robust, readily available component and pattern library.
Enabled efficient scaling of new products and redesign initiatives, with 'WildCat' serving as the single source of truth for design.
Product Launch: I did receive word from a friend who still works at NewsBank and the redesign efforts did finally go to a small subset of NewsBank users for initial testing.
Component Variants On-Demand
Whatever the designers wanted they got! Okay so maybe not everything. If a new feature was needed we would usually meet as a team and discuss all of the use cases that surrounded that particular Jira story. I was a huge proponent of “If you need it, let me know”. most of the time I could deliver what they asked for as it may have been something simple as a new icon instance or auto layout applied somewhere.
Details Matter!
When you’re building “custom components” for a suite of 100+ products and four designers, everything matters. Component documentation on the variants themselves helped both the design and development teams to stop and pause to understand how to use it, how it’s built, and do I have any questions 🐯
