Building the Nebula Design System

The lack of a unifying design philosophy or principles to guide design led to inconsistencies in design and issues in the product development process. This was caused by different parts of the app being designed at different times by different designers and in some cases the engineer working on the feature bypassed design to roll features faster.

The result? An inconsistent experience for users, wasted time on repeated design decisions, and a frustrating back-and-forth between design and development. It became clear that a solid design system was needed to fix these problems.

As the Head of Product Design, I took the lead in transforming our existing UI kit into a fully-fledged design system called Nebula – a design language that reflected our brand identity and improved the overall user experience.

This case study shares how Nebula came to life and the impact it had.

The lack of a unified design system created several issues. Users encountered a confusing and inconsistent interface, which reduced trust in the product. Designers and engineers repeatedly rebuilt the same components, resulting in wasted time and effort. Additionally, without shared accessibility guidelines, some users risked being excluded from the experience altogether.

To address these challenges, a clear and structured system was essential. Establishing design standards would improve collaboration, accelerate development, and ultimately provide users with a more consistent and reliable experience.

1. Improve product quality with clear design guidelines and engineering standards.
2. Create a consistent and predictable user experience.
3. Boost efficiency and collaboration by streamlining the design and development process.
4. Ensure all teams adopted the system to maintain consistency across the board.

I led the cross-functional team responsible for creating the Nebula Design System. This included research, defining the structure, designing UI components, and documenting everything to ensure easy adoption.

Creating Nebula followed clear steps: research, definition, and design.

We started by auditing the existing components and patterns in the app. This revealed a tangled mess of mismatched designs that made the product feel confusing and inconsistent. Common elements that needed standardization were identified as part of the new system.

• Inconsistency: Colours, components, and guidelines varied wildly.
• Redundancy: Repeatedly redesigning components wasted time.
• Rigidness: There was no clear structure or defined states for components.

Exploring existing open-source design systems like IBM Carbon Design System by IBM, Google Material Design and GOV.UK Design System helped identify common design best practices for Nebula. Key takeaways included:

• Modularity: Flexible components that adapt easily across screens and platforms.
• Communication: Clear text, feedback messages, and visual cues to guide users.
• Accessibility: Ensuring inclusivity for users with visual, auditory, and motor impairments.

Using Atomic Design principles, we structured Nebula to break designs into smaller, manageable elements. This allowed designers and engineers to build consistent interfaces by assembling reusable building blocks.

We established key principles to guide our design decisions. These principles unified the design team and provided criteria against which all elements of Nebula will be evaluated.

• Constraint-Based Design: Limiting low-level choices to simplify decisions allowed focus on designing for user needs.
• Sub-Atomic Design: Creating flexible combinations from a set of core elements for a cohesive design system.
• Design Tokens: Using platform-agnostic tokens to manage colour, typography, and spacing efficiently.

Getting stakeholder buy-in was crucial. I presented Nebula’s benefits during a company-wide tech retreat. This helped secure support, resources, and excitement across teams.

Components were organized into clear categories: atoms, molecules, and organisms. Each component was designed to meet accessibility standards, include interaction states, and follow clear content guidelines.

Scalable typography system was created to keep text readable and visually consistent across a wide range of devices and screen sizes, providing users with a seamless experience.

The colour palette was refined, with each colour assigned a clear semantic function to improve clarity and consistency. Contrast ratios were fine-tuned to meet WCAG AA accessibility standards, ensuring readability for all users, and comfortable navigate and interaction with the app.

Design tokens centralized our core styles, like shadows, border radii, and spacing values. This streamlined both design and development, ensuring consistency and visual harmony across the product.

Spacing played a vital role in improving readability and structure. By defining consistent spacing rules, we ensured elements felt organized and balanced. This created a more intuitive and visually comfortable experience for users.

Components were built with accessibility, clarity, and aesthetics in mind. Using Figma’s auto layout features, we made components adaptable and added states like hover, focus, filled, error, and disabled.

Input fields are essential for gathering user information, making their clarity and usability critical. Each input field was designed with clear labels, helpful placeholder text, and appropriate spacing to guide users effectively.

To enhance accessibility and improve user experience, input fields include visual cues for different states such as focus, error, and success. These indicators ensure users can easily identify the field’s status and respond accordingly.

Icons were designed to be simple yet meaningful, ensuring they enhanced rather than distracted from the user experience. Each icon followed a consistent visual style, balancing clarity with visual appeal. By maintaining uniform line weights and sizes, the icons created a cohesive look across the product.

Flags represented various countries and were designed with accuracy and clarity in mind. Each flag maintained proper proportions and visual integrity, ensuring users could easily identify them. This attention to detail helped users select their preferred language or region confidently.

Payment institution logos were treated with care to maintain brand recognition. Each logo was presented in its correct colours and proportions to ensure authenticity. This approach reassured users that their payment options were familiar and secure.

With the app supporting eight distinct languages, including Arabic with its right-to-left script, we encountered unique challenges and opportunities. We ensured components adapted smoothly for language nuances, creating an inclusive user experience across all languages.

Once components were designed, stress-tested, and approved, they were added to the Nebula component library. This enabled teams to drag and drop components directly into designs, improving speed and consistency.

To ensure clarity and alignment across teams, we established uniform naming conventions for design and code elements, including font styles, colors, spacing, icons, and more. Identical names were used across design and code snippets, improving collaboration by ensuring designers and developers spoke the same language.

Using Zeroheight allowed us to manage design documentation efficiently. Syncing directly with Figma kept everything updated and reduced back-and-forth between teams.

The Nebula Design System transformed how we worked:

• Improved Product Quality: Consistent designs improved the app’s overall look and feel.
• Team Efficiency and Morale: Engineers could build features faster with ready-made components.
• Enhanced User Experience: A predictable interface made the app easier to use and more enjoyable.

Building Nebula was a rewarding journey that highlighted the power of storytelling when securing stakeholder support. It also reinforced how crucial it is to align with engineers and product managers to create a system that works for everyone.

While Nebula solved many issues and improved efficiency, design systems are never truly finished. Ongoing iteration and refinement will ensure Nebula continues to grow alongside the product and its users.