Curiosity Stream Design System

Summary

In 2020, Curiosity Stream embarked on a rebranding journey, presenting a unique opportunity to revolutionize our design approach. As the lead designer, I spearheaded the development of a robust design system, streamlining processes, fostering consistency, and elevating the overall user experience. Through meticulous craftsmanship in Figma, the design system emerged as a vital internal tool, facilitating collaboration and efficiency across platforms.

‍

Background

Prior to the rebrand, Curiosity Stream lacked a comprehensive design framework, relying on ad-hoc elements from past projects. This fragmented approach hindered productivity and consistency, necessitating the creation of a unified system to drive innovation and cohesion.

‍

OBJECTIVE

The objective was clear: to establish a dynamic design system capable of adapting to evolving needs while fostering consistency and efficiency. With new use cases emerging and the library expanding, rapid scalability and modularity were prioritized to ensure seamless integration with our workflow.

‍

SETTING UP THE SYSTEM FOUNDATIONS

The The journey began with laying the groundwork for typography, colors, and grid systems. Collaborating closely with the lead front-end developer, we meticulously crafted styles and components, in figma, Tailwind CSS and Storybook, ensuring alignment between design and development.

‍

SYSTEM FOUNDATIONS

Typography
Colors
Grid

Drawing from the principles of Atomic Design, we curated a dynamic collection of components designed to be reusable and versatile across platforms. By organizing and naming components systematically, we ensured seamless collaboration and integration between design and development teams.

COMPONENT LIBRARY

Variants
All Platforms

‍

ACCESSIBILITY AND LOCALIZATION

Curiosity Stream has subscribers all over the world and is often used for educational purposes. So accessibility and localization was highly considered. This encompassed several key principles:

— Incorporating text labels alongside icons for mobile navigation.

— Verifying appropriate font sizes and touch targets for mobile devices.

— Evaluating color contrast across various backgrounds and interaction states to meet Web Content Accessibility Guidelines.

— Accommodate diverse languages length

These efforts established a foundation that aligns the design system with accessibility standards, underscoring our collective commitment to inclusivity

‍

RESULTS

Within three months, the foundation of the design system was established, laying the groundwork for speed, consistency, and innovation:

• The design system provided a cohesive look and feel post-rebrand, fostering brand consistency and recognition.
• It optimized the design workflow, empowering the UX team and developers to work more efficiently and collaboratively.
• Equipped with a suite of reusable components and patterns, the team experienced quicker turnarounds from design to launch, enhancing productivity and agility.

As the design system continues to evolve, it remains a testament to our commitment to excellence and innovation, driving forward our mission to deliver exceptional user experiences across platforms.

‍