Design System

In a rapidly evolving digital landscape, maintaining a cohesive user experience is essential for any organization. This case study outlines the challenges faced with a legacy InEight design system and the subsequent development of a new, streamlined InEight design system that meets contemporary user needs and enhances team efficiency.

The InEight legacy design system, developed over a decade ago, comprised outdated components, inconsistent styles, and limited scalability. This resulted in a fragmented user experience across products and slowed down the development process due to the reliance on custom solutions for new features.

• Inconsistency: Different teams used varying styles and components, leading to a disjointed experience for users.
• Inefficiency: Designers and developers spent excessive time creating custom solutions rather than leveraging reusable components.
• Accessibility Issues: The legacy system lacked updated accessibility standards, making it challenging to provide an inclusive experience.
• Technical Debt: Outdated technologies and design patterns increased maintenance costs and slowed innovation.

• Consistency: Create a unified set of components and guidelines to ensure a coherent experience across all InEight products.
• Efficiency: Streamline design and development processes to reduce time spent on UI development.
• Accessibility: Integrate modern accessibility standards to cater to a diverse user base.
• Scalability: Design a flexible system that can evolve with future needs and technologies.

• Research and Audit: Conducted a thorough audit of the existing InEight design system and user feedback to identify pain points.
• Stakeholder Engagement: Collaborated with designers, developers, and product managers to gather insights and build consensus on the new InEight design system’s goals.
• Component Library Development: Created a comprehensive library of reusable components, ensuring adherence to modern design principles and accessibility standards.
• Documentation: Developed detailed documentation, including usage guidelines, design tokens, and accessibility checklists.
• Training and Support: Provided ongoing support to facilitate adoption across teams.

The InEight Style Guide strategy was to be implemented as a phased approach: 1. Create Style Guide and Component Library in Axure RP to align with the Kendo UI for Angular components 2. Leverage Kendo UI Design Kits for Figma and Transition Style Guide over to Figma 3. Implement the Kendo UI ThemeBuilder tool applying the InEight brand.

• Improved Consistency: The new InEight design system provided a cohesive look and feel across all products, enhancing brand identity.
• Increased Efficiency: Teams reported a 30% reduction in design and development time, allowing for faster iterations and releases.
• Enhanced Accessibility: The integration of accessibility best practices led to improved user satisfaction and a broader user base.
• Reduced Technical Debt: The shift to modern technologies reduced maintenance costs and positioned InEight for future growth.

The development of a new InEight design system not only replaced the legacy system but also transformed the organization’s approach to user experience. By prioritizing consistency, efficiency, and accessibility, the new InEight design system has enabled teams to innovate rapidly while providing users with a seamless and inclusive experience. This case study underscores the critical importance of a well-designed design system in today’s digital environment.