Design system across platforms

A unified design system for Celsius, catering to multi-platform use and both dark and light themes, streamlined their approach, ensuring a seamless user experience across various platforms.

Summary

Celsius faced with inconsistencies and duplication issues created by lack of a single source of truth of style guides and design system. My role was to create a unified design system, streamlining their process and ensuring a cohesive user experience across platforms.

---

The challenge

In recent years, Celsius, a global multi-platform cryptocurrency product, underwent multiple re-brandings, resulting in various design style guides and confusion around components and their implementation. With each new project or project phase, the team found themselves recreating components from scratch. This led to duplicated efforts, inconsistency in styles, and a lack of cohesion across their platforms. The team recognized the need to recreate old components, consolidate use cases, and establish a unified design system to overcome these challenges.

The benefits

Streamlined resource management: The design system served as a central repository for components, patterns, and styles, simplifying resource management.

Focus on problem-solving: Design resources could shift focus from visual tweaks to solving complex problems, enhancing the overall project quality.

Efficient project management: Changes in ongoing projects could be swiftly implemented at scale through the design system, ensuring consistency and coherence.

Design consistency: Visual and functional consistency across projects, enhancing user experience and brand perception.

Rapid prototyping: Designers could quickly replicate designs using pre-made components, saving time and effort.

Eliminating Inconsistency: The design system eradicated inconsistencies, reducing wasted design and development time caused by miscommunications.

The approach

I assembled a diverse team comprising product designers, marketing designers, project managers, researchers, and mobile/web developers from various squads. Our collective approach involved building a robust design system based on a comprehensive style guide. Utilizing an existing guide, we seamlessly integrated new elements, including detailed annotations, branding specifications, spacing guidelines, layout grids, and an icon pack. These resources were seamlessly embedded within the component library, providing contextual guidance and enhancing the team's efficiency within the established framework.

Research and planning

Drawing inspiration from industry leaders in both crypto and baking field, the Celsius team embarked on creating a design system that unified UX/UI across platforms. This unified approach, while maintaining some native familiarity, allowed for a consistent and branded experience. The team strategically crafted components, ensuring they adhered to both platform-specific guidelines and the overarching Celsius brand identity.

Atomic system architecture

To ensure adaptability in Celsius' future projects, we aimed for a flexible architecture, drawing inspiration from Material Design and Tailwind. We deconstructed elements into fundamental forms, labeling typography, colors, spacing, and elevation shadows with technical conventions. This streamlined communication between developers and designers. Utilizing a centralized control method, universal changes, such as altering the main app color, were swiftly applied across all components, highlighting the system's scalability and flexibility.

---

Assessing the existing style guides

To ensure a seamless progress, we initiated by assessing our current style guides. Grasping the foundational elements was pivotal, serving as a basis for the design system. Through testing duplicated components on existing pages, we discerned successful elements and areas for improvement, laying the groundwork for enhancements.

Identifying core components

The team meticulously identified core components used across projects. This step involved analyzing past projects, recognizing recurring design elements, and defining essential building blocks. These components ranged from buttons and fields to navigation bars and interactive elements

Incorporating in-page annotations

To facilitate seamless communication between designers and developers, in-depth in-page annotations were created. These annotations detailed the design and layout specifications for each component within the library. Clarity in documentation ensured consistent implementation of components across the platforms.

Defining branding elements

Collaborating with our marketing team, we prioritized uniform branding, establishing standardized color palettes, typography guidelines (for web, mobile platforms, websites, and marketing), and diverse versions of the company logo. This meticulous detailing guaranteed a cohesive visual identity across all applications.

Establishing spacing guidelines and layout grids

Clear 8px, rem based spacing guidelines and layout grids were established to maintain alignment and consistency in design. These guidelines ensured that spacing between elements, margins, and paddings followed a standardized approach, promoting a harmonious layout across various screens and devices.

Creating an icon pack

Icons play a vital role in user interfaces. We curated a custom icon pack that adhered to the brand's aesthetic while ensuring clarity in conveying information. These icons were made an integral part of the design system, readily available for designers to use across different components.

Integration with Storybook:

One of the critical aspects of our approach was integrating the style guide directly into the component library. This integration ensured that designers and developers had immediate access to all relevant guidelines while working on specific components. Contextual guidance streamlined the design and development process, reducing ambiguity and enhancing efficiency.

Continuous iteration and improvement

With our experience and ever changing crypto regulations, we recognized that a design system is not static. It requires continuous iteration and improvement. The team established a feedback loop, encouraging designers and developers to provide insights on the usability and effectiveness of the components. Regular updates and refinements were made based on these inputs, ensuring the design system stayed relevant and effective over time.

---

Outcome

By adopting this comprehensive approach, we have successfully transformed our design process. The unified design system not only resolved the challenges of inconsistency and duplication but also empowered the team to focus on innovation and user experience, ultimately leading to a more cohesive and user-friendly product ecosystem.