Frame 1063.png

LeShop app improvements

In this project I was collaborating with the UX team from LeShop in order to find new UX and interaction solutions for their app. There was no specific feature requested; we were asked to come up with some new ideas and improvements. Our main focus in this case has been the scenario where the user adds products in the basket.

My role in the collaboration:

Concept design

UX and interface design

Visual design improvements

Project team

1 Researcher, 1 Product partner, 2 Designers

Screenshot 2021-07-01 at 13.31.19.png

Kickoff workshop

We started the project as usual with a kickoff workshop where we met and got to know the client. Goal of the workshop was listing the stakeholders, understand what why they came to us, check user needs and business requirements, and prioritise them in order to plan the time in the best way.

Screenshot 2021-07-01 at 13.28.37.png

Screenshot 2021-07-01 at 13.28.47.png

Screenshot 2021-07-01 at 13.28.56.png

First user test

We decided to focus for the first sprint on the scenario where the user is adding products to the basket, focusing on the constrain of confirming the availability of the products based on the delivery time and on the postal code.
The first thing we did was testing with a test conducted by one of our user researcher the prototype they already prepared in order to check were we stand as a starting point.

Screenshot 2021-07-01 at 13.30.22.png

Screenshot 2021-07-01 at 13.30.31.png

Screenshot 2021-07-01 at 13.30.57.png

Screenshot 2021-07-01 at 13.30.49.png

Screenshot 2021-07-01 at 13.29.43.png

Screenshot 2021-07-01 at 13.29.54.png

Competitor analysis

We also conducted a competitor analysis in order to understand how this flow is normally handled by other companies.

Screenshot 2021-07-15 at 08.55.37.png

Screenshot 2021-07-15 at 08.56.50.png

Problem focus

In the current prototype we found out through the user test a main problem we wanted to fix.
The flow we considered was the following:

The user adds all the products in the basket
The user confirms the basket by proceeding to the checkout
In the following screen the user enters the “contract process”
In the “contract phase” the user has to add additional information in order to confirm the availability of the products selected in the previous stage.
In case there are some conflicts the user gets some errors and needs to go back to the selection phase state in order to fix the problems.

This conflict situation might create some frustration as by confirming the basket we give to the user a sense of confirmation that by continuing the process he/she’s going to just buy the products.

Screenshot 2021-07-18 at 21.45.48.png

Screenshot 2021-07-16 at 14.13.49.png

Design principles

Taking into consideration this main issue, we then defined 3 design principles we wanted to follow and we started sketching the flows on paper.

Screenshot 2021-07-18 at 22.22.34.png

Screenshot 2021-07-18 at 22.22.23.png

Screenshot 2021-07-18 at 22.22.15.png

Screenshot 2021-07-18 at 22.22.08.png

Full basket

In the previous design on the cards there were both the + and the - buttons, and we decided in order to follow the “full basket” principle that could show just the + button in order to prioritise the addition of products in the basket. The - option will appear as soon as you click on the + button.

Screenshot 2021-07-19 at 10.02.52.png

Contract

As soon as the user is in the basket, we will have here the option to already select the time of delivery and the shipping address. This will let the user already see if all the selected products are available and checking the basket before proceeding to the contract phase.
In the example shown in the screen the user has a conflict with one product and will need to fix it in order to proceed.

Screenshot 2021-07-19 at 10.12.59.png

ABC (Always be closing)

The card will show to the user how to fix a conflict. There can be different possibilities: find an alternative product that the app will suggest, change the time of delivery, change the address. In the case shown the user can rather find an alternative bread or change the time of delivery.

Screenshot 2021-07-19 at 10.46.13.png