Pick up and drop off

Discovery

I've been lucky enough to be involved in this project since the very beginning. Paired with the Senior UX designer, we started organising a workshop with some stakeholders and the Head of Digital.

First Insights

After the first analysis, the UX expert discovered that on the Product Page, “Delivery / Return” content could be segmented into a more digestible layout.

Another insight was that currently on the Delivery page we only display delivery method (Click and Collect) and collection location titles. We actually need to make sure that our customers are fully aware of the information very clearly.

We've also realised that within the Payment page both collection location and order summary are hidden within an accordion. Its highly recommended to display both order summary and collection location information in full detail in order to help the user digest all the information at one glance.

I've created all Desktop Wireframes working closely with the Senior UX in order to translate accurately the experience from Mobile to Desktop.

Competitor Analysis II

Before starting to work on the high fidelity screens, we created a table analysing name conventions and different ways to display the map/list view by our competitors, that helped me to visually understand what kind of approach our competitors were having before starting with the final visual designs

High Fidelity Visuals

After all this journey, it came the moment in which actually I finally was focus on creating high fidelity screen designs for Desktop, Tablet and Mobile devices.

I took 10 scenarios to be recreated in order to provide to the developers examples for the new components in different scenarios.

Visual improvements helping users digest information related with delivery options in My Bag page and Product Detail page. (Shadows are incorporated in order to make stand up the new improved sections and were not included on the final design)

Map and list sections for Pick Up and Drop Off new feature. In Desktop we are able to see everything at once glance, meanwhile in Mobile and Tablet, users need to navigate through tabs.

Micro-Interactions

Building the new features for this project meant a fluid and constant communication with development. In this stage, some prototypes were required in order to make sure the interaction in the map feature was as we expected.

User Testing

Before releasing the new feature, we were having the opportunity to have all the journey ready in staging. In the process of final tuning, we introduced a new pin that would include different pick up locations when the map was zoomed out.

Next Steps

Releasing this experience is just the first step for the iteration of the process. Firstly, we already have a backlog with new improvements that we have in mind but they weren't necessary for the launching.

Exposing the feature to our users will provide us real and accurate data about performance that will be key in order to fine-tune the experience. This will be just the beginning of a new cycle for the Design Thinking process, but still will be a beneficial implementation in order to facilitate delivery options for our customers.