Helping delivery Couriers navigate in the city more efficiently
As a Senior Product Designer at CitySprint, I had ownership and responsibility for a design part of the Courier App. Project aimed at tackling the all day to day courier operations. The problems to handle ranged from Couriers arrival and departure from the centre to locations, to managing high operational costs associated with vehicle maintenance checks. The project focused on improving courier movement in the city, package deliveries with many different situations that can happen during the day. Couriers during day encounter many problems and we needed to make their life easier.
My Role
Senior Product Designer
Team
Designer (Me), Head of Product, Product Owner, Developer (iOS), Developer (Android), 2 QA people.
My Role
My responsibilities were to be responsible and make design decisions. Implementing vision, solving problems courier encounter, making their life easier and growing business impact. From the management team I had full ownership and mostly my decisions were approved.The role was heavily collaboration based, as day to day communication with developers, QA, POs were important. Design system documentation, handoff implementation, prototype video recordings helped a lot to get everyone on the same page.
Problem to Solve
One of the problems I had to solve during the course of the project:
CitySprint faced escalating costs due to manual vehicle checks conducted before and after courier shifts. The existing process required significant manpower and time, leading to delays and inefficiencies. The challenge was to create a scalable, automated solution that adhered to strict legal compliance requirements.
ⓘ
There was a fleet change in the CitySprint operations as it moved to electric vehicles from ordinary petrol. This also introduced additional challenge in the app, how to keep charge levels during the day.
Design Principles
Before doing any work, design principles was developed. Why? Because we need direction we are going for the app. And also this will prevent any major disagreements between stakeholders in the future. This influenced design decisions.
1
Convenient
App knows driver habits. It shows information when its required and only what is needed. It is predictable and driver can easily use it while doing other things and not think what to press.
2
Adaptive
It adapts to different types of drivers, situations, environments and jobs. Driver shouldn't be stuck or look for workarounds just because app is not flexible enough.
3
Fast
Drivers and company profits from quantity of delivery. App should be fast and simple. No unnecessary animation or clicks unless it is necessary. Functionality must solve drivers problems and save time.
3
Inclusive
App should be a breeze to use no matter if you a foreigner, have plenty experience in delivery or maybe just casual driver.
Goals and Objectives
The primary goal was to automate the vehicle check process through an intuitive app-based solution. Key objectives included:
-
•
Reducing manual labor and associated costs.
-
•
Ensuring compliance with legal teams.
-
•
Designing a simple and user-experience friendly solution for couriers.
-
•
Some couriers have limited english proficiency.
Collaboration and Process
I collaborated closely with the Head of Product and the Product Owner, aligning the roadmap with both business and user perspectives. The project followed Agile sprints, delivering incremental features for testing and iteration. My designs were already couple sprints in advance, allowing me to have time to provide solutions which are tested and proofed.
In the Figma designs - I planned features which are currently in Sprint, features which are shipped and past.
Current Sprint - everyone is at the same page what is in the Sprint, matching with ticket numbers in Jira.
Features maintained - Some features have maintenance ongoing.
Completed - With checkmark we show that these features are not touched and will not change anymore.
ⓘ
Entire team got extensive lessons how to navigate in Figma designs, be on the same page and align which designs are in progress and which ones not be touched for QA to have easier life. There is even QA page in Figma where they can add comments what they find.
Design Solutions
The app introduced several innovative features.
-
•
Multi-Vehicle Compatibility: Customisable forms based on the type of vehicle used.
-
•
Interactive Questionnaire: A dynamic form for reporting issues, streamlined for user convenience.
-
•
Photo Uploads: An option to document issues visually for accuracy and efficiency.
-
•
Actionable Compliance Solutions: Clear guidance for couriers when their vehicle failed compliance checks. And what do do next.
Notify of needed Inspection
One of the things to decide was match between system and real world. The icon to start the race was used from the real drag racings. Since this type of lamp appears in race tracks.
1
From Notifications
To start doing vehicle inspection - one of the ways is to start doing it from Notifications panel. We offer multiple ways to do that. Some couriers prefer Notifications tab.
2
From main menu
We have a menu state about Vehicle Inspection where you can start or continue inspection at later stage. For actions important actions we use red exclamation.
Starting Inspection
In order to comply with legal and to show the reasons why a courier needs to perform inspection, text is shown before. During testing some couriers want to do it later on, if they are busy and have urgent tasks to do. We introduced “Snooze” option, which was used.
Since you can change vehicles and not necessary are getting the same as yesterday, with compliance you have to add vehicle number. To match the system between real world, as how couriers think. The UK standard plate design was chosen. Also it will automatically recognise type of the vehicle, so questions and process are adjusted.
1
Buttons
Start immediately or snooze for later. This has been proven a useful feature. During testing discovered the need of that.
2
Description
By providing in advance what you are about to do, for the user we introduce overview of tasks which are waiting.
3
Reset
Ability to reset immediately if you do mistakes. Which happens a lot. This is a minor convenience.
4
Plates
Matching the style of the plates in the UK. Visual reference when you enter helps to prevent errors.
How to structure experience
One of the decisions was to structure vehicle inspection in separate parts, so this makes easier to focus on one part of the flow at a time. In this example we inspect only vehicle exterior and tasks related to that. The next part would be interior, photo section and additional questions.
The goal was to minimise extensive questions list needed from business and compliance to make this process faster. Also during testing we noticed that sometimes couriers make mistakes in entering number plate. Or entering plate from the car of yesterday. Showing all time plates of the vehicle you are currently inspecting dropped error rate of 60%. Since now they can change it back very quicky. If error is made.
For some areas if someone can not remember information, we added “Additional information” section which reveals content. In this example tyre depth levels.
1
Bottom nav
After iterations and testing, it was decided to show number plates all the time at the bottom since couriers mix up vehicles sometimes.
2
Buttons
One simple question at one time in the screen. Instead of providing a list, decision was made one question at one time. So the focus is better.
3
Step Counter
Separation done into smaller sections with a progress bar visible, so Couriers always know at which step of the process they are and how much left.
4
Additional info
Additional information was clicked a lot by the people. Since not many remember legal requirements. Especially workers who are foreigners..
Taking photos and failing inspection
The successful inspection is pretty straightforward. If you answer everything, submit photos you will pass. But how about designing negative experience when you fail?
At about 95% rate, most inspections are going without any problems. But if the vehicle is damaged or something not working, you can not continue. At one point we wanted to get fully automated solution, but manual vehicle change should be organised by manager. For the first release, compromise was done that you have to contact support team and they will arrange a new change.
Luckily dedicated support team can solve this fast in a matter of minutes.
1
Taking photo
Taking a photo experience is similar how you take photos normally with your phone.
2
Flash
The flash that turns phone’s light, for low light visibility. Or in the evening, night shift was proven to be useful.
3
Error
If it is not a critical error, we get yellow warning, allowing courier to drive. With notification to fix the issue.
4
Support
The support contact link directs to the dedicated support. Calling proven to be faster approach which couriers appreciate.
Managing iOS and Android differences
For the iOS and Android users we wanted to give it’s platform experience. Navigation items, some of the icons, modals, overlays are native to it’s platform. Everything else inside is designed the same way. Some solutions where native, some universal. Depending on difficulty, time available. As the sprints, work were intensive by default.
How to Hand Off for consistency
In order to keep happy iOS and Android side, detailed documentation of the components was provided. So there are no questions about spacing, fonts and component usage. Unique components or iOS or Android was placed separately for developers to access.
Design System
When started the project, I had not much to go through. Only one primary colour and one error. For the UI to work properly, set of colours had to be developed and documented. Typography, components, variants. This was done in close collaboration with development and product management.
