Building and Advancing Viasat’s Design System

Building and Advancing Viasat’s Design System, Beam

My role

• Developed and managed Viasat's design systems, including research, component development, and documentation
• Spearheaded the development of the design system documentation website from research to high-fidelity prototypes

Achievement

• Enhanced work efficiency by providing support to 200+ design system users (designers, developers, PMs/POs) and 35+ apps across all business segments
• Improved the user experience by designing reusable global components that adhere to accessibility standards and consistency
• Achieved a high satisfaction and confidence rate among our users in using the design systems

Company

Viasat

Timeline

Jun - Nov 2023

Team

4 Designers (incl.me) 
4 Engineers

Overview

Viasat is a global communications company divided into four segments, providing consumer facing, enterprise, and internal applications.

I was part of the Design Foundation team and worked on Viasat's design system, Beam, which supported 200+ users (designers, engineers, and PM/POs) and 35+ apps across all segments and business areas, including internal product teams and external agencies.

Challenges

Inconsistent global components across screens and products resulted in redundant design and development efforts, wasting time on creating similar, non-scalable UI elements.

Objectives

The goal was to streamline design and development processes by ensuring consistent, scalable, and high-quality interfaces, thus saving time and effort on non-scalable components.

Process

Component development: Research to release

The component development process starts with benchmarking research on Google Material Design, IBM Carbon Design System, and other best-in-class design systems. Based on research findings and accessibility standards, we brainstorm best practices.

Designers, including myself, then handle documentation and hand off designed components to the dev team. We review coded components in Storybook and aim to boost user adoption by updating new releases in our design system Slack Channel. Additionally, we support the successful implementation of the released components.

Develop

Key considerations in the component development process

Designing at an atomic level

We started by creating the smallest components, using established layer styles, and building up to larger ones. These components provide design flexibility for various use cases without detaching their instances.

Achieving accessibility standards

Providing base-level components with built-in accessibility helped ensure that WCAG 2.1 and W3C guidelines were considered and adhered to in all Viasat products.

Robust Figma components

Creating robust Figma components was vital for team adoption. We utilized robust variants, props, and slots to create flexible and maintainable components.

Documented & Delivered

Documentation for ensuring UI consistency

The detailed documentation captures design and development decisions, as well as functionality notes. This documentation has proven crucial for onboarding both new and existing team members to the Design System. Serving as a single source of truth, it enhances UI consistency by covering component descriptions, specifications, settings, anatomy, best practices, behavior, accessibility guidelines, and a list of do's and don'ts.

Click on the image to enlarge

Encouraging swift user adoption

The release notes in the Slack Design System channel helped boost user adoption after integrating the developed components into the design system.

Implementation

Enhancing workflow efficiency with design systems

I enhanced Viasat's digital products by swiftly implementing design systems, allowing both the design and engineering teams to focus on problem-solving. These systems, including tokens and components, were integrated into all product screens to ensure consistency and streamline workflow efficiency.

All components ensure responsiveness

One of Viasat's B2C products features layer styles and components such as standalone links, badges, buttons, tabs, and tables, all designed for responsiveness across various devices and screen sizes.

Results and impact

Improved user experience

All of our 35+ reusable global components have successfully met Viasat's Level AA accessibility requirements. Implementing these accessible best practices will significantly enhance the overall usability of our product.

Increased efficiency

Design and engineering teams can streamline their work, enabling them to prioritize user problem-solving, ultimately saving the company both time and money. Our component library includes all the reusable design elements like forms, buttons, alerts, badges, tooltips, and more. Throughout the year, it consistently sees high usage, with 5K to 10K+ component insertions per week.

Achieved high level user satisfaction and confidence

We recently conducted a survey (Oct. 2023) among users of our design system and received responses from 23 engineers, 20 designers, and 6 PM/POs. The survey results indicated that 80-90% of the surveyed users are highly satisfied and confident in using our design systems.

The data provided above is based on responses from 20 designers who indicated their level of satisfaction with our styles, components, and icon libraries.

Additional support to streamline workflow

Empowering multi-brand theming

We were in the process of launching a new Design Token architecture called Beam 3.0. This new architecture enables multi-brand theming for Viasat, Inmarsat, and partner applications (e.g., American Airlines, Delta) following the Viasat-Inmarsat merger.

Click on the image to enlarge

Naming schema for tokens and testing Figma variables on Viasat products with these new tokens

The team is currently in the design process, developing a new token naming convention, and I contributed by testing Figma variables on our Viasat products with these new tokens.

Click on the image to enlarge

Breaking down the name

1. All token names start with the system name; bm for Beam
2. The token category: primitive, semantic or component
3. Type of token, e.g. color, type, radius...etc
4. The ui element the token should be applied to
5. The token ends with a descriptive name that communicates the design attribute and the tokens role

Open-source design system site (In progress, launching in Q2 2024)

I spearheaded the creation of a design system documentation site for our upcoming 3.0 release, serving as a single source for both design and development teams. This included benchmarking research, brainstorming sessions, and developing high-fidelity prototypes.

Click on the image to enlarge

Component page - Usage tab

The website's component page utilizes badges and section alerts to show the lifecycle status of components. Detailed guidelines, including usage scenarios, structure, behavior, accessibility, and content, are consistently applied across all components.

Click on the image to enlarge

Component page - Code tab

In the code tab, a live demo is presented at the top, followed by the Figma component library link (for employees only) and Storybook links (for React and web components) in the Resources section to centralize all resources. Towards the bottom, a section listing properties for the components is provided.

Takeaways

What constitutes a good design system?

To establish a successful design system within a company, achieving user adoption is crucial. Similar to how a widely embraced product is considered successful, I believe a design system achieves success when embraced by numerous users, including designers, engineers, and PM/POs. Without user adoption, it risks becoming a white elephant—an expensive and costly asset with no practical value. Therefore, enhancing user adoption requires the development of scalable, consistent, and flexible components that facilitate seamless implementation. Additionally, providing continuous support, such as addressing questions and releasing updates via Slack channels, plays a pivotal role in this endeavor.

Throughout my experience with design systems, I have dedicated significant effort to enhancing user satisfaction and confidence in utilizing the design system, including its styles, components, and patterns. This concerted approach has resulted in substantial user adoption, significantly streamlining the workflow of the product team.

Beyond aesthetics

Design system is more than just about creating visually appealing assets. It involves various aspects such as accessibility and scalability, which demand advanced design and frontend skills. Therefore, a design system should not be limited to creating a beautiful UI kit; it must be approached from both design and development perspectives.

Pending publishment due to confidentiality!

I can't provide extensive details here. For more in-depth case studies or questions about the design system process, please feel free to reach out!

Helping Low-Income People of Color Achieve Financial Sustainability

Enhancing User Engagement on the Website Through Redesign