Marco Raffaello

Work

About

Contact

Reimagining the In-Store Experience through a Self-Scanning Ecosystem

End to end Product Design

User Research

UX/UI design and rapid prototyping

User Research

Overview

My role

Senior UX and Service Designer

I led the end to end design of the product from the initial analysis to the final shipment to developers.

Timeline

2023 - 2024

Team

4Store Team

Design, Engineering, analysts.

Outcome

An ecosystem for self-scanning in retail

A mobile application, an application for scanning devices and a back-end application.

In collaboration with a multidisciplinary team of designers, developers, and retail domain experts, I contributed to the design of several products for the retail sector.

Among them was a self-scanning ecosystem developed for both dedicated handheld devices and mobile applications.The solution included customer-facing interfaces as well as a back-office system for retail staff, supporting end-to-end in-store operations.


Together with a multi disciplinary team of designer, I led the design process from the initial on field research to the final design and shipment of the product.


During this process, several relevant stakeholders (e.g. prospects, field experts ) were involved to allow us to build a product meeting clients’ and market expectations.

In collaboration with a multidisciplinary team of designers, developers, and retail domain experts, I contributed to the design of several products for the retail sector.

Among them was a self-scanning ecosystem developed for both dedicated handheld devices and mobile applications.The solution included customer-facing interfaces as well as a back-office system for retail staff, supporting end-to-end in-store operations.


Together with a multi disciplinary team of designer, I led the design process from the initial on field research to the final design and shipment of the product.


During this process, several relevant stakeholders (e.g. prospects, field experts ) were involved to allow us to build a product meeting clients’ and market expectations.

3

Customers who purchased this product

Some of the leading retailers in Italy purchased modules of this product.

3

White label fully customisable products

All products were designed as modular and fully customisable.

An iterative, collaborative process

Market research

Conducted competitive research and analysis to identify strengths, weaknesses, and friction points in existing self-scanning experiences.

Conducted competitive research and analysis to identify strengths, weaknesses, and friction points in existing self-scanning experiences.


Observation

Conducted competitive research and analysis to identify strengths, weaknesses, and friction points in existing self-scanning experiences.

Conducted competitive research and analysis to identify strengths, weaknesses, and friction points in existing self-scanning experiences.


Mapping the TO BE

Mapped the end-to-end user journeys for both the handheld device and mobile application, identifying friction points and opportunities for improvement.

Define design pillars

Defined four core design principles to guide co-design workshops and inform prototype development.


Defined four core design principles to guide co-design workshops and inform prototype development.



Exploring AI

Conducted competitive research and analysis to identify strengths, weaknesses, and friction points in existing self-scanning experiences.

Conducted competitive research and analysis to identify strengths, weaknesses, and friction points in existing self-scanning experiences.


Co-design workshop

Designed and facilitated a co-design workshop with key stakeholders to align on product vision and define core features.


Design and develop

Conducted competitive research and analysis to identify strengths, weaknesses, and friction points in existing self-scanning experiences.

4Store: A Modular Digital Ecosystem for Retail

Starting with the Foundations: Understanding the Context

Collecting contextual evidence

We analysed the market for self-scanning devices and evaluated the checkout experiences offered by key competitors in the retail industry. Our focus was on the user experience and the types of devices employed across different solutions.

The solution encompassed both customer-facing interfaces and a back-office system for retail staff, supporting end-to-end in-store operations.

Mapping the journey

We analysed several competitor experiences to deepen our understanding of the in-store self-scanning journey. These insights were synthesised into a series of journey maps, which served as a reference throughout the design process.




We analysed several competitor experiences to deepen our understanding of the in-store self-scanning journey. These insights were synthesised into a series of journey maps, which served as a reference throughout the design process.






Mapping the desired experience

To map the in-store self-scanning experience, I created several customer journey maps. These helped us identify the main pain points, user needs, and opportunities for improvement within the shopping experience. The journey maps served as the starting point for the redesign.

Defining concept pillars: how will the product look like?

The redesign of the self-scanning experience was guided by four key design pillars:

Speed

Allow customers to purchase everything they need quickly

Allow customers to purchase everything they need quickly

Accessibilty

Create an inclusive and accessible product.


Personalization

Develop a product tailored to users' needs.


Flexibility

The product adapts to changing conditions in the store.

Codesigning the product with field experts

To gather useful insights for designing the product, we led two codesign sessions. The aim of these sessions was prioritizig the most relevant product features and understand which features to include in the app and scanner.

Empathy map

OBJECTIVE

Encourage participants to think from the users’ perspective, which is crucial for the next steps of the workshop.

ACTIVITY

We asked participants to empathise with users by working with an empathy map canvas, exploring their feelings, pains, and gains.

Prioritization canvas

OBJECTIVE

Prioritise functionalities to identify the most relevant ones.


ACTIVITY

Participants were then asked to prioritise functionalities based on their experience in the retail sector, categorising them into three groups: must-have, nice-to-have, and not relevant.

App or scanner?

OBJECTIVE

Prioritise functionalities across the two devices.



Prioritise functionalities across the two devices.

ACTIVITY

Participants were then asked to prioritise functionalities based on their experience in the retail sector, categorising them into three groups: must-have, nice-to-have, and not relevant.

The final product: app and scanner

In this chapter, some screens and relevant features of the scanner application are shown. The mobile application follows a similar approach but with some additional features dedicated to brand’s clients.

Landing page

Accessibility

LANGUAGE SELECTION

Users can select their preferred language before starting their experience. Languages preferences can be accessed anytime from the settings section.

Accessibility

SUPPORT TEXT

First-time users are guided through the steps of using and experiencing self-scanning with the help of supporting text.

Accessibility

SECURITY CHECKS ALERT

Users are notified about potential security checks at the checkout as they will approach the end of their shopping.

Cart

Speed

Flexibility

CART AS HOMEPAGE

The cart screen serves as the home of the experience, similar to an e-commerce cart. Scanned products appear at the top of the list and are highlighted in green.

Speed

Flexibility

PRODUCT NUMBER

The product count is displayed next to the product list title, freeing up space at the bottom for more relevant information, such as the total amount and collected points.

Speed

Accessibility

TOTAL AND CHECKOUT

All checkout-related information is located at the bottom of the screen, where users proceed to finalise their shopping. The total amount and collected points are also displayed here.

Product Page

Speed

Personalization

ADDED TO CART

When a product is scanned, its page is displayed for five seconds. If users do not interact with the screen, it returns to the homepage; if they interact, the screen remains active. Users can return to the homepage anytime using the back button.

Accessibility

SUPPORT TEXT

First-time users are guided through the steps of using and experiencing self-scanning with the help of supporting text.

Accessibility

SECURITY CHECKS ALERT

Users are notified about potential security checks at the checkout as they will approach the end of their shopping.

Fresh food counter

Speed

Personalization

BOOKING AT THE FRESH FOOD COUNTER

Users can book a slot at the fresh food counter by accessing this section and taking a digital number.

Speed

Personalization

ALERTS

When the employee is about to call their number, the device vibrates and displays this screen, prompting the user to head to the fresh food counter to purchase their desired products.

Behind the scenes: the backoffice application

In this chapter, some screens and relevant features of the Backoffice application are shown, including the backoffice homepage, current shopping monitoring, backoffice homepage

Back-office homepage

ENTRY POINT

The homepage serves as the entry point to all key sections of the back-office application. While all sections are accessible via the menu, the most relevant ones are highlighted with dedicated cards.

The homepage serves as the entry point to all key sections of the back-office application. While all sections are accessible via the menu, the most relevant ones are highlighted with dedicated cards.

STORE SWITCH

Some users (Super Admin, Admin) have visibility across multiple stores and can switch between them using the dropdown in the top-right corner of the homepage.

Some users (Super Admin, Admin) have visibility across multiple stores and can switch between them using the dropdown in the top-right corner of the homepage.


ACCESS TO REPORTS

While users can monitor one store at a time in real-time, reports for all stores are accessible through the Reports section. This enables long-term monitoring of data across stores.

While users can monitor one store at a time in real-time, reports for all stores are accessible through the Reports section. This enables long-term monitoring of data across stores.

Back-office homepage

LIVE MONITORING

On this page, users can monitor all customers using self-scanning devices in-store. They have an overview of the most relevant information needed for safety and customer support.

On this page, users can monitor all customers using self-scanning devices in-store. They have an overview of the most relevant information needed for safety and customer support.

ACCESS TO SHOPPING DETAILS

By clicking on the shopping ID, users can access the customer’s current cart and monitor all actions taken since the start of their in-store session, including all scanned products.

By clicking on the shopping ID, users can access the customer’s current cart and monitor all actions taken since the start of their in-store session, including all scanned products.


PRIORITIZED ACTIONS

Key actions, such as “change device” and “delete a shopping session”, are available directly on the page, while less frequent actions like “switch on the LED light” are placed in the menu.

Back-office homepage

DOUBLE VIEW

Devices can be monitored using two views: a table view or a wall view. In this section, we se the table view, where users can take a look at all devices in the store. Actions change according to status.

Devices can be monitored using two views: a table view or a wall view. In this section, we se the table view, where users can take a look at all devices in the store. Actions change according to status.


FILTER BY STATUS

Devices can be filtered by status. The filter is made visible on the left, to make it more accessible and increase the speed for users. The default view shows all devices, filters can be activated clicking on the toggles.

ACCESS TO THE DEVICE PAGE

By clicking on the serial number, users can access the device page. This includes all information regarding the device, including information about use and maintainance, battery levels and last shopping.