A mobile shopping list

NaturaSì iOS Android

Easy to use, always available.

This story is about the first Commonsense approach to the large-scale retail trade: NaturaSì is in fact the most important natural-foods supermarkets chain in Italy.

Our long lasting relationship with NaturaSì yielded a very successful application that’s now at its third major release. At the beginning of 2013, the Marketing Department contacted us with a request: they wanted their customers to get access to the catalogue and from there to compose a shopping list. They also wanted a a way to help them during the in-store shopping experience. After the first release further features have been added: the user had to be able to create and share his/her lists and to buy the products directly from his/her mobile device. In the last version, together with the general adjustments needed because of the NaturaSì new visual identity, the In-Store feature was added.

This evolution, beyond defining the current status of the application, reflects how our design process have grown in time becoming our usual set of practices.

2013-2014: the shopping list

When we started analysing the shopping list concept the first thing we did was facing our main competitor, a market leader in this area:

list

The piece of paper provides undoubtable advantages: it’s light, it’s easy to use and its batteries last long. From the early stage it has been clear that we couldn’t win if competing on those terms. We had to play on our own field and try to do the things paper can’t do: we had to link to the list items the content that’s usually cut out during the in-store experience.

Problem identification

As a first step we had to identify the players in the game: who would have been the target user? Which would have been his/her needs? What about the stakeholders’ needs and the technology constraints? Our purpose was – through a thorough research process – to reach the area where business goals, users’ needs and technology meet (Relationship Zone).

The company wanted to expand the standard user journey, using the mobile app as a new touch point reinforcing the fidelity program. From this relevant point we pulled out the user needs: to access all the contents related to the products and the current promotions and to have the fidelity card balance always on hand. Both the design and the development phase have been conducted considering the constraints given by the mobile technology: a poor data bandwidth, high latency, the reduced size of screens and a low calculation power.

The first solution

Since the first version, the main purpose of the app was to create and modify the shopping list. The shopping list section provided the most important commands: the product search, the possibility to add a product to the shopping cart, the balance of the fidelity card.

The list could be created in two ways: exploring the catalog through a category-based navigation, and through a direct search, started whether from the main screen and one specific catalog section.

One of the main point we were concerned about was the need to have the catalog always available no matter what the connectivity conditions were, so that the exploration could be reliable and effective. That’s why the application works fully even off-line: you can’t allow a customer who’s in a store to be unable to see and update his/her list because of connectivity problems.

At the same time we wanted to assure the quick update of the products database: a very efficient algorithm allows to update only the items that have been modified, keeping the synchronisation process of a 5000 products catalog pretty quick.

The on going offers and promotions needed to be highlighted: besides giving them a specific space in the Explore section, we included the related products on top of the results when a search operation is performed.

In the lowest part of the main screen we’ve put a button to access the fidelity card section. The button label contains the current card balance, so that this piece of information is always available if the customer has registered his/her own card using the proper section.

  • Shopping list

    The shopping list is always available

  • Single sign-on

    The user account is related to the fidelity program

  • The promos are well highlighted

    The products related to ongoing promos are included in the search results set.

  • Product details

    Relevant information is just one tap away from the shopping list.

2014: e-commerce and list sharing

The feedback we received after the first publication on the stores has been very good. NaturaSì customers have a strict relationship with their favourite stores and they’re guided by a conscious and collaborative spirit as consumers: we saw all that in a lot of app store reviews. Along with these considerations and the business growth given by the e-commerce activities on the website, new user needs emerged: first of all we had to give the application the same e-commerce features as the website. Then we had to work to give the interaction with the app a more social profile: we gave the members of this community the opportunity to share their lists.

The company had further requirements too: it mainly wanted to keep and increase the relationship between the customer and the store, to yield the cross-selling activities using the products details as links to similar or related products and, in general, to make the mobile app an actual touch point which could offer the possibility to buy the products through it.

  • A new section dedicated to the user account

    The account link with the card balance is in the drawer

  • From the list to the shopping cart

    The main button below the shopping list puts the products directly in the shopping bag

  • The orders list is fully available

    The orders list shows both the orders details and the shipments status.

  • The lists can be shared among friends

    The connection through Facebook allows to share and edit the lists with one's contacts.

A new dress

The introduction of the new NaturaSì visual identity has provided a new occasion to reflect on the road this application was taking. The physical store is the main touch point for the NaturaSì customers, still today. The application had to reflect this state of things, assuming the user’s point of view during his/her shopping experience. It was clear to us that the store details needed to gain a hierarchical advantage with respect to the other pieces of information provided. We mostly thought about the opening hours and the geographical position of one’s favourite shops.

The localisation data, when enabled, allowed us to know when a person is inside a store: the user interface changes accordingly. When in Store Mode the e-commerce button, less relevant in this scenario, is replaced by the Store Checkout button that easily shows the fidelity card barcode.

  • Shopping list

    The shopping list is easily created performing a research on the catalog.

  • The promos are well highlighted

    The products related to ongoing promos are included in the search results set.

  • Product info

    Relevant information is just one tap away from each of the shopping lists.

  • Single sign-on

    The user account is related to the fidelity program

  • Shared content

    The connection through Facebook allows the sharing of the lists among friends

Che cosa abbiamo imparato lavorando a questo progetto

Raffaela Canu

Graphic and UX Designer

This application represents my first steps as UI/UX designer. At first my contribution consisted in providing a visual identity to an already existing UX strategy: during this phase I delivered to the client four alternatives and each one of them was excessively refined. This was one of the first things I’ve learned: providing all those proposals at such a level of detail is expensive in terms of efforts and resources and, above all, it can be confusing for the client. It prevents him to choose with clarity, potentially generating a lack of support, the foundation of our commercial offer.

But then, during the redesign phase, I’ve been able to put into practice all those UX principle I just knew in theory: who does buy groceries at NaturaSì and which are his/her activities when in store? Does that person correspond to the one our client has in mind? What does that person expects from the tools we provide him/her and – more specifically – how can mobile technology simplify simplify his/her process? While answering those questions helped me find a specific solution for NaturaSì, the mere fact of asking them gave me a new starting point for all the projects from that moment on.