Creating a Flexible Design System to Deliver Cross-Solution Marketing Content
Diebold Nixdorf's ATM marketing application was redesigned on a reusable, accessible design system. Customers who tested the new experience scored it above 83% on system usability, compared with 31% for the existing solution.
One design system, many solutions
HatchWorks was engaged by Diebold Nixdorf to redesign an existing solution that enables financial institutions to create and deliver marketing content to ATM machines.
The goal was a flexible, reusable UI design system that could be used to update multiple existing solutions across the Diebold Nixdorf portfolio.
A feature that grew into an interface, still tied to the legacy platform
The current solution began as a feature of a legacy software platform and evolved over time into its own separate interface. Its strong ties to the legacy platform created a rigid, overly complex, difficult to understand user experience.
Rigid
Constrained by the legacy platform it grew out of.
Overly complex
Years of accretion, not a designed experience.
Hard to understand
Marketing users struggled with core tasks.
Prioritize for core users, then design the system underneath
-
01
Identify what matters most
HatchWorks worked with the Product team to identify and prioritize the features most essential and valuable to core users.
-
02
Match the workflows of marketing users
User workflows were created to match the work processes of marketing users within financial institutions.
-
03
Build a flexible design system
The design system incorporated brand standards, complex interactions, and accessibility standards, flexible and scalable enough to become the basis for UI revisions to other solutions in the portfolio.
Each layer is built from the one below it, so a change to a foundation flows through every solution that uses the system.
A new experience for the marketing application, and a system for the rest
HatchWorks delivered a comprehensive design system based in the Bootstrap framework, covering individual components such as buttons and menus and complex components such as table structures and modal layouts.
The system was used to define an entirely new experience for the marketing application, focused on enhancing core user activities while streamlining automation of marketing asset creation. Customers who volunteered to test the new design shared extremely positive feedback.
A rigid interface with strong ties to the legacy platform
Overly complex and difficult to understand for marketing users
Average system usability score of 31%
A reusable, accessible design system built on Bootstrap
An experience designed around core activities and automated asset creation
Average system usability score above 83%
Usability, before and after
average system usability score for the new design
for the existing ATM marketing solution
About the work
About Diebold Nixdorf
Diebold Nixdorf is a world leader in enabling connected commerce that automates, digitizes, and transforms the way people bank and shop, with ATM hardware and software plus solutions for banking and consumer engagement.
HatchWorks AI turns AI into ROI by automating key business processes, transforming data, deploying intelligent agents, and shipping AI-powered products that deliver measurable results. Its proprietary Generative-Driven Development methodology is a repeatable path from idea to production, blending AI, agents, and engineering to ship faster with less risk.
Carrying a portfolio of products that each look different?
See how HatchWorks AI builds design systems that fix the experience once and scale it everywhere.