Overview
Our organization faced the challenge of migrating from a legacy code-base to a modern, web-based React platform. This transition presented an opportunity to streamline development processes and ensure consistent branding across multiple product lines.
Solution
To achieve these goals, we recognized the need to establish a robust design system. A design system would provide a library of reusable components that could be used across multiple products, ensuring consistency and reducing development time. By leveraging established design system tooling with comprehensive documentation, developers could easily understand and implement components correctly, further streamlining the development process.
By establishing a Design System, we could:
Improve Development Efficiency
By providing reusable components, the design system would reduce the time and effort required to build new features.
By providing reusable components, the design system would reduce the time and effort required to build new features.
Ensure Design Consistency
A unified set of components would help maintain a consistent look and feel across all products.
A unified set of components would help maintain a consistent look and feel across all products.
Facilitate Branding Updates
Changes to the company's branding could be easily applied globally.
Changes to the company's branding could be easily applied globally.
Streamline Collaboration
The design system would provide a shared language and understanding between designers and developers, improving collaboration.
The design system would provide a shared language and understanding between designers and developers, improving collaboration.
Enable Accessibility and Responsive Design First
The company prioritized accessibility from the outset, building the design system with accessibility standards in mind. Responsive design was implemented to ensure a seamless experience across different devices and screen sizes.
Implementing the Design System
When considering how to implement a design system and meet our tight six-month deadline for a new product launch, I evaluated two primary approaches: building custom styling for MUI components from scratch or utilizing a pre-existing template.
While a custom approach would have allowed us to deliver a functional application by our HITEC deadline, it would have initially resembled Google's default styling. This would have required additional development effort to customize the theme and align it with our desired design. Given our team's strengths in back-end development and limited experience in UI component creation, I pitched purchasing a template as a means to be more efficient and provide a cost-effective strategy.
By starting with a template, we could focus our resources on developing features that drive revenue, while allowing our product designers to concentrate on usability and functionality. This approach would enable us to deliver a visually appealing and high-quality product from the outset.
The template purchased was a cost-efficient way for us to deliver product quickly. The template we purchased was from Minimal.cc and included valuable assets such as Figma, theme, and template files in Vite format.
Since the purchase of the Minimal package, we implemented the following changes:
1) Component Audit
Existing components were carefully evaluated to identify areas that required updates or modifications to align with the purchased theme and the company's design vision.
Necessary changes were made to ensure consistency and maintainability.
2) Figma Design System Updates
Updates were needed for the Figma files to make it easy for the mid-level and junior designers. The packaged Figma file from Minimal provided theming variables that made it easy to update to match our brand colors.
I spent additional time creating variables and design tokens within the theming file to make it easier for the other designers to use and allows them to focus more on functionality and user experience while quickly iterating on components. This allows them to more easily switch between different action states or status colors with a couple clicks of a button.
3) Custom Components
To ensure a cohesive and efficient user experience across our product lines, I prioritized the development of reusable and scalable design patterns. By thoroughly testing and validating these patterns with users, I was able to assess their potential to be integrated into our existing design system to streamline future development efforts and enhance consistency. This iterative process allows us to continuously refine our design system and deliver a seamless user experience that aligns with the brand identity.
4) Light & Dark Mode
To enhance the design system's versatility and cater to user preferences, I committed to expanding our dark mode capabilities. By carefully reviewing and adding additional variables in Figma specifically tailored for dark mode, I was able to streamline the design process.
Designers now benefit from the ability to effortlessly convert their designs with a simple toggle, eliminating the time-consuming task of manually adjusting colors and elements for dark mode. This not only improves efficiency but also ensures a consistent and visually appealing user experience across all design variations.
Updating our Coded Design System
Once we identified updates to key components like buttons, input fields, and navigation menus, I volunteered to take on the role of Product Owner for the Design System. As part of this role, I've been responsible for managing the vision of our software design and ensuring it aligns with our company's brand standards and overall goals.
I work closely with our cross-functional team, including developers, designers, and product managers, to prioritize updates, ensure they align with our product roadmap, and provide the necessary information for efficient development. My skills in design themes and front-end code have been invaluable in these collaborations.
To streamline the development process, I've dedicated a designer to focus solely on design system component updates, allowing our development team to concentrate on revenue-generating projects. This ensures that the design system components are ready when the rest of the team picks up project work.
The updated design system has led to a 30% increase in development velocity and a significant improvement in user satisfaction scores.
Pairing & QA
To ensure a streamlined development process and maintain design consistency, I collaborated closely with developers during the coding phase. After an initial review to verify adherence to brand standards and expected design, components underwent the code review process with developers. To further validate functionality and cross-browser compatibility, I conducted comprehensive testing on the Alpha site, evaluating performance in both light and dark modes across various devices. This collaborative approach significantly accelerated development timelines and reduced the need for rework, resulting in a more efficient and effective development process.
Moving Forward
We are beginning work on our documentation for the design system using Supernova. This product has direct integration to Figma and the development pipeline, reducing the need for manual work and image creation.
This approach will streamline the documentation process and reduced costs compared to using Storybook. It also provides a centralized resource for all products, ensuring consistent usage and understanding of the design system.
