CASE STUDY
Crackle's Atomic Design System
Hypothesis: Creating a cohesive and scalable design system for mobile, web, and TV will boost business growth by cutting costs, streamlining design, improving product quality, and enhancing the user experience.
I played a key role in the creation, development, and updates of this atomic design system for Crackle. Also in April 2024, we updated the entire system to support the new Figma Variable architecture for typography and color.
Challenges
Cross-Platform Consistency: Ensuring a uniform look and feel across mobile, web, and TV while
accommodating the unique constraints and opportunities of each platform.
Scalability: Designing a system that could easily be expanded with new components and features without compromising usability or performance.
User Diversity: Catering to varying preferences and accessibility needs. Building an inclusive system for all users was key.
The analysis involved:
Auditing the current UI components across mobile, web, and TV.
Gathering feedback from designers, developers, and stakeholders to identify pain points and areas for improvement.
Color and Typography Audits
Every designer and platform is pulling from the same core library, so the typography and color audit provided key information on how primitives libraries are being used to convey meaning and functionality.
Semantic Color Audit: Each color has an important role to play in the Crackle interface. This semantic color audit helps us define convey meaning and functionality.
Semantic Type Audit for Style, Scale, & Color: Here you can see how the type style, scale, and colors are customized for the needs of the platform. From 1O’ for TV to 1’ for mobile.
I designed a comprehensive library of UI components, each categorized into atoms, molecules, organisms, and templates. This library served as the foundation for the entire design system.
Atoms: Basic building blocks such as color, icons, and typography.
Molecules: Combinations of atoms, like form fields and navigation items.
Organisms: More complex components, such as headers, footers, and content cards.
Templates: Screen layouts that designers can use to edit and update or reference for new layouts
Creating the Design System: Color
I added detailed documentation and usage guidelines for each part of the design system.
Colors Defined: These are the approved colors for representation of the Crackle brand. Secondary colors should be used sparingly. Do not use the listed bright colors as large backgrounds.
Colors Proportions: This color grid should be used to help inform decisions on proportions of color distribution in a promotion or art piece. Though orange is our primary color it should be used sparingly.
Color Blends & Tints Usage: Examples of how to apply blends.
Color Blends & Tints: Blends and Tints create layers and improve contrast. For example designers might use a dark blend between text/icon and a light image.
Designed for accessibility: Accessibility was a paramount consideration. Recognizing the diverse needs of our user base, we prioritized creating a color palette that not only aligns with our brand identity but also adheres to stringent accessibility standards.
Also to facilitate seamless implementation and future maintenance, I created detailed documentation and usage guidelines for the design system. This included:
Component specifications and design tokens.
Best practices for using and customizing components.
Guidelines for maintaining consistency and scalability.
Color Contrast
WCAG has adopted a new color contrast method called APCA or Advanced Perceptual Contrast Algorithm. Our colors meet both old and new contrast requirements.
Creating the Design System: Typography
Typeface: Sora is very legible geometric sans-serif that also works well at smaller size. Designed by Jonathan Barnbrook and Julián Moncada,
The sturdy strokes and the large x-height make Sora ideal for smaller functional text of user interfaces.
Sora is simple, elegant and utilitarian. It was designed to:
“Capture Soramitsu's spirit and heritage resulting in a type family with cues of low-resolution aesthetics and early screen typography but without nostalgia, as every decision was considered towards the crisp digital environment of today.”
Type styles: guide our users through our interfaces, conveying clear, distinct, and meaningful information along the way. For simplicity and ease of use we only use these three type styles in interfaces: Sora Bold, Sora Regular, and Sora Light.
Type Scale Primitive and Semantic: Each platform (TV, Web, Mobile) uses it’s own unique scale specifically adapted to the interface, but they all adhere to a similar pattern.
Type Usage: Below you can see how the type style is customized for the needs of that specific platform. From 1O’ for TV to 1’ for mobile.
Type Platform Customizations
To accommodate the different screen sizes and use cases typography had to be customized by platform.
Creating the Design System: Component Library
Icons: Icons are easily distinguishable and accompanied by appropriate labels and alternative text for screen readers, so all users can navigate and interact seamlessly.
Accessibility is a priority in our atomic design system, ensuring icons are easily distinguishable and accompanied by appropriate labels and alternative text for screen readers, so all users can navigate and interact seamlessly.
Component "Organisms" Library for Mobile, Web, and TV
Organisms are more complex components, such as headers, footers, and content cards. These are catalogued and labeled so designers can easily add them to their projects.
Results and Impact
Consistency: Enhanced visual and functional consistency.
Efficiency: Streamlined design and development processes.
Scalability: Robust framework for future growth.