Boomi

Exosphere Design System

I currently lead the Design Technology team, responsible for our design system. I create components, documentation, and prototypes along with roadmaps, providing support, and establishing processes.

Timeline

Sept 2022 - Ongoing

Team

  • 2 Design Technologists
  • A couple of UX Engineers

    • Where we started

    When I joined Boomi, there was a limited design system in place; however, there was no documentation, very limited components to choose from, no roadmap, and the overall UI was outdated. People were also confused about what items were available in the design system and what was coming next.

    We were also in the middle of migrating the whole platform to React so we knew that we needed to move fast in order to support all the new features that needed to use our design system. There were a few aggressive goals that I wanted to achieve in the short-term:

    • Create a design systems roadmap
    • Design 45% of core components needed with a focus on usability, scalability, accessibility, and a modern UI
    • Establish plans for documentation and communications
    • Provide support for questions and requests

    Where we are now

    Although we still have a lot of work to do, I'm very proud of what the team was able to achieve during such a short period of time. As of Q1 of 2023, we accomplished the following:
    • Designed and built 36 additional core components including tables, inputs, buttons, etc.
    • Streamlined design – our components have been used 8.5k times this week in Figma
    • Refreshed our foundational choices (Colors, Typography, Grids, etc.)
    • Defined, mapped, and created 200+ design tokens to make it easier to update and scale
    • Set up Storybook, Zeroheight, and the Figma library
    • Helped 3 teams transition to Exosphere that resulted in a lot of praise from customers
    Design tokens for light and dark modes

    Design tokens for light and dark modes

    We also went above and beyond our original goals:
      ✔️ Create a design systems roadmap
      I worked with Designers, Product Managers, and the Design Systems team to create a short-term and long-term roadmap. We also started sprints on the Design Technology team where I prioritized the work to in order to achieve our roadmap.

      ✔️ Design 45% of core components needed
      We surpassed this goal at the end of 2022 and were even able to improve some existing components.

      ✔️ Establish plans for documentation and communications
      I was able to get Zeroheight (documentation repo) set up and provided templates for writing documentation. Currently, we've created documentation and usage guidelines for 100% of our existing components. I also was able to unify our communications by sending out release announcements to all of Boomi and presenting updates during company All-Hands.

      ✔️ Provide support for questions and requests
      We were able to set up office hours and Slack channels in order to provide support and guidance to the team. I also created a request intake process so that everyone could have a voice in requesting updates to Exosphere.
    Component documentation example

    Component documentation example

    Deep dive into the work

    There are 4 foundational pillars of Exosphere that we focus on:
    • Foundations
    • Core Components
    • Layouts & Patterns
    • Usage Guidelines
    Foundations
    Foundations refer to the base design choices that makeup the design system. These include elements such as color, typography, and principles.

    We made sure to select colors and typography that were accessible. We also mapped each selection to design tokens, a big change from the hard-coded hex values that could be found in the app prior.

    Colors with contrast ratios and their respective tokens

    Colors with contrast ratios and their respective tokens

    To help designers be aware of all design tokens and their options, I built a Figma plugin to bring in design tokens that Figma doesn't support out of the box (such as padding, spacing, opacity, etc.) and make it easier to adjust parameters with a single click. The plugin helped streamline the workflow of designers by ensuring proper, available tokens were used.

    Design token plugin gif

    Walk through of the Figma token plugin

    Core Components
    Our core components are designed with usability, scalability, and accessibility in mind. We make sure to:
    • Conduct research prior to understand design standards and naming conventions
    • Prototype designs using Javascript, HTML, CSS, or React
    • Share explorations during crits early and often
    • Build componenents in Figma that mirror code
    Examples of a few components

    Examples of a few components

    Coded prototype of a responsive side drawer

    Coded prototype of a responsive side drawer

    Loader animation exploration prototype

    Loader animation exploration prototype

    Layouts & Patterns
    We are currently working on creating page layouts & other patterns to level up our design system. Currently, we've already established patterns for things such as:
    • Grids and responsive behavior
    • Page headers
    • Required v optional, links v buttons, etc.
    Some of our responsive grids

    Some of our responsive grids

    Usage Guidelines
    A large effort was put in place to backfill all documentation for existing components. For any new components, we made sure that documentation was written before we defined a component as complete. For these usage guidelines, we noted down all variants, anatomy, interaction behavior, responsive behavior, and accessibility.
    An example pattern guideline

    An example guideline

    An example table guideline

    Another example of a guideline