Marco Raffaello
Works
About me
Contact
Reimagining the In-Store Experience through a Self-Scanning Ecosystem
End to end Product Design
User Research
UX/UI design and rapid prototyping
Stakeholders alignment
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.
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.
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.
An iterative, collaborative process
Market research
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.
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.
Exploring AI
Defined four core design principles to guide co-design workshops and inform prototype development.
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
Led the UX and UI design of the applications’ prototypes and collaborated closely with developers to support implementation and ensure design fidelity.
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.
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
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.
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
Personalization
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.
Speed
Flexibility
PRODUCT DETAILS
Key details, such as allergens or food certifications, are displayed as icons. More detailed information is available at the bottom of the screen.
Speed
Flexibility
CHOOSE QUANTITY
Quantities can be adjusted directly on screen, eliminating the need to scan the same product multiple times. Users can also remove a product by clicking the remove button.
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 scanner application are shown. The mobile application follows a similar approach but with some additional features dedicated to brand’s clients.
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.
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.
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.
Current shopping monitoring
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.
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.
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.
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.
Marco Raffaello
Senior Product Designer