top of page
freepik__create-a-realistic-mockup-take-img1-as-a-reference__13367.png

About business 

ERP solution manufactures high-speed money counting machines for retail banks, currency exchange centers, and high-volume retail operations. Their hardware is exceptional capable of processing 1,000 bills per minute with 99.9% accuracy.
But the software interface was lagging behind.

The machines featured an 8" portrait display (800×1280px) mounted beside the counter, designed to give cashiers real-time visibility into their counts. But the interface wasn't designed for the reality of how cashiers actually work — standing, moving quickly, verifying counts at a glance while managing customers and maintaining cash security.

Frank, the founder had a specific ask: Design the interface to match the speed and precision of the hardware itself.

The Problem

The existing interface treated money counting like data entry — rows of numbers, small fonts, spreadsheet-like layouts. It was functional, but it wasn't designed for the environment it lived in.

Cashiers had to stop to verify counts. They'd lean in, squint at the screen, mentally calculate totals. This broke their flow and introduced hesitation at the exact moment they needed confidence.


The interface demanded conscious attention when what cashiers needed was instant confirmation.

The core issue wasn't aesthetic - 
it was cognitive.

The screen was asking cashiers to read, interpret, and verify data in an environment built for speed and peripheral awareness. Every second spent decoding the interface was a second lost to the queue, the manager's scrutiny, or their own mounting stress.

Freepik .png

My Role

I was brought in as the sole designer to overhaul the interface from the ground up. The timeline was tight - Frank needed this implemented across his product line within months, and there was no budget for extensive field research.

My mandate was clear:

  1. Redesign the interface to support cashiers working at speed

  2. Develop interaction states for real-world scenarios (successful counts, counterfeit detection, machine errors)

  3. Deliver a complete design system to ensure consistency across future updates

Process:
Designing for Real life scenarios , Not Assumptions

Without the luxury of observing cashiers in the field, I had to work from first principles and Frank's operational expertise.

Understanding the Constraints

I started by mapping the physical and cognitive environment:

Physical Reality:
 

  • Cashiers stand 1-2 meters from the screen

  • They're handling cash simultaneously - eyes split between the stack and the display

  • The environment is often bright (retail) or cramped (bank back offices)

  • They process dozens of counts per shift under time pressure

Cognitive Reality:

  • They're not leisurely reviewing data they're confirming accuracy in under 2 seconds

  • They need to catch errors (counterfeit notes, miscounts) instantly

  • Mental fatigue builds throughout the shift

  • Any ambiguity creates hesitation, which compounds stress

The Design Challenge:

Design an interface that communicates instantly, without requiring focus.

Initial Exploration: The Wrong Direction

My first instinct was modernization through abstraction. I followed the wire-frame provided by frank and designed geometric representations - colored circles for denominations, polygons with embedded values. Clean. Contemporary. Scalable.

Wireframe.png
1.png
2.png

But when I tested it on myself — forcing a 2-second recognition test — I failed. I had to translate: Purple circle = €50. Orange polygon = €20.

That translation step, even if it only took 0.3 seconds, was the problem.

In high-stress environments, you can't ask users to learn a new visual language - design has to speak the one they already know.

One Key Insight Changed Everything!

We human don't 'Read Money' - we recognize 

I spent hours studying Indian rupee, Euro banknotes. Not as a designer analyzing typography or layout, but as a cashier would: by handling them, stacking them, counting them.

805.jpg
182.jpg

What I realized:

A cashier identifies a €50 note by overall look and feel, its orange hue and architectural motif - not the only number "50" They've handled thousands of these bills. Their brain processes it like recognizing a face, not like reading a data points.

This was the breakthrough moment for me :

The interface shouldn't explain money. It should mirror as it is.

5.png

Building the Interface

Based on this insight, I rebuilt the interface while performing multiple iterations on the notes style

Three major criterias to define a design completion:
 

  1. The 2 Feet-Rule
    Every element on screen colors, typography, visual weight  had to be legible from feet distance away. No more leaning. No more squinting to look in details.
     

  2. Peripheral awareness
    Use actual colors of euro notes (orange for €50, blue for €20, green for €100), so cashiers could verify counts with peripheral vision. the screen became ambient confirmation, not a focal point.
     

  3. Hierarchy Flip
    ~60% of the screen should be covered with notes and  ~20% with numbers of
    the notes -  the only thing that truly mattered. Everything else became
    supportive context.

IT 1.png
IT 2.png
IT 3.png

Final design

While considering multiple options we came up to the solution that we want something visually appealing, sleek looking, and easy on the eyes. 

Frame 77.png
freepik__create-a-realistic-mockup-take-img1-as-a-reference__13367.png
Mockup 2.png

Interaction Design

Once I figured out overall design, I designed for three critical scenarios: 

Default State (Zero Count) :

Clean, minimal interface. Total reads "€0.00" in large typography.

Ready for input.

Default.png

Active State (Counting in Progress) :

As bills pass through the machine, the corresponding note card animates in, showing:

 

  • Number of bills counted (e.g., "3× €50")

  • Running subtotal for that denomination

  • Live update of total value

Active.png

Error State (Counterfeit Detection)
When the machine flags a suspicious note:

 

  • The screen highlights the specific denomination

  • A clear warning appears: "Counterfeit detected Remove note from stack"

  • Visual attention is drawn without panic

Error.png

Testimonial

"Thank you for everything. Chintan listened carefully and had a really good idea, which keeps the user captivated with the design and interactions for the cash graphics !!"

Learnings

This project taught me that the most effective interface is the one users hardly notice. I discovered that by prioritizing recognition over recall, and by respecting the physical and cognitive demands of the task, I transformed the screen into an extension of the cashier's perception.

I believe the most sophisticated design decision is knowing when to step aside and let the user proceed unobstructed.

bottom of page