Crane Payment Innovations

Coin recognition

Coin recognition
Techno

.Net / WPF / XAML
Telerik library

Deliverables

Wireframes
UI Screens
Components Kit
HMI

Date
2017 - 2018

Overview

Coin recognition systems in slot machines, toll booths and vending machines need to be fast and reliable. To achieve this, batches of coins from all over the world are used to test the equipment and train recognition algorithms. The application I worked on is designed to prepare and optimize these algorithms with IA, which will be loaded via packages onto equipment deployed all over the world.

  • Context: Half-remote in Geneva (CH)
  • Sector: Cash and payments services
  • Product: Studio for coins recognition algorithms
  • Target audience: Currency engineers
  • Objectives: Facilitate the use of a complex process / Harmonize the interface / Support developments

Skills and activities

created icon

Analysis & Strategy

created icon

User Research

created icon

UX/UI Design

created icon

User Testing

created icon

Graphic Design

created icon

Data Visualization

created icon

Webdesign

created icon

Design System

created icon

Front-end dev

created icon

Team Collaboration

created icon

Artistic Direction

1. Research and organization


It was through direct contact with the development team and users in Geneva that I refined my understanding of the subject and its difficulties, particularly the high level of expertise required.

Screen sketch - Parameters

Stages in the design process :


⦁  Sorting cards and renaming workshop
⦁  UX flows
⦁  Co-design workshops
⦁  Wireframes
⦁  User testing
⦁  Graphic mockups
⦁  Component kit development
⦁  Screens coding and layout

2. Designing the solution


Optimizing these recognition algorithms involves many parameters, steps and datasets with real and fake currencies. I therefore proposed several approaches using wireframes, which we tested and refined with users.

Wireframe - Parameters selection to optimize algorithms
Wireframe - Creation of coins batch tests


3. Visual elements


Given the technical complexity, one of the challenges of this project was to be able to save time on graphic integration without sacrificing ergonomics and aesthetics. I therefore opted for a pre-existing graphic theme with Telerik's WPF components library, then reproduced and declined it rapidly on the graphic mockups.

UI mockup - Creation of coins batch tests
Graphic elements created with Adobe XD and Illustrator


4. Front-end development


Using this theme and the partly pre-existing component kit, I was able to use my years of experience in XAML to code missing elements and custom components. I then prepared animations and ready-to-use interface screens in XAML delivered to developers as the sprints progressed.

Conclusion

Good feedbacks on this experience, at all levels.

As this was a technically complex project, we had to be pragmatic and efficient. This was made possible with the agile method, access to internal users and a team of committed experts.

Following this experience, I had the chance to work on another project for CPI where I learned Angular and TypeScript...