Laying the foundation

Our initial step was to determine what elements of the design system RMS already had, and understand what parts we still needed to create.

We ran a design and development audit on their existing products to loosely define the foundation of the design system — gathering color, typography, spacing, and essential component styles. This discovery phase provided us a clear roadmap and allowed us to begin defining our standardized components.

We started by prioritizing the atomic levels of the Design System — typography styles, color styles, and spacing rules. We defined these rules first because they would ultimately affect the molecular elements of the system. We then built out the essential components (i.e. buttons, dropdowns, input fields, etc.) because these would be the building blocks for more complex parts. By starting with the smallest elements first, we built the foundation for a robust Design System.

Implemented workflow

Making things better for everyone

To build and manage our Design System, we use Sketch and Abstract. We have several Sketch Libraries, shared between all projects, which have their specific components. Abstract is a versioning control tool that allowed members of our design team to create their own branches of a particular Sketch Library, and freely explore and create components. Once created, we move to a review process, components are added to the Design System by merging that branch to the Master, without the risk of overriding a designer's work. Abstract also works as a shared workplace for collaboration where we have the design files for all products, so everything is always accessible to everyone.

The technical strategy

Nagarro and RMS team during a workshop session

Collaboration

Support all teams

The key priority of the RMS Design Systems Team is the ability to support Designers while keeping a high level of quality, consistency, and usage of components and patterns.

The most crucial process that we have is communication. When the design system team communicates the purpose, usage, and best practices of each component or pattern — designers have more time to focus on creating a better user experience, rather than pushing pixels.

Abstract for Sketch allows multiple designers from the team to work on a single shared library file at the same time, and then push changes to the Master. This setup proved to be an excellent way to experiment and propose better solutions to existing problems, without affecting existing app design.

Component creation

Focus on product experience

We worked with RMS to make sure each component worked and behaved as intended. With a large inventory of components and a variety of applications, we created components that could easily resize and be useful on any platform. Our goal was to design pixel-perfect and straightforward components that enabled RMS designers and developers to focus on designing the product experience, rather than worrying about spacing, color, or type values.
To avoid issues with symbols and to give designers the ability to iterate and create new components for each product, we have a dedicated Sketch Library that’s connected to the Design System and the product main Sketch file.

Compiling the library

We initially started using Invision DSM but due to the lack of functionality and some workflow issues, the designers moved to Sketch Shared Library. As the Design System evolved, the quantity and complexity of components became greater, as a result, working with the design system file became untenable. It became clear to us that we needed to break our design system files into manageable pieces.

The RMS design system consists of multiple Sketch Shared Libraries connected one to another.

Accessibility tests

Making the system usable for everyone

To ensure RMS products are usable for all people irrespective of their situation, abilities, or context, we run accessibility tests. The RMS design systems team continuously reviews the usage and accessibility of core design elements like colors, typography, and shapes — as well as components and patterns to ensure we create the best experience for all app users.

Illustration

Distinctive style

To achieve consistency across all RMS products, we created custom illustrations and iconography (concept, color, and style) that bring humanity and friendliness to the digital products and communicate complex actions and processes more effectively.

We approached the illustration work with a goal on our minds: to avoid the beaten path and go for a distinctive style. A mood board was set up to make us aware of what would and wouldn't work for RMS business. With that in mind, we were able to find a distinct illustration style for RMS - one that was recognizable, friendly, and unobtrusive. One other factor was at play: the need to have other designers easily replicate this visual language.

Bringing humanity and friendliness to RMS products

During this process, we set the principles and guidelines to be followed, such as the setting, environment, characters, and concepts to convey. We settled on representing the typical RMS customer environment (in an office or meeting room), as well as dressing them formally and promoting diversity by using a mix of races and genders. We also determined that illustrations should be supportive of the workflow a user is trying to complete. It is encouraged to simplify or use abstract notions to communicate complex concepts from that workflow.

Usually, illustrations start from a hand-drawn sketch, to explore freely and test different variations before going digital. We set rules for the color palette, line weight, geometry, and shading styles, as well as defining three different sizes for each application (optional), depending on the space it’ll occupy in each specific layout.

Iconography

The RMS Design Systems iconography is unique to RMS' software suite. It consists of both simple definitions and very complex industry terms. While the former was achieved with the help of Google's Material Design icon library, the latter needed a custom approach. To unite these approaches, the iconography follows Google's Material icon construction rules.

As with illustrations, there is a process set up for requesting new icons/icon collections. The app designer submits a ticket in Jira with a detailed description of what this symbol should represent. Usually, one complex message will result in several icon versions, each with different approaches to the subject. These icons are created in Illustrator and then submitted to the design team via a "voting ballot" set up in InVision, promoting strong collaboration, discussion, and decision-making process. Next, the final icon is grouped into a larger set and submitted for review by selected RMS clients via a poll on UsabilityHub. If the icon is accepted, it is merged with the Icon Library.

Icon library

Building adaptative icons

The Icon Library includes two subsets of icons: Iconic and Illustrative. Iconic includes regular single-color icons rendered in both 24px and 18px - a concise, stripped-down version for better display at smaller sizes. Illustrative consists of multi-colored 36px scalable icons sitting halfway between icon and illustration. This subset is as informational as it is decorative.

Summing it up

“We appreciate working with Nagarro so much. Our Design System is incredible because of their approach to craftsmanship.”

Mike Cummings
Lead Designer, RMS