Scroll Down

Case study: M4B

Self checkouts
of the future

m4b-banner
Summary

M4B S.A. is the European market leader in Digital Signage, manufacturer and supplier of LCD monitors and LED screens, digital menu boards and totems, self-service kiosks and checkouts and special software.

Sector

E-kiosks
Self checkout

Our role
  • Benchmarking
  • Co-creation
  • Usability Testing
  • UX Design
  • UI Design
  • UX Writing
  • Implementation Support

Challenge

How to introduce new features to self checkouts?

Our client came to us with a challenge no other UX agency has seen before. They wanted to revolutionize the market of self checkouts but didn’t know whether people would understand the new features without onboarding.

Our approach

I
Benchmarking
Description

We started with gathering good practices and benchmarks from self checkouts available in 8 different chains of stores used by thousands of clients every day. We had a few iterations and performed expert analysis of these interfaces. Some of them were unique and inspiring, some showed us what to avoid.

Tasks
  • Benchmarking
  • Expert Analysis
  • Heuristic Analysis
II
Co-creation
Description

After benchmarking we met with clients and decided on mapping a user journey. That meant deciding what to put on particular screens and deciding on the scope of MVP. We also had to take into account the unique features the self checkouts offered, that is voice control – a revolutionary feature.

Tasks
  • Co-Creation
  • User Journey Mapping
III
UX Design
Description

We designed a clickable prototype adjusted to the client’s hardware. We wanted to include all the features in the prototype so we built a prototype which resembled the final construction of the self checkout. The main challenge was designing the interface in a way which would make it easier to understand voice control of the self checkout.

Tasks
  • Designing a clickable prototype
  • Preparing the prototype for user research
IV
Usability tests
Description

The mockup and the prototype we created were prepared for user testing. We decided on Rapid Iterative Testing and Evaluation |(RITE): after testing the prototype with a few users, we implemented some changes, and then tested the prototype again. We had to change some of the processes we designed before because the users thought they should work differently.

Tasks
  • Quantitative Research
  • Mockup Usability Testing
V
UI Design
Description

It was our client’s wish to create something modern, with slick design, so that it matched the minimalistic kiosk itself. We discussed our ideas for the interface and as a result we decided on neumorphism. The look and feel of the design made buttons appear convex or concave. At the same time we made the interface accessible for people with different disabilities. We tested it on the screens that will be used in the shops. We designed both dark mode and light mode to match two models of the kiosks

Tasks
  • Interface Design
  • Accessibility Testing
VI
UX Writing
Description

After the first round of tests and final UI designs, we wanted to simplify some microcopy used in the interface based on the recommendations from the first round of our research. The aim was to prepare the interface for the next round of tests.

Tasks
  • Microcopy
VII
Development
Description

We oversaw the implementation process, checking how the self checkout worked in the development phase. We also added some extra steps in the processes and sent our comments to the developers in order to make the process seamless.

Tasks
  • Supervising the Implementation
VIII
UX Research
Description

The final round of testing was performed on the actual kiosk. We could test out the real product in its alpha build with users. The alpha build could scan the products what helped us identify some pain points in the whole process. We tested two versions of the kiosk, smaller and bigger. We also invited people with disabilities to the tests so that they could help us make the product accessible. As a result, we made some final refinements to the project.

Tasks
  • Usability Testing
  • Accessibility Testing
IX
Final Result
Description

We created an intuitive interface with “a premium look” as our research participants suggested us. Thanks to the research we performed, it turned out that the new features that are not yet available on the market, are easily understandable by all of our users.

Tasks
  • UX Design
  • UI Design

How to introduce new features of self checkouts?

The final result was an intuitive, accessible e-kiosk design. Our research has proven that the new features are easily understandable by the users.

You may also like…

symetria_favicon
jacek_somsel

Let’s make
great UX together