Diebold Nixdorf
Creating a flexible design system to deliver cross-solution marketing content
- Heuristic evaluation
- UX design
- UI design
- Accessibility compliance
- Design system creation
HATCHWORKS TEAM
Product Strategist, UX Designer, Product Analyst, Solution Architect, Client Engagement Lead
Overview
HatchWorks was engaged by Dielbod Nixdorf to redesign an existing solution that enables financial institutions to create and deliver marketing content to ATM machines. The desired goal was to create a flexible, reusable UI design system that could be used to update multiple existing solutions across the Diebold Nixdorf portfolio.
The Challenge
The current solution for creating and delivering marketing content began as a feature of a legacy software platform, and had evolved overtime to become its own separate interface. However, there were still strong ties to the legacy platform which created a rigid, overly complex, and difficult to understand user experience.
The Process
HatchWorks worked with the Diebold Nixdorf Product team to first identify and prioritize the solution’s features that were the most essential and valuable to their core users. From there, user workflows were created to ensure that the new design delivered a seamless, logical experience that matched the work processes of Diebold Nixdorf’s marketing users within various financial institutions.
Once the user flows were established and validated, the HatchWorks team began creating a flexible design system for the solution. It was imperative that this design system not only met brand standards, supported complex interactions, and met accessibility standards, but that it was also flexible and scalable enough to become the basis for UI revisions to other solutions in the Diebold Nixdorf portfolio.
Once the user flows were established and validated, the HatchWorks team began creating a flexible design system for the solution. It was imperative that this design system not only met brand standards, supported complex interactions, and met accessibility standards, but that it was also flexible and scalable enough to become the basis for UI revisions to other solutions in the Diebold Nixdorf portfolio.
The Outcome
HatchWorks delivered a comprehensive design system based in the Bootstrap framework that encompassed individual components such as buttons and menus, as well as more complex components such as table structures and modal layouts.
These components were used to define an entirely new experience for the marketing application that focused on enhancing core user activities, while also streamlining the automation of marketing asset creation.
Customers who volunteered to test the new design shared extremely positive feedback, with the average system usability score at more than 83%, compared to 31% for the existing ATM marketing solution.
These components were used to define an entirely new experience for the marketing application that focused on enhancing core user activities, while also streamlining the automation of marketing asset creation.
Customers who volunteered to test the new design shared extremely positive feedback, with the average system usability score at more than 83%, compared to 31% for the existing ATM marketing solution.
About Diebold Nixdorf
Diebold Nixdorf is a world leader in enabling connected commerce that automates, digitizes and transforms the way people bank and shop. Diebold Nixdorf offers ATM hardware and software as well as a portfolio of solutions to support banking and consumer engagement.
