SITUATION
A large American retail and outdoor recreation services corporation operated numerous digital properties that were refreshed frequently, necessitating continuous redesign and development that was becoming expensive to maintain and time consuming to deploy. The company wanted to build a design system—an online repository of visual styling and design components as well as an actual a code base for reusable modules that can be fitted together in different ways to create branded web properties and applications—for its developers and designers to utilize for efficiency purposes as well as to establish more consistency across its digital properties.
Benefits of a design system would include:
- Consistency in the digital experience for customers and employees
- Improved development velocity and ability to scale more quickly
- Unified communication and minimized redundancy in conversations across teams
- Reduction of one-off solutions and decision fatigue
- Education for vendor partners
- Faster onboarding for new designers and developers
- Lower all-around operational costs
The company partnered with a design-centric consulting agency to form the initial strategy and direction for the design system. However, more leadership was needed to address design processes and manage the design and development of the design system itself—for example, determining the body of work that needed to be performed, the best way for designers to organize the myriad of branding and style elements, and how to coordinate the handoff between designers and developers to create all the elements for the design system.
Ultimately, the company wanted to own the solution on-premise and in-house. They therefore sought a local managed services consulting partner to provide design expertise, development expertise, and program management expertise in a blended format on-site with their own internal teams. The company had achieved multiple successes in website design and development for the digital experience of their web properties and applications with AIM Consulting in the past and upon learning that AIM had expertise in design systems and had developed design systems for other prominent retail companies, decided to engage AIM to execute the solution as a managed service.
SOLUTION
AIM delivered a high-performance team, including a program manager, senior UX designer and four front-end developers, which comprised more than half of the total team, to lead the design system project as a managed service.
The design system included three major components:
- UI library
- GitHub site for all the development code, written in Vue.js
- Documentation site consisting of designer guidelines and development code for individual components
AIM began by reviewing the design system strategy as well as all the retailer’s web properties to assess how branding and design was currently being implemented, including navigation, images, buttons, colors, fonts, spacing and so on.
Utilizing an iterative, agile process, the AIM UX design consultant created the look and feel for the design system site itself— the structure, information architecture, interaction, features and functionalities, all optimized for the user experience. While the company’s internal design team made decisions on brand styles and elements, AIM helped to componentize them and make them consumable.
After evaluating React, Angular, and Vue, the internal development team decided upon Vue.js to develop the design system site. AIM’s developers worked with the internal team to determine how to define, standardize and prioritize the elements for the documentation site. GitHub was chosen to house the code because it could be shared across teams.
The design system documentation site aggregates a substantial amount of information:
- For designers, it includes brand design guidelines for specific components — how and when to use them, and when not to use them, thoroughly documenting the do’s and don’ts to ensure all designers stay in parity with one another.
- For developers, it includes information on APIs, how to install the design system into a project, how to implement each component, and instructions on how to manipulate the components — for example, how to add more detail and what can and cannot be modified with each component to stay within brand guidelines. It also includes live examples of each component so developers can see how they should appear and behave.
- The design system also includes accessibility guidelines and documentation on color contrasts, font sizes, and color usage for low-contrast readers. As this section grows, more accessibility features will be baked in to every digital project for designers and developers to ensure compliance with the American Disabilities Act.
- Documentation and messaging is also included for how to contribute feedback to the design system team to submit ideas, problems, and issues as well as information on how individual teams have adopted the system.
RESULTS
The company experienced tremendous efficiency gains with the new design system immediately, with one pilot team completing a website redesign in just six weeks, compared to 12 weeks for the same project the year before. Feedback has shown the system to be very understandable and simple to use.
An adoption plan has been implemented to roll out the design system documentation to all teams and designers and provide company-wide visibility to the full suite of components and best practices. Once the design system is fully implemented, the company will gain the additional benefit of implementing global design and branding changes for all of its digital properties simultaneously.
The AIM managed services team continues to enhance the project, such as adding a full suite of mobile design and styling components to the design system for the Responsive experience.
About AIM’s Design System Capabilities
Design systems represent the next step beyond style and brand guides for companies, enabling designers and developers to create and change elements to their projects efficiently. In the same mindset as a CI/CD pipeline, design systems help to streamline the process of seamlessly ingesting the right code and practices to maintain brand and style consistency throughout all of your digital properties, as part of a design platform of the future. AIM Consulting has the experience and knowledge to help you build an elite design system for your enterprise.
AIM Consulting provides the following services in customized solutions:
- Assessment and Strategy
- UX and Visual Design
- Front-End Development
- Web Accessibility
- Mobile Solutions
- Program and Project Management
- Delivery Leadership
- Managed Services
- Staff Augmentation
