Marvel.ai Design Systems

Background

Reality AI Lab is reimagining the future of work and learning with intelligent digital workers. Marvel, its AI-powered teaching assistant, supports educators by simplifying lesson planning, content creation, and classroom management

My Role

I led creation of Marvel’s design system from 0→1. By standardizing components and building a shared library, I helped streamline workflows, foster better collaboration, and ensure consistent, scalable design across the product

Organization

Reality AI Labs

Tools used

Figma, Notion

Year

2024

Problem

Repetitive Component Creation, Lack of Documentation and Increased Development Time

When I joined Reality AI Labs, I observed several challenges that were affecting the efficiency of our design and development process:-

Repetitive Component Creation: Designers created components from scratch for each new project phase, leading to duplicated efforts and inconsistent designs across different phases.
Lack of Documentation: The absence of clear documentation for components resulted in confusion regarding their usage, especially as more variants and options were added over time without proper updates.
Brittle and Complex Components: Some components didn’t have a clear structure, making them difficult to modify or fix. This resulted in more time spent when making even small adjustments.
Increased Development Time: Due to the lack of a standardized design system and reusable components, developers spent excessive time coding new components, increasing lead time for project delivery.

Oppourtunity

How might we create a design system that streamlines component management, ensures visual and functional consistency, and reduces design and development time?

I had an opportunity to build a scalable design system that serves as a single source of truth for components, patterns, and styles. By integrating design tokens and code snippets into the Figma file, teams could manage changes at scale, ensuring visual and functional consistency. This would enable designers to focus on complex problems, streamline development, reduce redesign time, eliminate inconsistencies, and improve efficiency by minimizing miscommunication.

Solution

As Lead Product Designer, I established a centralized, scalable design system to:

Standardize Components – Create a single source of truth for UI components, ensuring consistency across projects.
Improve Efficiency – Provide a reusable component library, reducing redundant work and allowing designers to focus on new tasks.
Enhance Collaboration – Align designers and developers on design principles, streamlining handoffs and minimizing inconsistencies.

Applying Heuristic Evaluation

I evaluated several established design systems, including those from Shopify, Apple, and Google, to guide the creation of our own. While these systems were comprehensive and well-designed, they were also complex, often serving more as references than practical, step-by-step guides.

Through this evaluation, I realized that adopting Atomic Design principles would provide the structure needed to break down components into smaller, reusable elements. This approach made the design system more scalable and maintainable, and helped me identify key areas for improvement by evaluating the strengths and weaknesses of existing systems.

I broke down interfaces into reusable components, following a hierarchical structure that ensures organization, flexibility, and efficiency. Here’s a sneak peek at some of my components—from atoms to organisms—to build a seamless design experience.

Applying the hybrid 8pt and 4pt Grid System for Consistency & Scalability

The Hybrid 8pt and 4pt Grid System is a flexible approach to spacing and layout design that combines the structure of the 8-point grid with the precision of a 4-point grid. It maintains consistency and scalability while offering finer control over smaller UI elements.

‍

Establishing Typography: Nomenclature, Fonts, Weights, etc.

The font has a contemporary yet friendly feel, making the AI assistant feel more human and approachable, rather than overly technical or robotic. Works well for a tech-forward platform.

It looks great in both headings and body text, allowing for a consistent and structured interface
Satoshi has a neutral character that blends well into an AI-driven interface
Easy to read across different screen sizes and devices
Includes essential weight options

‍

Color Palette

The primary brand color was Purple (500, #5614F3). I defined standard success, error, and warning colors to harmonize with the brand palette. I conducted accessibility checks for all colors, including their light and dark variants, and specified appropriate shades for use on various backgrounds.

Accessibility-tested for all color combinations
Gradients defined as reusable styles
Colors established as design tokens (variables) for seamless developer handoff

‍

Design Tokens

I created design token variables for colors, padding, and spacing, ensuring consistent cascading updates across the design. To streamline the developer handoff, I established a clear naming convention aligned with the project's design system for seamless integration.

‍

Alias Variables, children of global variables.These values are derived from global tokens, allowing them to automatically adapt to changes in the global variables. They are presented as Figma’s preferred property values, enabling quicker and more consistent application across components.

‍

Iconography

I utilized a pre-existing icon library from UI icons from Google's Material Design, added custom icons when needed, and created size variants as part of the design system atoms.

Component setup

The components follow a cascading hierarchy: Atoms, Molecules, and Organisms. This structure ensures that changes made at the atomic level seamlessly propagate to higher-level components.

‍Atoms are the smallest building blocks, including buttons, tags, logos, and icon placeholders, forming the foundation for more complex UI elements.

‍‍

Molecules: Composed of Atoms.

‍

Organisms: Composed of molecules and atoms.

Reflection

But did It work?

A design system is never truly "finished", it's an evolving framework that requires continuous testing and refinement. As new components were implemented, it was crucial to assess their impact on the overall product. To validate the effectiveness of these updates, I collaborated closely with the UX and development team to gather insights on what worked well and where improvements were needed.

Wins:

Reduced Design and Development Time – Designers and Developers spent less time coding new components, thanks to reusable elements.
Streamlined Handoff – The design-to-development handoff became more efficient, with minimal explanation required.
Improved Consistency – The coded design remained more uniform, reducing inconsistencies across the product.

Next Steps:

Design System Documentation – I realized the importance of clear documentation for all design system elements. Although it was my first attempt at creating comprehensive documentation, I realized there was much more to learn. To deepen my understanding, I took a master class from the Interaction Design Foundation (IxDF) on "How to Write Documentation People Will Actually Use" which helped me refine my approach and ensure the documentation would be both practical and effective.

This iterative approach reinforced the importance of ongoing collaboration and validation, ensuring that the design system not only enhances efficiency but also scales effectively over time.