Delivery app
Managing added or removed stops during the route with minimal driver distraction
SCOPE
Internal android Coolblue application for bicycle and van delivery used by Delivery Heroes
PROCESS
UX Research
Benchmarking
UX/UI Design
Prototyping
User Testing
Iteration
ROLE
UX researcher
Interaction Designer
Workshop facilitator Information Architect
OUTCOME
Real-time notifications ensure users stay informed of route changes, improving efficiency and reducing delays. Clear communication with customers about delivery updates enhances satisfaction and loyalty, driving repeat business and strengthening brand trust.
A little context
At Coolblue users - we call them Heroes - call the customers 15 min ahead. When the stop was added or removed during the route, sometimes it get’s overlooked, so the customer is not notified in advance, which leads to lower conversion and increased frustration.
1. Hamburger menu icon opens a side menu
2. From the menu heroes can access Route overview
In the route overview, heroes can also see the stop added. A stop added is a stop that was not planned before starting the route, but planned during the route. Delivery Support are the ones planning the added stops.
3. In the route overview heroes can:
See following customer stops
Preview the stop (name, times, products and services)
Call the customer
During the route, heroes will be notified that a stop is added via a notification that will pop on the customer stop.
Defining the problem
We are encountering several challenges with this notice:
🚫 It doesn't appear clickable. While heroes understand they can close it using the icon, it's not clear that it leads anywhere.
🚫 There's a lack of a clear call to action.
🚫 It doesn't prompt heroes to call ahead or check whether calling is necessary.
🚫 Heroes often miss the notification, as they are already receiving a high volume of alerts.
When is this journey is a success?
Goals:
Goals:
Improve NPS by ensuring smooth and proactive communication between heroes and customers, driving customer satisfaction.
Boost operational efficiency by reducing missed or delayed deliveries through a streamlined call-ahead feature.
Enhance app engagement, encouraging heroes to use the route overview and call-ahead functions to meet company standards.
Maintain high delivery standards by aligning hero actions with business objectives, improving overall delivery success rates.
Hit KPI targets for customer satisfaction by proactively managing communication and reducing delivery issues.
Easily access stop details and contact customers efficiently, ensuring smoother deliveries and a better user experience.
Receive actionable notifications that clearly prompt them to take necessary steps, such as calling ahead, to ensure successful deliveries.
Stay on top of route changes, knowing when the next stop is approaching and deciding if customer contact is needed to avoid delays.
Translating goals into design needs
Better usability through better notification design
When designing notifications, the key principle is to ensure they help users complete tasks without causing disruption. It’s imperative to test product prototypes early and map out the use cases where peripheral messaging would be of value in assisting interactions. However, the best way to communicate with users will vary and depend on several key factors:
Keeping in mind these factors helped me stay focused while designing the notification for this project.
Design solutions
Modal
PROS:
✅ Modal is disruptive so it certainly won’t be missed
✅ It requires users to focus on a single, self-contained task
✅ We are reducing interaction cost for the user. Instead of clicking on the Hamburger menu -> Route overview -> Added stop, the user only performs 1 action.
CONS:
❌ Modal interrupts the user’s workflow, it will stay in place until the user explicitly interacts with it. Each interruption translates in lost time and effort
❌ It can cause users to forget what they were doing because of the additional cognitive load
❌ If the Driving time to this customer is long enough not to require the Hero to call them straight away, the message can be dismissed and serves as a notification; and the users can continue their workflow. This action increases interaction cost.
Dialog with overlay
PROS:
✅ This option is a little less disruptive because the original task is still visible on the screen behind the card.
✅ Allows users to continue their activity and ignore the dialog if it is irrelevant
✅ It is still disruptive enough, because it obscures the previous task on the screen and requires user’s action.
CONS:
❌ Unfamiliar use of the overlay, so it might be confusing as to why this dialog is not presented on a darker, more light overlay - is it not as important?
Bottom drawer
PROS:
✅ Familiar action, used elsewhere in the app. However, it is not used to notify users.
✅ Widgets, quick actions, shortcuts, swipable drawers - are called microsessions because they offer significant speedups for those users who know about them, and are a good example of flexibility and efficiency of use.
✅ Swiping up for more information, and down for less is an intuitive action on mobile devices.
CONS:
❌ If swiped down by accident, do we need to support easy undo? Or ask for confirmation?
❌ Only good if used consistently across the app
Iterations
Testing all three options with users revealed a clear 🥇 WINNER 🥇: Option 2 — Dialog with overlay.
While users appreciated the potential of the bottom drawer (Option 3), we decided against it as it’s not part of our current notification pattern, and implementing it would require significant development time and effort.
After that, some of the priority iterations were made.
In the testing we paid attention to the way Users close the notification.
Accidentally closing the modal by tapping outside the overlay or using the Android’s native back button occurred too frequently, so we disabled these methods.
Overlays with a clear "X" button were less likely to be closed unintentionally. As a result, we implemented a close button and added a swipe-to-close feature for better control.
Microinteractions
The most interesting part for me was the fact that Microinteractions proved highly beneficial in helping user recall. Subtle animations, such as a notification flying toward the hamburger menu with a blinking orange dot, enhance users' ability to remember and revisit important updates. This approach aligns with UX principles of ‘priming for better recall’, which suggest that visual cues can significantly influence user response and retention. To mitigate the risk of notifications appearing at inconvenient times, animations serve as reminders of where to find the information after dismissing the notification, ensuring critical updates are not missed.
Final wireframes
This is a Figma prototype — please feel free to can click around.
Reflection
🚗 Designing for drivers
The delivery heroes are already focused on two main tasks: communicating with customers and driving. We can never assume their full attention is on their phone while on the road or at a customer’s location. Therefore, any new information must be easy to grasp and quick to process. This is especially crucial when designing a flow related to routing and directions, where the information must be both concise and precise, yet still deliver all the necessary details to the user.
🔔 Competing for users' limited attention
Designing effective notifications requires acknowledging users’ limited attention and selective focus. With an overwhelming amount of information competing for their attention — much like how users often ignore banner ads (banner blindness) — we need to ensure that only crucial or urgent information is highlighted. We designed the notification to be clear and concise, delivering only the most crucial information to capture users' attention without overwhelming them, ensuring it aligns with their immediate needs.
📱 Low cost interaction components
Designing a component that demands user action while minimizing interaction cost is a balancing act, especially on mobile devices where screen real estate is limited. Mobile users often face the challenge of navigating through hidden hamburger menus and layered content, which can slow down their experience. By creating a component that allows users to access essential information or complete tasks more quickly, we can reduce the friction caused by excess interactions. The key is to provide a clear, intuitive path that surfaces necessary actions without overwhelming the user, ultimately enhancing usability while maintaining simplicity.
🟠 The power of Microinteractions
What stood out to me most was how subtle animations can improve user recall. By adding a small animation — like the notification flying toward the hamburger menu with a blinking orange dot — we help users remember there’s an update they might have missed. This is particularly helpful if the notification appears at a busy moment. The animation serves as a gentle reminder of where to find the info later, increasing the chances they’ll revisit it. This small interaction made a big difference in keeping users informed without overwhelming them.