Retail Payment

What if you never had to wait in a queue again when shopping for groceries?

 Research – Strategy – ux AND visual design

Mobile payment and self-checkout for retail

divider-payment@2x.png
 

At IXDS, we built a MVP with Rambus that allows retailers to implement easy self-scanning at their stores and increase customer retention through playful loyalty mechanics – all without having to spend money on expensive in-store hardware.

 
 
 Picture of the result
 
 

Key challenges

 
 

— Help the client to select a case that is attractive for retailers in different market categories.

— Scope and build a service proposition that helps consumers shop faster and perceive current loyalty reward systems as relevant.

— Guarantee that the look-and-feel of the user front-end can be easily customized to match potential clients' brand and business requirements.

 

 

 

How it works

 

Scan and pay comfortably on your phone and watch all available savings and offers being deducted from your total automatically. Use your loyalty points to reduce your final price even further—anytime for any purchase, no strings attached. And then... just walk out.

My role

I conducted user research in the Netherlands and UK together with a team of 2 other researchers and service designers. I was then responsible for translating these insights into a set of working prototypes and visual proposals for the service's digital touch-points that could be tested with retailers and consumers alike.

As the project progressed, 5 additional interaction designers and over a dozen developers joined the effort to co-create a business insight portal for merchants, a UI configurator tool, an Android, as well as iOS version of the app. As part of the core team, I helped coordinate the effort and ensure that consistency is maintained throughout the service design and development process – visually, as well as conceptually.

 
 
 
payment_phone_browse_final.jpg
 
 Scan and go. Profit from all applicable offers automatically.

Scan and go. Profit from all applicable offers automatically.

 
 Pay with loyatly points and gift cards.

Pay with loyatly points and gift cards.

 

scan, Pay and go

In order to promote frequent use, we attempted to reduce the amount of steps necessary to scan items and perform the payment as much as possible.

 
 

Configure and customize

The style of the app and staff portal can be easily adjusted in the configurator to cater for a retailer's branding requirements. 

 
 All changes can be previewed in real-time.

All changes can be previewed in real-time.

 Optimized for all screens from mobile to desktop, the staff portal can be easily on the go.

Optimized for all screens from mobile to desktop, the staff portal can be easily on the go.

 

Monitor and analyze

The staff portal web app helps merchants prevent theft, assist customers in need and get insights about customers' purchase behavior to offer more personalized services. 

 
 

 

Behind the scenes

 
 
 The initial concept used the visual metaphor of a 'receipt' to carry the user over from scanning to checkout and then to the receipt archive once the transaction was completed. Due to technical limitations in customizability, the concept was abandoned for a more standard Material Design approach.

The initial concept used the visual metaphor of a 'receipt' to carry the user over from scanning to checkout and then to the receipt archive once the transaction was completed. Due to technical limitations in customizability, the concept was abandoned for a more standard Material Design approach.

 
 
payment_onescreen.gif
 
 
payment_phone_1.jpg

explorations

To demonstrate the flexibility of our design system and to help the client explore a variety of possible styles, I created various themes, such as 'playful', 'foodie', 'discounter'. They helped us to show what's possible before we settled on a more neutral look.

visual-styles.gif
 
 
 
illustration-payment-160@2x.png
illustration-payment-150@2x.jpg

consistent and reusable

Logically structured component and pattern libraries (Sketch, Abstract, Zeplin) helped us design new UI views quickly and consistently.

payment_grid_final.jpg

scannable

All elements align to a baseline grid. This increases the visual clarity and appeal of the UI.

 
 
 
 

 

Research

 

We analyzed consumer behavior in qualitative interviews and were able to change the client's segmentation of their potential customers and help them make important scoping decisions.

 
 
illustration-payment-140.png

Instead of categorizing retailers by traditional market categories, such as groceries, clothing, etc., we segmented consumers by their shopping behavior that ranged from habitual restocking to exploratory decision-forming—regardless of what they were shopping for. We showed that solving the tedious check-out is a relevant struggle in all kinds of stores, not just in grocery retail. This made it easier for our client to defend the decision to focus on habitual shoppers first before diving into exploratory cases, where more UI customization was needed.

To not leave these cases unattended, we devised a design system that allowed for customization, as can be seen in the wireframe of a product detail section on the left. In habitual cases, it is limited to a list item. In exploratory cases where customers are still forming their decision, a dedicated product page is used.

My role

I applied Jobs to be Done thinking to the consumer research we presented and have been leading the creation of the flexible system of components and interactions for iOS and Android.

 
 
 We looked at which loyalty schemes interviewed consumers used by letting them show us their wallet.

We looked at which loyalty schemes interviewed consumers used by letting them show us their wallet.

 
illustration-payment-110.jpg
 
 
Enable me to shop groceries effortlessly without going far or sacrificing spontaneity, so I can eat dinner fast and relax into my evening after a hard day of work.
— This Job to be Done statement expresses a struggle of inner-city singles who come home back from work.
 
 Stamp cards were very popular. This inspired us to make loyalty more immediate.