Screenshot of different device sizes.

Product Design

Fintech Product Design

NCR needed to upgrade POS hardware at thousands of locations. I used NCR's MUI Design System to design a project management app with better UX for project managers and retail owners.

Screenshot of different device sizes.

Product Design

Fintech Product Design

NCR needed to upgrade POS hardware at thousands of locations. I used NCR's MUI Design System to design a project management app with better UX for project managers and retail owners.

Project Overview

Rebooting hardware, reclaiming market share

NCR VOYIX was getting outpaced by competitors like Toast and Square due to outdated point-of-sale (POS) systems and cumbersome project management tools.

We designed a project management app that streamlined the POS refresh process by introducing a Status Dashboard and Wizard interface, improving how project managers and retail owners handled site information.

This empowered their team to manage hundreds of projects at once and refresh systems so that retail customers could have a better check-out experience.

Responsibilities

Interaction Design

Interface Design

Product Design

Prototyping

UX Design

Responsibilities

Interaction Design

Interface Design

Product Design

Prototyping

UX Design

Tools

MUI Design System

Figma

Team

Sr. Product Manager

Jr. Product Manager

The Problem(S)

Manual, inefficient project tracking.

Overwhelming workload for PM's.

Outdated App led to inconsistent data.

Lack of updates for retail owners.

Too many projects, too little time

NCR’s project managers struggled to track and manage hundreds of simultaneous hardware refresh projects using an outdated MS Power App. The manual process required frequent phone calls and site visits, leading to inefficiencies and data inconsistencies.

This meant that refresh projects were incredibly slow with store owners forced to use old equipment that stifled their sales and frustrated customers with slow check-outs.

NCR needed to streamline projects and help retail store owners easily submit site information and communicating with project managers.

The Problem(S)

Manual, inefficient project tracking.

Overwhelming workload for PM's.

Outdated App led to inconsistent data.

Lack of updates for retail owners.

Too many projects, too little time

NCR’s project managers struggled to track and manage hundreds of simultaneous hardware refresh projects using an outdated MS Power App. The manual process required frequent phone calls and site visits, leading to inefficiencies and data inconsistencies.

This meant that refresh projects were incredibly slow with store owners forced to use old equipment that stifled their sales and frustrated customers with slow check-outs.

NCR needed to streamline projects and help retail store owners easily submit site information and communicating with project managers.

The existing app lacked a centralized dashboard and communication features.

The existing app lacked a centralized dashboard and communication features.

The existing app lacked a centralized dashboard and communication features.

The app had issues with alignment and button states that hurt usability.

The app had issues with alignment and button states that hurt usability.

The app had issues with alignment and button states that hurt usability.

The existing app lacked a centralized dashboard and communication features.

The app had issues with alignment and button states that hurt usability.

Research

Looking for Patterns

Looking for Patterns

I researched design patterns and features for dashboards and step by step wizards from companies like Zendesk and Pandadoc. This helped us design a solution that was intuitive and familiar for PM's and retail owners.

I researched design patterns and features for dashboards and step by step wizards from companies like Zendesk and Pandadoc. This helped us design a solution that was intuitive and familiar for PM's and retail owners.

Screenshot of different dashboards and wizards.

We collected and analyzed dashboard and wizard patterns

Screenshot of different dashboards and wizards.

We collected and analyzed dashboard and wizard patterns

Screenshot of different dashboards and wizards.

We collected and analyzed dashboard and wizard patterns

Screenshot of different dashboards and wizards.

We collected and analyzed dashboard and wizard patterns

Annotated screenshot of zendesk wizard

Zendesk is a great example of a step by step wizard with common dashboard elements

Annotated screenshot of zendesk wizard

Zendesk is a great example of a step by step wizard with common dashboard elements

Annotated screenshot of zendesk wizard

Zendesk is a great example of a step by step wizard with common dashboard elements

Annotated screenshot of zendesk wizard

Zendesk is a great example of a step by step wizard with common dashboard elements

Screenshot of project status dashboard

PandaDoc is a great example of a dashboard

Screenshot of project status dashboard

PandaDoc is a great example of a dashboard

Screenshot of project status dashboard

PandaDoc is a great example of a dashboard

Screenshot of project status dashboard

PandaDoc is a great example of a dashboard

These dashboards use established patterns for sharing a lot of info at a glance, giving people a visual of where they are, whats at risk, and what needs to be done next.

Using these patterns reduces cognitive load because people are already familiar with them. They don't need to relearn your app from scratch.

This makes the app more intuitive from the start, reducing the likelihood of usability flaws after launch that eat into project revenue.



Design Process

Designer in an app shell

Working with NCR's MUI Design System, I designed the interface in collaboration with our solutions product managers.

We were under a tight deadline to design desktop, tablet, and mobile breakpoints for the dashboard and step-by-step wizard in just one week.

We stuck to the essentials, knowing that any additional element would cost us time and money that we couldn't afford.

Below you'll find the initial designs and iterations for the dashboard and step-by-step wizard.

MUI design system similar to what NCR provided. Their system was well documented and detailed.

MUI design system similar to what NCR provided. Their system was well documented and detailed.

MUI design system similar to what NCR provided. Their system was well documented and detailed.

MUI design system similar to what NCR provided. Their system was well documented and detailed.

Solution

Status, Progress, Communication

A clear but information rich status dashboard gave project managers a high-level overview of ongoing and completed projects, showing real-time data through progress trackers.

A wizard interface guided retail owners through a simplified process to submit site-specific information, with info tips when needed to provide support. The wizard was also flexible to support other modules of information that NCR might need.

This made the product scalable other business verticals and more valuable to NCR.

Key Successes

Status Dashboard

Step-by-Step Wizard

Delivered PoC

Key Challenges

No access to retail owners

No time or money for usability testing

A clear but information rich status dashboard gave project managers a high-level overview of ongoing and completed projects, showing real-time data through progress trackers.

A wizard interface guided retail owners through a simplified process to submit site-specific information, with info tips when needed to provide support. The wizard was also flexible to support other modules of information that NCR might need.

This made the product scalable other business verticals and more valuable to NCR.

Key Successes

Status Dashboard

Step-by-Step Wizard

Delivered PoC

Key Challenges

No access to retail owners

No time or money for usability testing

Screenshot of Status dashboard.

Final status dashboard with UI improvements.

Screenshot of Status dashboard.

Final status dashboard with UI improvements.

Screenshot of Status dashboard.

Final status dashboard with UI improvements.

Screenshot of Status dashboard.

Final status dashboard with UI improvements.

Final design for step-by step wizard.

Final step-by-step wizard that supported other features as needed.

Final design for step-by step wizard.

Final step-by-step wizard that supported other features as needed.

Final design for step-by step wizard.

Final step-by-step wizard that supported other features as needed.

Final design for step-by step wizard.

Final step-by-step wizard that supported other features as needed.

Screenshot of mobile breakpoints.

Converting the dashboard to mobile was especially challenging.

Screenshot of mobile breakpoints.

Converting the dashboard to mobile was especially challenging.

Screenshot of mobile breakpoints.

Converting the dashboard to mobile was especially challenging.

Screenshot of Status dashboard.

Converting the dashboard to mobile was especially challenging.

Screenshots for tablet and mobile.

Completed breakpoints across device sizes.

Screenshots for tablet and mobile.

Completed breakpoints across device sizes.

Screenshots for tablet and mobile.

Completed breakpoints across device sizes.

Screenshots for tablet and mobile.

Completed breakpoints across device sizes.

Statement of Work. Signed.

Designing the initial phases of this product gave NCR the confidence to sign STAND 8 to a larger statement of work (SOW).

Not only did they roll the final product out to their small business vertical, but other verticals as well.

Notably, this was our companies first large scale digital engineering project and allowed us to further grow and build the solutions division, bringing in key revenue for the company.

Results

Reduced manual effort and errors.

Intuitive UI made project tracking easier.

Retail owners could submit and track info.

Design led to scalable project management.

Stand 8 increased capabilities and revenue.

Reduced manual effort and errors.

Intuitive UI made project tracking easier.

Retail owners could submit and track info.

Design led to scalable project management.

Stand 8 increased capabilities and revenue.

Statement of Work. Signed.

Designing the initial phases of this product gave NCR the confidence to sign STAND 8 to a larger statement of work (SOW).

Not only did they roll the final product out to their small business vertical, but other verticals as well.

Notably, this was our companies first large scale digital engineering project and allowed us to further grow and build the solutions division, bringing in key revenue for the company.

Results

Reduced manual effort and errors.

Intuitive UI made project tracking easier.

Retail owners could submit and track info.

Design led to scalable project management.

Stand 8 increased capabilities and revenue.

Up Next