Case study / 02
Map Implementation
Summary
Implementation of address integration in map-based search for an online grocery store. This enhancement not only benefits end-users but also optimizes logistics operations and boosts overall platform reliability.
- Role
- Main UX Designer
- Timeline
- 5 months
- Company
- Ocado Technology
- Platform
- Desktop
01
The Problem
To resolve this, the system must provide customers with a fallback option through an interactive map, accompanied by a clear notice informing them they can manually select their location.
Additionally, even when the map pre-fills an address based on the selected pin, users must retain full control to edit and format the address according to their specific needs.
02
Benchmarking
In order to understand how a map should be designed and how the interactions on it worked, the first step was to perform a benchmarking with some grocery retailers and delivery platforms that included a map as a method for introducing a deliverable address.
Three patterns kept coming back
Lookup
Most of them made use of a lookup. This method doesn't give visual feedback of the address entered.
Autocompletion
This not only avoids as many errors as possible, but also is comfortable for the user, and more accurate for us to find.
Errors
Addresses that can't be found are shown in an empty state. If the address doesn't exist or isn't deliverable yet, it's rarely clarified and the copy is standard. Understanding an error better leads to better recovery.
*Lookup refers to the finder that consists of an input field, where users enter the address they want to find, and the result is not known until a step later. Different from a search field, where you know if the address is found instantly.
03
User Research
5 participants
45 min interview
Objectives
- Understand why users are abandoning the registration flow at address lookup and confirmation.
- Discover the user needs in the different edge cases (address not found, out of delivery area, etc).
- Understand user pain points, delights, and opportunities associated with pinpointing addresses on a map.
Participant tasks
- Add a non-existing address in Glovo app to order food.
- Add an address in Glovo app out of the delivery area.
- Add an existing and deliverable address in Glovo app.
What we learned
Multiple address fields feel cumbersome and old
After users tried to add a new delivery address in both Alcampo and Glovo, all users (5/5) compared them and had concerns with the Alcampo address form. There should be only one field for the address with autocomplete function.
Ideas
- Have only one field to add the address like other platforms, to avoid confusion and make it simpler.
Without proper feedback, users abandon the product entirely
“Either send them to hell, as we say in Seville, go to another site or wait for me to have a day off and go shopping.
Ideas
- Also, having a way to contact someone could help.
A map plus automatic suggestions builds trust
“I like that it is connected to Google, so you are writing and the addresses that are stored in Google are displayed, so there's less chance of error.
Ideas
- Have address suggestions while typing and include a map as a confirmation.
- Allow to change the address to update the map live.
- Make the city very clear and show stores and road names.
All users (5/5) entered address details differently, which always led to errors
Some users found it very clear that there were different fields for every detail: street, number, floor, door, zip code. One field is more flexible and easier on mobile, but it doesn't avoid errors.
“It would be a bit clearer, if there were two sections, one for the floor and one for the door. I may read only floor, and forget to put the door. It happened to me! I always come back to check the address three times.
Ideas
- Having only one field with clear steps like Glovo (i.e. "floor, door, details").
- Optional address details like photos of the intercom or text/audio explanations would prevent errors.
5/5 preferred the search field + confirmation flow over the lookup
Most participants said the flow with the interactive map was friendlier, gave more help, was less error prone and less old-looking. One stated the alternative looked like a one-time delivery address, for clothes shopping. Users did like having a zip code input to reach the correct town.
04
The First Design
The idea behind this was to find suggestions with the information that users inputted in the first step, and with this, show a map in which moving the pin wouldn't update the introduced address.
But this brought usability problems that couldn't be overlooked
Moving the pin could lose the correct address
A user who moves the pin will see that the address where he will receive the order is where the pin is placed. But we keep in the information the original one he introduced in the form.
We still have the form, which users didn't want
Research validated that users disliked the address form for being tedious and inaccurate. Here we not only keep it: it's the first step, when a search field with suggestions was proven to work much better.
If a map is the solution, why not put it in the right place?
The “found addresses” is a great idea, but could probably be fixed with autosuggestions. It felt like we were reinventing the wheel, while doing the exact same thing a search field + suggestions would do more actionably and accurately.
A not-found address could still be submitted
We would be showing the information entered and a zoomed out map where the user could move the pin until the address coincides, raising the same problems as the first point.
And so, I decided to go rogue
05
The Proposal
01 / 05
Map on the first place
With an input field that orientates about the expected information, standardised depending on the country.
Why
Many fields create different filling patterns. One field is easier to use, but must include suggestions to avoid errors. Interviews confirmed this was the most comfortable and preferred input method. Some users start typing the street, others the postcode, so this ensures both find what they're looking for.
02 / 05
Suggestions
As the user types, suggestions based on the characters introduced appear.
Why
Users want feedback from the start. This not only prevents errors: live visual feedback of what we are doing and achieving is much more useful.
03 / 05
Address found
If the address was found but carries no street number, we show the street zoomed out with no pointer placed, and invite the user to tap to place it.
Why
This screen is the first visual confirmation that users are getting closer. Seeing the map from above and identifying their area makes them more confident in what's happening.
04 / 05
Address refined
If the user placed the pin on an existing number, we populate the full street information plus the postcode.
Why
Another visual feedback of doing things right. If users see the postcode matches their information, there's no doubt the task is going well.
05 / 05
Changing address
Editing the address updates the map live.
Why
There should be a correlation between what the user is doing and what is displayed on the screen.
06
The Workshop
The next step was to build and moderate a workshop with all stakeholders: UX Design, UX Research, Product Managers and Engineers, to look at the information together and learn from everyone what could be done and what not.
1.5h duration
UX
Research · PM · Engineering
Ideation
Impact/Effort
- Icebreaker
- Presentation of benchmarking insights and survey results
- Free ideation
- Impact / Effort matrix
The most voted ideas
- Rework the whole flow
- Merge everything as much as possible (fields, screens, etc)
- Remove redundant fields
- Show the deliverable area on a map
- Allow an interactive pin
- Keep the manual form as an alternative after inputting
07
The Outcome
Sadly, even when this last proposition was supported and approved by the vast majority of my colleagues and UX Managers, we had to abandon it, as the pressure of the deadlines and requests couldn't be satisfied, despite our efforts.
So in the end, what was implemented is a more advanced version of the first design, that you can check in Auchan (Poland) and Alcampo (Spain).
Did you really think I would just show projects where everything was smooth and perfect? Naaahh, we sometimes also fail and learn!
Impact
Despite the final solution not being 100% user friendly, I unblocked Auchan (Poland) and Alcampo (Spain), which would be able to operate in their respective markets once the map was implemented.
Until the next project
Keep reading
