Pivotal UI: Enabling faster and more consistent UI development and design
Pivotal UI is an open-source design system that serves 16+ component teams in Pivotal Cloud Foundry, and it has been an important part of our growth and sustainability. The design system helps product teams efficiently and effectively build PCF UI products with a consistent, high-quality user experience.
Due to my strong belief in the value of design systems, I volunteered to support Pivotal UI from the design side.
Improved UX for R&D Designers when learning and using Pivotal UI for wireframes and mock-ups
Pivotal UI moving towards a11y compliancy
Greater efficiency for designers, who can now create mocks with Pivotal UI components instead of designing mockups from scratch
Growing alignment around a visual style via Pivotal UI, amongst teams inside and outside of R&D (like Tracker and Support)
What I did
Own the roadmap and design backlog of Pivotal UI
Identify opportunities for engineers to share Pivotal UI & React best practices
Conduct research with teams who consume Pivotal UI to identify needs and pain points
Collaborate with Pivotal Designers to ensure that PUI is built on a strong design foundation and is well-documented
Build expertise and provide thought leadership about design systems both internally and externally
Test and validate design decisions
A Sampling of Successes
Streamlining components to be easier to understand and use
Improving guidelines and documentation around usage and best practices of components
Increase awareness and adoption of Pivotal UI amongst internal Pivotal teams
Improve the designers’ experience using Pivotal UI
Make it easier for users to get in touch
More accessible UI
Narrowed down the colors in the style guide to a curated set of in-use, necessary colors, that are accessibility-tested
Audited and converged component use cases from various teams’ UI via six collaborative sessions across designers and teams
Created design documentation for most frequently used components
Drumbeats about the progress to the rest of the Org
Updated the Figma team library to include recently added Pivotal UI components
Held a workshop for educating and enabling designers to leverage Pivotal UI components in mockups in Figma
Scheduled weekly office hours for client teams to ask for help
Share various methods for getting in touch in PUI drumbeat
More robust and comprehensive accessibility guidelines in styleguide.pivotal.io, for engineers, designers, AND PMs
Whitepaper for Pivots on how to audit and test for accessibility compliance on individual component teams
Designed Component: Pagination
. . .
Designed Component: Accessible Colors
What I've learned
A design system is a product that serves other products.
Having all of Pivotal’s UIs integrated with the design system ensures improvements and changes to components and styling only needs to be changed in one place and is immediately consumable by client teams.
Making it easy to adopt the design system and upgrade to newer versions is key
Teams historically struggled to upgrade their Pivotal UI version. After making the upgrade experience better, teams were better able to take advantage of new Pivotal UI features and improvements.
Quotes from a discovery & framing research initiative:
“Want an easier way to update PUI” - 19 users
“Some teams don’t see the value of updating so they put it off.” - 7 users
“Updating isn’t complicated but it takes a lot of time to fix tests, review UI and layout changes” - 11 users
“I hoped that a tool created by CF would be better at testing” - Abhi Hiremagalur, Engineer on SSO
Improves coherency, quality, accessibility across Pivotal UI and CLI products
Design systems are living guidelines that change as user workflows and design needs change. By definition, they are not a static file that doesn’t need revisiting and improvement regularly. With dedicated attention, Pivotal UI acts as a single source of truth — a library of tried and tested components and patterns — that improves the consistency, experience and accessibility of Pivotal products.
Contributes to growth in the design community’s UI design practice
I was surprised at how slow it has felt at times, and difficult to establish or strengthen the design community with Pivotal UI in a timely fashion. There is a need for cross-platform and cross-project design reviews to enable people to learn from each other’s successes and stop them from duplicating work. More people that care about how things are done translates to more happy customers and better user experiences.
As newcomers get on-boarded, a design system becomes an invaluable tool. When patterns and components are well documented it significantly helps new designers and developers to independently design and develop achievable tasks quicker and tackle user stories straight after a few weeks as the process becomes very modular and easy to follow. Design systems create transparency and eliminate knowledge silos.