Feltrinelli

It's been a long time and I stop working on this material.

Official App

EFFE 2005 S.p.A, known as the Feltrinelli Group, is an Italian holding company founded in 2005, as a merger of the Feltrinelli publishing house (since 1954) and the chain of Feltrinelli Italiane Libraries (since 1957). Later the holding created the virtual shop lafeltrinelli.it.

Later in 2016, Feltrinelli commissioned the creation of the same virtual store on the iOS and Android mobile platforms. In keeping with new and recent technologies, in 2019, Feltrinelli launched a bubble app, inStore , for use by customers and shop assistants to facilitate payments on the go inside Feltrinelli stores. Restyled laFeltrinelli home page and some of inner sections as well with a new and modern user interface based on card system either for android and ios device, among smartphones and tablets. It supply the readers with endless and detailed items such as books, cinema, games and music. Later on, designed the upgrade version InStore.

InStore is a "Bubble" app inside the official laFeltrinelli app and allows you to take advantage of the innovative purchase service without having to go to the cashier. Technological advancement has in fact given the opportunity to build an interface aimed at both the public and internal staff, one aimed at searching for items and the other to proceed with the purchase of the same.

Front Desk

Instore app concept was conceived to help Feltrinelli customers to buy any kind of items right away inside any Feltrinelli store upon QRCode recognition. It's like having a cash desk on your hand that produce a Receipt ready to show to the cash desk or any assistant around the store. This way Customers don't wait on the boring line!

Interaction Design

The iterative production of the interface aimed at the public has expressed the most common use experience through sections of Profile, Events, Bibliographic suggestions Scanning of articles via QRCode, Cart of selected articles and details of these with information on which department and shelf to find them with guided InDoor navigation. The processing followed a Ux study carried out in parallel for the generation of this concept and thus in order to pursue the real needs of customers and the operating group of laFeltrinelli salesmen.

Canvas
Mockup

Style Guide

With the brand new Design System I developed so far, I could create an overall document including a first step presenting the viewers an Introduction to Material Design and a Foundation concepts along with Building Blocks overview

The prototypes have been handled in the Style Guide 3.1 document.

Prototyping

Overall, new techniques and drawing methods were explored with advanced prototyping in order not only to facilitate the development process, but also to make the interactions between the customer and the Feltrinelli clerks understandable in the moment of exploration and purchase outside the shop. cashier. The customer-side application provided for a very immersive interactive experience: starting from the entrance to the shop, scanning and viewing the desired items, up to the purchase together with the clerk ... anywhere in the shop. In other words, without having to queue at the cashier. In particular, the prototyping focused on making the experience pleasant and usable and setting the interface with the search and scan in the first place.
Motion design guides the user to understand the application between the various sections made available to him, such as the detail page of an item just scanned in the store, the search for a free text, the result of a filtering performed on the search itself, the map of the store with augmented reality or the hierarchy relationship between the sections of your profile. The interface is available at any time to help the user complete all kinds of tasks related to the purchase of laFeltrinelli items

Canvas

Access

Instore app access point is included onto main app navigation. As the customers approach the store they can either enter the store itself and virtually enter the digital store

Home

Once they're logged in, users can navigate the home page with its main features

Search

The app provide the customers with the main functions, searching any item available in the store

Scan

and of course scanning items to get relative infos and buy it quickly

Profile

In case customers didn't applied to laFeltrinelli fidelity card, well they can do it through this section as well editing their favourite payments and check their latest receipt ready made to be presented either to the shop assistant or to the traditional cash desk

Cart

Once the items are located onto the cart, users can finally proceed to the checkout. With this given, an Assistant would receive the notification to help the customer to complete the payment ... like it would be a real cash desk

Fab

Giving a micro animation sample of how could it look like, coz I care about details


Assistant Back Office

Subsequently, the interface, for use and consumption by internal staff, was developed on the basis of PAX technology. The QRCode scanning function to associate customer and items allows entry into the virtual cash desk to proceed with the payment and the issuance of a receipt.

Interaction Design

The idea behind the Assistant app is to provide the shop assistant with an app installed in that would replicate the function of a normal cash desk on the go. This way the shop assistants would be helping the customers to achieve their shopping actions as they're walking around the store. This User Interface was built according to the popular device PAX Technology which is the world's leading provider of Point of Sale payment terminal solutions

Canvas
Mockup

Prototyping

Overall, new design techniques and methods were explored with advanced prototyping in order both to facilitate the development process and to center the final result of the product as expected. The clerk side application, in turn, allows you to complete the in-store experience: from scanning and associating customer cards, collecting items in the shopping cart and completing the payment process with a receipt and even an attached history. As for customers, the animations of the Assistant interface are also designed to guide the clerk to complete all his operations

Canvas

Access

Easy way concept to access the app with codes given to each shop assistant. As they're logged, they're provided with a simple interface in order to help customers achieve their shopping on the go

Cashdesk

The cash desk process was conceived to replicate the function of a tradizionale cash desk. All the information were produced to keep the shopping running as smooth as possibile

Multiselection

Giving a micro animation sample of what could it be in case of many items included in the cart

The Feltrinelli app is a virtual area where you can explore all the articles offered by the publishing house

Wireframing

The design involved the Wireframing phase, the so-called wire drawing, for the exclusive purpose of laying the necessary foundations of the laFeltrinelli virtual shop. A similar design was possible thanks to the Wireflow Library that I have personally developed and perfected over the years with the result of breaking down the interactive patterns to the smallest detail and thus visible in a visual map.

Canvas
Wireframe
Wireframe
Wireframe
Wireframe

Style Guide

On the occasion of the new creation, laFeltrinelli was educated in the mobile world through the correct execution of the mobile guidelines, thus finding ample scope in innovative and usable components.

Wireframe
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide

Cross Platform

User Interface Design

The combination of the Style Guide, in accordance with the design of the services via Wireframe, guided the Ui iteration with visual results distributed on both the iOS and Android mobile platforms with the target smartphone in mind. The Ui iteration also produced interfaces related to the world of tablets and thus optimizing the interactive experience to take advantage of the laFeltrinelli service

Canvas
Canvas
Canvas
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup

iOS & Android

User Interface Design

The innovation involved the study and Ui production also of all those new native and advanced functions of mobile systems, such as widgets external to the app and, not least, the transposition of the app into smartwatches informs reduced and functional to the use of all laFeltrinelli customers

Mockup
Mockup
Mockup
Mockup
Mockup
Mockup