Eivee - Design System
( Case study )
Eivee, a carbon accounting web platform, developed a comprehensive design system to address the company's need for streamlined design and development.
Upon joining Eivee in the early stages of development, I discovered that the company had minimal design assets beyond a primary brand color and a logo. Recognizing the critical need for a comprehensive design system, I initiated the establishment of its foundation. Creating this design system was essential for ensuring visual consistency, streamlining design processes, and fostering collaboration across all product teams.
Challenge
Implementing a robust and scalable design system allowed us to provide a cohesive user experience, enhance overall design efficiency, and maintain the integrity of Eivee's brand throughout the carbon accounting software. My role was crucial in this transformation, as I ensured the design system addressed the needs of the product and development teams, ultimately delivering a consistent and user-friendly interface.
Solution
Service
Design System development, Creative Direction
The Design process
Research and Analysis
Conducted a comprehensive audit of existing designs and UI components across Eivee’s products.
Interviewed stakeholders, including designers, developers, and product managers, to gather insights and identify pain points.
Analyzed user feedback to understand the impact of design inconsistencies on the user experience.
System Architecture
Defined the goals and scope of the design system, ensuring it would be scalable and flexible to accommodate future growth.
Created a design system architecture, including a component library, style guide, and documentation.
Color Palette Expansion
Developed an expanded color palettes , ensuring it covered various use cases for digital interfaces.
Created color variants for different UI elements, including backgrounds, text, buttons, and alerts, ensuring accessibility and visual harmony.
Documented the new color system with guidelines for usage to maintain consistency across all products.
Component Design
Developed a library of reusable UI components, such as buttons, forms, cards, and navigation elements, ensuring they adhered to Eivee’s brand guidelines.
Designed each component with accessibility in mind, ensuring the system met WCAG standards.
Documented each component with usage guidelines, code snippets, and examples.
Implementation Oversight
Collaborated with the development team to integrate the design system into the codebase, ensuring seamless implementation.
Provided ongoing support and guidance to ensure proper usage of the design system components.
Results
Increased Efficiency: The design system significantly reduced the time required to design and develop new features, as designers and developers could leverage pre-designed components.
Consistency: Achieved a consistent look and feel across all Eivee products, enhancing brand identity and user experience.
Collaboration: Improved collaboration between designers and developers, with a shared language and set of tools.
Scalability: Enabled Eivee to scale its design efforts efficiently, supporting new product features and applications with ease.
The implementation of the Eivee design system successfully addressed the challenges of design inconsistency and inefficiency. By expanding the color palette and providing a unified framework of reusable components and comprehensive guidelines, the design system enhanced collaboration, improved user experience, and streamlined the design and development process. This project underscores the importance of user-centered design and data-driven decision-making in developing effective solutions that meet the evolving needs of businesses.