My Role

As the lead designer for this project, I was responsible for overseeing the entire design system development. My tasks included conducting comprehensive research on existing design systems, defining design principles, creating and testing UI components, and documenting the system for future use. I worked closely with developers to ensure seamless integration and collaborated with stakeholders to gather feedback and iterate on the system.

Initial Challenges

Before the design system, Jellybean's design process was fragmented and inconsistent. Different teams used varying design elements, leading to a disjointed user experience. Designers often recreated components from scratch, which was inefficient and increased the risk of errors. There was no single source of truth for design guidelines, making it difficult to maintain brand consistency across products. These issues highlighted the urgent need for a unified design system to address these inefficiencies and enhance the product’s overall coherence.

Approach

To begin, we conducted thorough research by analyzing successful design systems like Material Design and Apple’s Human Interface Guidelines. We also reviewed user feedback to identify common UI issues and areas for improvement. During this phase, I was remembered about Brad Frost's Atomic Design methodology, which provided a structured approach to tackling the UIKit and interface design challenge (Brad Frost's Atomic Design methodology breaks down UI design into manageable, reusable components like atoms, molecules, organisms, template, and pages).

These principles guided the development of the Jellybean design system, ensuring a structured approach to building the UIKit and interface in parallel.

Design Principles

We established a set of core design principles to guide our work: Consistency, Efficiency, Accessibility, and Flexibility. These principles ensured that every component and guideline we created aligned with our overall vision for a unified and user-friendly design system.

Building the structure

We developed a comprehensive library of UI components, including buttons, forms, navigation elements, and data visualization tools. Each component was designed to be flexible and customizable, allowing for variations while maintaining consistency. We prioritized accessibility, ensuring that all components met WCAG standards.

Typography

Standardized font choices and a consistent typographic hierarchy were implemented to ensure readability and a cohesive visual experience across all interfaces.

Color

A well-defined color palette was curated to maintain brand consistency and enhance user experience by providing clear visual cues.

Spacing & Grid

We established a systematic approach to margins, padding, and layout grids to ensure consistent spacing and alignment across all design elements.

Icons

A comprehensive set of icons was created to visually represent actions, objects, and navigation elements, ensuring intuitive user interactions.

Buttons

We designed a variety of button styles for different use cases, including primary, secondary, and tertiary actions, all maintaining a consistent look and feel.

Input Forms

We took the Untitled UI kit and used its comprehensive set of icons to visually represent actions, objects, and navigation elements, ensuring intuitive user interactions.

Selections

We created a range of selection components, such as toggles, checkboxes, radio buttons, and dropdowns, to provide users with multiple interaction options.

Navigation

A clear and intuitive navigation structure was developed to enhance user experience and ensure easy access to all features and functionalities.

Interactive UI Elements

Interactive elements, including overlays, modals, and cards, were designed to engage users and provide dynamic interactions within the application.

Miscellaneous

Various other components, such as breadcrumbs, tags, tooltips, and pagination, were included to cover all aspects of the user interface and ensure a comprehensive design system.

Integration with Existing Product

We worked closely with development teams to integrate the new design system into our existing products. This involved updating old components with new ones, ensuring backward compatibility, and gradually phasing out deprecated elements.

Documentation

Created a detailed documentation file that housed all design guidelines, component libraries, and usage examples. This file served as a single source of truth for the design system, ensuring that everyone in the organization had access to the same information.

Next Steps...

Moving forward, we will continue to refine and expand the design system, ensuring it remains a vital tool for the team. We are committed to fostering a culture of design excellence and innovation, leveraging the design system to deliver exceptional products.

If you made it this far, you deserve a cookie. 🍪

Got feedback, ideas, or just want to chat?

Hit me up anytime. You rock!