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.
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.
We collected and analyzed dashboard and wizard patterns
We collected and analyzed dashboard and wizard patterns
We collected and analyzed dashboard and wizard patterns
We collected and analyzed dashboard and wizard patterns
Zendesk is a great example of a step by step wizard with common dashboard elements
Zendesk is a great example of a step by step wizard with common dashboard elements
Zendesk is a great example of a step by step wizard with common dashboard elements
Zendesk is a great example of a step by step wizard with common dashboard elements
PandaDoc is a great example of a dashboard
PandaDoc is a great example of a dashboard
PandaDoc is a great example of a 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.
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
The original dashboard that we continued to refine.
Different variations we tried for the dashboard.
Design for the step by step wizard.
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
Final status dashboard with UI improvements.
Final status dashboard with UI improvements.
Final status dashboard with UI improvements.
Final status dashboard with UI improvements.
Final step-by-step wizard that supported other features as needed.
Final step-by-step wizard that supported other features as needed.
Final step-by-step wizard that supported other features as needed.
Final step-by-step wizard that supported other features as needed.
Converting the dashboard to mobile was especially challenging.
Converting the dashboard to mobile was especially challenging.
Converting the dashboard to mobile was especially challenging.
Converting the dashboard to mobile was especially challenging.
Completed breakpoints across device sizes.
Completed breakpoints across device sizes.
Completed breakpoints across device sizes.
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
