Why BlueJeans (Verizon) needed a design system?

For their product redesign and future product enhancements, the strong foundation of a design system was necessary to ensure consistency and speedy design & development. There were several challenges that had to be overcome.

Our approach

We stepped back to assess the entire ecosystem—products, components, and teams—to better understand the challenges we needed to address while building the design system.

Research & Analysis

Key Challenges to Overcome

Building a powerful, effective & scalable design system

1. Built for scale, and for all

The design system follows Atomic design principles, breaking down UI elements into 4 levels: atoms, molecules, organisms, patterns. This modular approach allows each component to be developed, tested, and maintained independently, making it easier to scale while being consistent and avoiding redundant work.
Designed for designers, developers and PMs, the design system incorporates all requirements and documentation to meet the needs of all stakeholders.

2. Unified design across multiple platforms

The design system was built to deliver a consistent experience across every touchpoint — from web to desktop applications, mobile apps, and conference room systems. Designed with scalability at its core, the system ensured seamless interactions across platforms without compromising performance or usability.

3. Designed for accessibility

Given the video conferencing product’s broad user base, accessibility was a key focus in both the design and design system. We ensured all colours followed WCAG-compliant colour contrast for readability, alt-tags for all images and icons, careful consideration of keyboard navigation & shortcuts, and screen reader access to follow the appropriate structure & flow. All this ensured that the designs created using the design system offered an inclusive experience for all users.

4. Accelerating design with scalable, interactive & theme ready components

We built our design components to scale across platforms, seamlessly adapting to different screen sizes, supporting both light and dark modes, and pre-prototyped with interactions — making it easier to build and test large design flows without creating interactions from scratch.

1. Building versatile components that adapt across platforms.

We designed the components for adapting to different layouts and screen sizes. With easily switchable properties, they allow quick customization — making it faster to prototype, iterate, and maintain consistency across platforms.

2. Saving design time for multiple themes using design tokens and figma variables

By establishing a 1:1 mapping of colors between Light and Dark themes using figma variables, we reduced design time considerably. This approach not only streamlined the design process but also made handoffs to developers more efficient, ensuring consistency across themes with minimal back-and-forth.

3. Reducing time spent on prototyping through interactive components

The components in the design system had interactive baked in so that new mocks could be quickly and easily prototyped. This allowed designers, PMs and developers to be on the same page on the expected user experience.

5. Adding delight with micro interactions

We added micro interactions purposefully to bring moments of delight across the experience, making the interface feel more intuitive and alive. From subtle button feedback to smooth transitions, each interaction is designed to guide users seamlessly while adding a sense of polish and personality.

6. Brand alignment & visual style development

The design system was crafted to align with the ‘Bluejeans’ brand’s visual language, and expanding it into a comprehensive design system. This ensured consistency across all touch-points. Being a video-based product, we followed a dark UI with subtle components, enhancing usability while maintaining brand identity. Content and tone of voice guidelines were also defined to create a unified and engaging experience.

7. Bridging vision to execution with effective Dev Hand-off

Beyond delivering Figma files, we took extra care to ensure every design detail was conveyed with clarity. From interaction behaviours to the smallest visual nuances, we documented design logic, edge cases, and component guidelines to leave no room for guesswork.

8. Design-Dev Collaboration to create a Component Library

We worked closely with developers to help translate the design system into a functional, code-based component library using Storybook. Through continuous collaboration, we ensured visual and functional accuracy, since these formed the foundation of all developed product. Regular feedback loops and documentation helped streamline the development process, making the components reusable, scalable and aligned with the design vision.

Impact of the design system

The design system streamlined collaboration, reducing design time while ensuring consistency across devices and user flows. It enabled faster iterations, improved scalability, and maintained a cohesive user experience.

Reduced design time by 60%

By comparing the creation of a UI from scratch vs by using the design system, there was a significant reduction in design time. The reusable components, with all the variants and interactions built-in, allowed designers to work significantly faster.

Reduced development time by 40%

The reusable library of components in Storybook allowed developers to recreate designs into code at a much faster speed. Given that these components were bug-tested and passed through Design QA, the number of bugs arising during testing was also significantly lower.

Other design systems we’ve created

We have built various design systems, ranging from basic to extensive, tailored to different projects. Each design system was driven by the need for speed, consistency and efficiency in design and development.