Redwood Design System
Background
The Redwood design system was a cross-platform design system featuring a cohesive set of components ensuring consistency and ease of implementation across various projects. I led the creation of a cohesive set of components to address inconsistent user experiences across platforms.
Description
As a design system product designer, I focused on creating a unified user experience across web, mobile, and other platforms. Using Figma and my expertise in UI/UX design and system architecture, I collaborated with the design system team to build scalable, reusable components that enhanced both user experience and development efficiency. Unifying user experiences through a cohesive design system.
Problem Statement
Inconsistent design elements across platforms create confusion and inefficiency, reducing development speed and user satisfaction. Redwood ensures a consistent experience and accelerated development.
Research
Teams wanted to adopt a design system but lacked resources, with users pointing out unresolved consistency issues. Developers and designers were frustrated with starting from scratch, but the concept of improved usability and a more cohesive experience across products sparked the research to kick off the beginnings of Redwood.
The research was driven by extensive user feedback and a commitment to understanding the needs and preferences of our design and development teams. Through a combination of qualitative and quantitative research methodologies, including user interviews, surveys, and usability testing, we gathered critical insights that shaped the system's evolution.
User Feedback:
We conducted interviews with designers and developers across multiple teams to identify common pain points in the existing design processes. Users consistently expressed a desire for a unified system that promotes consistency while allowing for flexibility. Feedback highlighted the need for standardized components that could streamline workflows, reduce duplication of effort, and enhance collaboration.
Surveys:
In addition to interviews, we distributed surveys to gather broader input on the existing design practices. The results indicated that many teams felt overwhelmed by disparate design tools and inconsistent design language. A significant majority of respondents expressed enthusiasm for a centralized design system that could provide clear guidelines and reusable components.
Usability Testing:
Usability testing sessions revealed that users often struggled with navigating between different products due to inconsistencies in design elements and interactions. By observing users as they engaged with various interfaces, we identified key areas for improvement in both the design and documentation of the system. This led to refinements that made the design system more intuitive and user-friendly.
Inconsistency Hinders Effeciency
Find Your North Star
Prepare A Plan
Building & Iterating a Scalable Design System
Below are key elements of the design system, including state examples, color schemes, typography, and detailed documentation. These components highlight the system’s value in ensuring consistency, clarity, and an enhanced user experience.
States & Colors & Typography
Documentations
Before & After
Before the design system, the product suffered from inconsistent UI elements, fragmented user experiences, and lengthy development cycles due to a lack of standardized components. After implementing the design system, we achieved a cohesive and unified visual language, streamlined workflows, and faster product iterations. The improvements led to increased efficiency for development teams, better scalability across products, and enhanced user satisfaction through a more intuitive and consistent interface.
Learnings
The key learnings and takeaways from the Redwood design system revealed that while initiating the project posed challenges, once we gained traction, momentum quickly followed. Our team effectively shipped components and achieved widespread adoption across various products and teams.
