The Development of REI Design Systems Exstensive Library

RDS (REI Design System) is an all-encompassing solution to help REI Systems become more efficient, design standardised and differentiated in the bids for contract assignments. Here’s a process organized into sections to describe how RDS is designed, deployed and supported.

1. Defining Objectives

This is the most important aim of RDS, to simplify the user interface creation process so REI can produce consistent, high quality designs quickly. This design system can be used for the diverse needs of government and business projects with a focus on reuse and scale. It will be used by the in-house teams (designers, developers, project managers) with accessibility standards, a user-centric approach, and operational simplicity.

2. Research and Benchmarking

RDS is thoroughly researched prior to design to make sure it is industry standard while being tailored to REI’s needs. This includes looking at design processes that competitors implement (Material Design, Carbon etc.) to understand what is missing and where you can differentiate. Workshops and interviews with stakeholders help get visibility on workflow issues so that RDS solves real-life issues. A review of the existing REI design patterns and reuseable code also adds in the tested things, minimizing redundant steps and optimizing development.

3. Establishing the Foundation

RDS must have a solid base for success. Consistency, Flexibility, Accessibility – the design system is built with these fundamentals in mind. Uniformity – for consistent user experience across all projects, extensibility – for customization for diverse client requirements, and accessibility – for WCAG 2.1 AA. RDS visual brand identity consists of a high-quality typeface, one colour palette that was both brand-friendly and usable, and specially crafted icons to help with brand recognition. Design tokens codify underlying styles such as colors, spacing, and typography to be lightweight and dark.

4. Building the Component Library

At the heart of RDS is its component library, created using Figma. Using atomic design, the library begins with basic stuff such as buttons and inputs and then evolves to more advanced stuff such as modals and navigation bars. Naming patterns and hierarchy are clear in Figma which helps in scalability. Conceptual designs are developed to replicate real-world interactions and elements are thoroughly tested for device and accessibility (screen reader, keyboard access, etc).

5. Integrating with Development

After design is complete, it is development. Components are written as reusable code in React and styling done in CSS-in-JS or SCSS. Storybook is used to write components and test them in isolation so that developers have an intuitive environment to experiment with and launch the system. A shared Github repo gives easy access to the RDS library and CI/CD pipelines are configured to keep code clean. A component can be API-ready and hooks and utilities simplify access to backend systems.

6. Documenting the System

RDS is only successful if we document everything clearly and well. There is a playbook where each element is defined for use, code standards, best practices etc. They also include accessibility policies and checklists so compliance becomes a standard in the workflow. - An interactive guide (built using Docusaurus or Notion) provides real-time documentation and live codesnippets that teams can use to learn and deploy the system.

7. Training and Implementation

RDS adoption on the design and development teams is made possible by training sessions. Workshops to introduce teams to the Figma library and train them to adopt the system in their workflows. In addition to this, example templates of popular use cases are built into the package for teams to start their projects with RDS easily.

8. Maintenance and Growth

RDS is built to keep evolving. In-built feedback loops to gather users and stakeholders’ feedback are created to keep the system adapted to the real world. Updates, quarterly or per project, keep RDS up to date with technologies and trends. There are internal teams that contribute ideas of parts or suggestions of enhancements, to foster a culture of sharing and creating.

9. Leveraging RDS in Proposals

Not only is RDS an efficiency tool at home but it’s also a strategic asset in REI’s proposals for contracts. If REI can provide examples of real-world projects with how RDS reduces the time to deliver projects and highlight scalability and accessibility, they can compete in bidding wars. Graphically enhanced presentations demonstrate the benefits of RDS, and support REI as a pioneer in providing scalable solutions.

Conclusion

With this methodology, RDS is an incredibly powerful design tool that automates REI Systems’ internal processes, improves consistency and accessibility, and differentiates the company in the market. By focusing on flexibility, scalability and innovation, RDS not only solves short-term pain points, but helps position REI as a pioneer in creating amazing user experiences.

• Category : UX/UI Design
• Date : 09/06/2022
• Client : REI Systems

View Project