Creating a scalable design system with accessibility principles
Challenge
Renner faced challenges in maintaining visual and functional consistency across its various digital platforms. There was an opportunity to improve development efficiency and user experience through a unified and accessible design system.
Goal
Create a design system that would standardize the brand's interface and interactions across all its digital platforms, facilitating collaboration between designers and developers, and ensuring accessibility for all users.
Research and Discoveries
Research methods
We conduct interviews with stakeholders and users, analyze accessibility audits and review existing development processes to identify areas for improvement. In addition, we also carried out Benchmarking analysis to understand reference design systems in other leading companies in the market to understand best practices and adapt them to Renner's context.
Key findings
We identified the need for reusable and accessible components that would facilitate the creation of consistent and inclusive interfaces. We also found that a lack of clear documentation made it difficult for designers and developers to collaborate effectively.
Design Process
Steps taken during the project
STRUCTURE AND PLANNING We start by defining the structure of the design system, including the creation of guidelines for colors, typography, spacing and essential components. COMPONENT DEVELOPMENT We developed a library of UI components, ensuring that each component met accessibility principles. Each component has been tested on multiple devices and scenarios to ensure it functions correctly and affordably. DOCUMENTATION FOR DEVELOPERS We created detailed documentation that included technical specifications, usage examples, and implementation guidelines, making handoff easier for developers. COLLABORATION WITH DEVELOPMENT We worked closely with the development team to ensure components were integrated efficiently and all technical issues were resolved quickly.
solutions
Final Design
Renner's design system includes a wide range of accessible UI components such as buttons, forms, menus and layout patterns. All components are designed to be intuitive and easy to use.
Main features
We incorporate WCAG (Web Content Accessibility Guidelines) guidelines into all components, ensuring adequate color contrast, keyboard navigation and support for screen readers. We have also created detailed documentation that provides a clear guide for developers and designers, with practical implementation examples and detailed instructions on how to adapt and reuse components in different contexts.
Client feedback
Impact and Lessons
Impacts on the business
The unification of visual identity and functionality across Renner's digital platforms helped strengthen the brand and improve customer satisfaction, resulting in greater loyalty and engagement.
Lessons learned
The importance of clear documentation and continuous communication between teams was a key lesson, ensuring that all stakeholders were aligned and that the project was delivered with quality and efficiency.
See next project
VIEW MORE PROJECTS