CHRISTINE YEH

Pivotal UI

 
PivotalUI_logo.png
 

Pivotal UI: Enabling faster and more consistent UI development and design

Background

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.

🔗 styleguide.pivotal.io

Outcomes

  1. Improved UX for R&D Designers when learning and using Pivotal UI for wireframes and mock-ups

  2. Pivotal UI moving towards a11y compliancy

  3. Greater efficiency for designers, who can now create mocks with Pivotal UI components instead of designing mockups from scratch

  4. 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

  1. Streamlining components to be easier to understand and use

  2. Improving guidelines and documentation around usage and best practices of components

  3. Increase awareness and adoption of Pivotal UI amongst internal Pivotal teams

  4. Improve the designers’ experience using Pivotal UI

  5. Make it easier for users to get in touch


  6. 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

 

 

What I've learned

  1. 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.

  2. 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.

      1. Quotes from a discovery & framing research initiative:

        1. “Want an easier way to update PUI” - 19 users

        2. “Some teams don’t see the value of updating so they put it off.” - 7 users

        3. “Updating isn’t complicated but it takes a lot of time to fix tests, review UI and layout changes” - 11 users

        4. “I hoped that a tool created by CF would be better at testing” - Abhi Hiremagalur, Engineer on SSO

  3. 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.

  4. 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.