NCR

Summer '20 Internship

Project Overview

Project Overview

Problem

The NCR Design System was created to establish a new universal design system providing branding consistency across all enterprise products.

Solution

The NCR Design System is a dynamic project, meant to bring product teams together. It is the product of cross-team collaboration across NCR. Our aim is for the system to be the common anchor connecting all NCR products. When systems are built on common architecture, we can connect build products more fluently in a faster development cycle.

Impact

Provided design guidelines, front-end components, and Figma templates. Enabled faster product development, greater consistency across products, more tangible quality control measures. This can only be achieved by unification, and ultimately simplification of how we handled design internally.

My Role

Our team works with partners and stakeholders across the globe and of every discipline. I was responsible for designing the library and optimizing it throughout the pilot.

Design System Background

NCR had a variety of products that did not have consistency with the brand. We wanted high-quality design resources for designers, distributed through Figma libraries. We had to make sure it was easy-to-use, had framework-independent components for developers, and a schema for creating configurable products, and maintainable front-end codebases.

NCR had a variety of products that did not have consistency with the brand. We wanted high-quality design resources for designers, distributed through Figma libraries. We had to make sure it was easy-to-use, had framework-independent components for developers, and a schema for creating configurable products, and maintainable front-end codebases.

Measuring Impact and Success

The NCR Design System is a dynamic project, meant to bring product teams together. It is the product of cross-team collaboration across NCR. Our aim is for the system to be the common anchor connecting all NCR products. When systems are built on common architecture, we can connect build products more fluently in a faster development cycle.

4 Guiding Principles

4 Guiding Principles

Modern

We wanted users throughout the entire industry to have a system that is more up to date and with market trends that have become popular over the last few years to ensure that users feel like they are using a product that is not only easy to use but also fits in with the rest of the technology that people use everyday

Adaptable

When we spoke with stakeholders and other clients, they pointed out that adaptability was one of the main pain points. We needed to make sure we were designing with a lot of flexibility.

Convenient

Since the product aims to offer users the freedom of being tailored to their business, it meant that using the design system has to be more convenient than building a brand new product every time.

Accessible

We understood that not everyone can see the same colors, especially in different lighting environments, so we needed to be reassured that designers that build and tailor software for our clients are able to design for everyone.

Personas

Curious Cal

ATM Truck Driver

  • Plans his routes effectively to reach all his destinations on time

  • Wants to ensure he can access relevant data when on the road

  • Unsure how to use new systems

  • Skeptical and jaded regarding new technology in the financial space

Insightful Isabella

Supermarket Cashier

  • Responsible for making sure customers are in and out of lines as fast as possible

  • Involved in operational aspects of her local store

  • Struggles to balance all of her responsibilities

  • Cautious but willing to learn new technology

Visionary Vlad

Restaurant Waiter

  • Jack of all trades who takes care of all his customers in new ways

  • Works with the manager to create an environment that feels vibrant

  • Promotes the brand while treating customers respectfully

  • Open to new technology if he can improved see results

Field Research

Material Design

In order to get a good overview about benchmarks and trends in design systems, we conducted research from Material Design's documentations.

Ant Design

We utilized Ant Design's live theming environment to see how changes can be shown live for developers and designers to be on the same page.

The Design System

Atomic Design

We built from the ground up to ensure everything that went into this design system could be used in all enterprise products whether it was for NCR or white-labeling for vendors.

Buttons

We wanted interactions to be broken down and made sure across all systems that they were consistent with their transitions. These buttons include primary, secondary ghosts, dotted, and links. We also built the buttons for dark mode and their states.

Containers

We needed to make sure that the containers we used had states just like the buttons but were also as instructive to users if they encountered errors or disabled actions.

Light & Dark Mode

We designed for all lighting environments to tailor to our client’s branding themes so they will be able to have a fluid experience when they use their products.

Developer-Friendly

We wanted our engineers to also have some peace of mind when it comes to developing and tailoring products to our clients. This allows them to focus on the client’s real needs instead of taking on the nitty-gritty aspects of the product like the padding of icons and text in containers.

Usability Testing

We conducted user testing to dive deep into the needs of our clients, including users who use mobile services on a daily basis and potential users who are interested in mobile services but haven’t adapted to it yet. By learning about their motivations, frustrations, and needs, we were able to gain user insights.

Impact

The NCR Design System is live and is now available for use as an internal tool for designers in the company. NCR has plans to expand the project and continue to evolve the design system over the course of time.

View Motionworks AI