Quadient: Design System Screen for Mailing Machine

Quadient, a global leader in mailing and document automation solutions, tasked our UX and UI team with redesigning the interface for their new mailing machine, which is a 'transitional machine' for the mailing machine that fit better in the new generation that catch up with the latest technology behaviours trends.

Quadient's product and service can be founded at:
https://www.quadient.com/en-gb/homepage

Quadient: Mailing Machine Screen

Quadient, a global leader in mailing and document automation solutions, tasked our UX and UI team with redesigning the interface for their new mailing machine, which is a 'transitional machine' for the mailing machine that fit better in the new generation that catch up with the latest technology behaviours trends.

Quadient's product and service can be founded at:
https://www.quadient.com/en-gb/homepage

The Problem

The current interface supported both everyday users (e.g. office staff handling mail tasks) and admin-level users (e.g. technicians managing system settings and saved content) all within a constrained, shared device. The legacy UI was outdated and cluttered, with poor role separation and no clear feedback for modification actions.

Objective

The goal was to modernise the machine’s interface while respecting established behaviours used by long-time, non-technical operators.


The new design aimed to simplify complex interactions, making the experience more approachable for new users, while ensuring that experienced users wouldn't need to relearn the system entirely during this critical transition phase.

My contribution

I led UX research and design, coordinated with a small design team, and managed ongoing feedback sessions with both the technical and customer-facing client teams. I helped navigate the balance between modern usability standards and on-device logic required by the business and hardware constraints.

Outcome


We delivered a redesigned interface that introduced:

Simplified rate selection flows for operational clarity

Clear visual role separation between user types

Improved in-device editing tools with intuitive cancel/confirm actions

A modern, touch-friendly UI aligned with Quadient’s rebranding of the new machine

EMPATHISE

EMPATHISE

The current screens design

The current screens design

Apart from analysing the existing interface, getting insights from the stakeholders, we also let 3 users to actually experience two models of the mailing machine that were similar to the new model that the client was trying to design. We then discovered several pain points affecting both clarity and usability, especially for non-technical or first-time users.

These included inconsistent navigation patterns, unclear terminology, small touch targets, and weak visual hierarchy. These issues posed a challenge in balancing legacy familiarity with modern usability improvements.

Apart from analysing the existing interface, getting insights from the stakeholders, we also let 3 users to actually experience two models of the mailing machine that were similar to the new model that the client was trying to design. We then discovered several pain points affecting both clarity and usability, especially for non-technical or first-time users.

These included inconsistent navigation patterns, unclear terminology, small touch targets, and weak visual hierarchy. These issues posed a challenge in balancing legacy familiarity with modern usability improvements.

Noticeable issues in the Empathise Phase:

Weak visual hierarchy (similar font style for heading, body; CTA buttons are not prominent;

Inconsistent UI patterns (some buttons have arrow but some do not.)

No onboarding or contextual help. For users encountering this for the first time, there is no explanation, tooltip, or guided step — especially for editable content or settings.

DEFINE

DEFINE

Pain points and User Needs

Pain points and User Needs

After reviewing the existing interface of the existing mailing machine model and gathering stakeholder input, we identified key usability challenges:

After reviewing the existing interface of the existing mailing machine model and gathering stakeholder input, we identified key usability challenges:

Tradition Screens Pain Points:

Combines usage and admin setup on the same screen

Lacks visual clarity, feedback, and modern UI standards

Leaves new users confused, while risking alienating long-time users if changed too drastically

User Needs

Long-time users: These are mostly less tech-savvy users who need familiar interaction flows, minimal re-learning, and quick access to routine tasks.

New/infrequent users: Typically younger users who are more familiar with modern UX patterns but less accustomed to older interface behaviours. They prefer clear labels, simplified navigation, and improved visual clarity.

Admins: Access management tools without cluttering everyday screens

How might we?

How might we?

? ...modernise the user interface while preserving familiar patterns that long-time users rely on?


? ...clearly separate administrative controls from everyday tasks, even when they share the same screen space?


? ...enhance clarity and usability to meet modern UX standards, without disrupting the habits of less tech-savvy users?

? ...modernise the user interface while preserving familiar patterns that long-time users rely on?


? ...clearly separate administrative controls from everyday tasks, even when they share the same screen space?


? ...enhance clarity and usability to meet modern UX standards, without disrupting the habits of less tech-savvy users?

IDEATION

IDEATION

Design Iteration

Design Iteration

Working closely with the design team, we explored a wide range of wireframe concepts to address the needs of both end-users and Quadient’s internal teams. We collaborated in rounds of design sketching, internal critiques, and client feedback sessions, iterating frequently to align on solutions that balanced usability, business requirements, and technical feasibility.

The process was intentionally iterative and collaborative, involving continuous input and review from both sides of the client — including the technical and customer-facing teams. This required us to manage feedback from multiple layers of decision-makers and maintain flexibility as the design evolved.

The wireframe map below is a reflection of the trial-and-error process we went through — a result of testing ideas, resolving conflicting priorities, and gradually shaping a direction that was ultimately signed off by all key stakeholders.

Working closely with the design team, we explored a wide range of wireframe concepts to address the needs of both end-users and Quadient’s internal teams. We collaborated in rounds of design sketching, internal critiques, and client feedback sessions, iterating frequently to align on solutions that balanced usability, business requirements, and technical feasibility.

The process was intentionally iterative and collaborative, involving continuous input and review from both sides of the client — including the technical and customer-facing teams. This required us to manage feedback from multiple layers of decision-makers and maintain flexibility as the design evolved.

The wireframe map below is a reflection of the trial-and-error process we went through — a result of testing ideas, resolving conflicting priorities, and gradually shaping a direction that was ultimately signed off by all key stakeholders.

DESIGN &

PROTOTYPE

DESIGN &

PROTOTYPE

DESIGN &

PROTOTYPE

Components

Components

One of the major design shifts in the Vega 2 interface was a rebranding of the colour scheme. Quadient’s stakeholders wanted the new interface to feel fresh, modern, and reflective of high-tech innovation, aligning with the release of the new-generation machine.


To guide this transition, we proposed a colour re-evaluation exercise. We presented six colour theme concepts internally and gathered feedback through a collaborative survey process with stakeholders across Quadient — including both technical and customer-facing teams.


The turquoise green theme emerged as the top choice, receiving the highest number of votes and resonating with both client expectations and design best practices. From our perspective as designers, it also offered:


  • Strong contrast for accessibility

  • A clean, modern aesthetic

  • A clear departure from the older interface, without being disruptive


This final palette became the foundation for a cohesive component system that we developed across the entire UI — including navigation bars, buttons, status indicators, and icon sets — all while maintaining usability for both new and long-time users.

One of the major design shifts in the Vega 2 interface was a rebranding of the colour scheme. Quadient’s stakeholders wanted the new interface to feel fresh, modern, and reflective of high-tech innovation, aligning with the release of the new-generation machine.


To guide this transition, we proposed a colour re-evaluation exercise. We presented six colour theme concepts internally and gathered feedback through a collaborative survey process with stakeholders across Quadient — including both technical and customer-facing teams.


The turquoise green theme emerged as the top choice, receiving the highest number of votes and resonating with both client expectations and design best practices. From our perspective as designers, it also offered:


  • Strong contrast for accessibility

  • A clean, modern aesthetic

  • A clear departure from the older interface, without being disruptive


This final palette became the foundation for a cohesive component system that we developed across the entire UI — including navigation bars, buttons, status indicators, and icon sets — all while maintaining usability for both new and long-time users.

Installation Flow and Guidance

Installation Flow and Guidance

To support a smooth onboarding experience, we designed a step-by-step installation flow for first-time machine setup. The flow was structured to guide users through language selection, network connection, software and graphics updates, access control, and PIN creation — all with clear progress indicators and actionable guidance.

This flow was especially important for non-technical users, ensuring they could set up the device without external help. In addition, we built in easy access to these instructions after setup via the “?” Help icon in the bottom navigation bar — allowing users to revisit any step at any time without navigating through menus or needing a manual.

The result is a more accessible, flexible, and self-service-friendly installation experience that reduces dependency on support staff and increases confidence in using the system right from day one.

To support a smooth onboarding experience, we designed a step-by-step installation flow for first-time machine setup. The flow was structured to guide users through language selection, network connection, software and graphics updates, access control, and PIN creation — all with clear progress indicators and actionable guidance.

This flow was especially important for non-technical users, ensuring they could set up the device without external help. In addition, we built in easy access to these instructions after setup via the “?” Help icon in the bottom navigation bar — allowing users to revisit any step at any time without navigating through menus or needing a manual.

The result is a more accessible, flexible, and self-service-friendly installation experience that reduces dependency on support staff and increases confidence in using the system right from day one.

Home Screen

Home Screen

To modernise the interface while preserving user familiarity, Home screen was one of the screens we redesigned with a cleaner layout, improved visual hierarchy, and a new turquoise colour scheme aligned with Quadient’s refreshed brand.

Key changes included:

  • Simplified icons and typography for better clarity

  • Consistent card-style components for improved readability

  • Streamlined bottom navigation for ease of use

The new design maintains the core structure of the old interface to support long-time users, while offering a more modern, accessible experience for new users.

To modernise the interface while preserving user familiarity, Home screen was one of the screens we redesigned with a cleaner layout, improved visual hierarchy, and a new turquoise colour scheme aligned with Quadient’s refreshed brand.

Key changes included:

  • Simplified icons and typography for better clarity

  • Consistent card-style components for improved readability

  • Streamlined bottom navigation for ease of use

The new design maintains the core structure of the old interface to support long-time users, while offering a more modern, accessible experience for new users.

Rate selection screens

Rate selection screens

The new rate selection flow balances clarity and control. It empowers users to build their rate step-by-step while keeping the experience clean, scannable, and approachable for both experienced and occasional users.

We restructured the Rate Selection flow to improve clarity and usability — particularly for users navigating complex postage rules and service combinations. Home icon was specifically designed to be always shown on the screen, acting as "Back" or "Exit" while the system automatically saved the changes the users have made.

These flows were tailored for the UK market, where specific mailing formats and surcharge structures differ from other regions. While we also developed screen variations for multiple international markets, the examples shown here reflect the UK-specific flow and pricing logic.

The new rate selection flow balances clarity and control. It empowers users to build their rate step-by-step while keeping the experience clean, scannable, and approachable for both experienced and occasional users.

We restructured the Rate Selection flow to improve clarity and usability — particularly for users navigating complex postage rules and service combinations. Home icon was specifically designed to be always shown on the screen, acting as "Back" or "Exit" while the system automatically saved the changes the users have made.

These flows were tailored for the UK market, where specific mailing formats and surcharge structures differ from other regions. While we also developed screen variations for multiple international markets, the examples shown here reflect the UK-specific flow and pricing logic.

Improved In-Machine Modifications/Updates

Improved In-Machine

Modifications/Updates

We redesigned the modification flow to make it easier and safer for users to manage saved graphics and messages directly on the machine. Key improvements included:

  • A clear edit mode with a “Cancel” button to safely exit without changes

  • Checkbox selection with feedback to enable bulk actions like delete

  • Disabled delete buttons by default to prevent accidental actions

  • Improved touch target sizing and layout clarity for better accessibility

  • Clear distinction between use and modify modes

These changes reduced confusion, especially for less tech-savvy users, and gave admin users more confidence in managing content without support.

We redesigned the modification flow to make it easier and safer for users to manage saved graphics and messages directly on the machine. Key improvements included:

  • A clear edit mode with a “Cancel” button to safely exit without changes

  • Checkbox selection with feedback to enable bulk actions like delete

  • Disabled delete buttons by default to prevent accidental actions

  • Improved touch target sizing and layout clarity for better accessibility

  • Clear distinction between use and modify modes

These changes reduced confusion, especially for less tech-savvy users, and gave admin users more confidence in managing content without support.

REFLECTION

REFLECTION

This project taught me a great deal about designing within a complex business and technical environment, where our solutions needed to align with not only user needs, but also business goals and system constraints. It was a strong reminder that good design must be realistic and context-aware — especially during transitional phases where both legacy and new users coexist. Balancing innovation with continuity was challenging, but also incredibly rewarding as we shaped a design that modernised the experience while respecting long-standing user habits.


This project taught me a great deal about designing within a complex business and technical environment, where our solutions needed to align with not only user needs, but also business goals and system constraints. It was a strong reminder that good design must be realistic and context-aware — especially during transitional phases where both legacy and new users coexist. Balancing innovation with continuity was challenging, but also incredibly rewarding as we shaped a design that modernised the experience while respecting long-standing user habits.


© Gemma Bao Tran, 2025

Email contact: gebao.nt@gmail.com