Routigo
Creating a new courier app.
project DETAILS
CLIENT:Routigo BV
DATE:2ND MAY, 2019
Location:Maarssen, The Netherlands
The courier app is a tool for couriers to navigate to multiple stops in a route calculated in a smart way. Normal navigation bring the driver from point A to B however this app calculates multiple stops.
The company had been running on an old application and there were some complaints from couriers that the app was convoluted and it took them too much time to get started and finish a stop.
1. OBJECTIVE
Redesign the iOS application of Routigo from scratch. Look for opportunities and make sure that the UI is simple and has a playful feel to it.
2. MY ROLE
I was the main designer of this project. Involved with the research and user testing. Guiding the team in a agile environment.
3. APPROACH
I want to know what features the users favour. Bring new ideas to the table, conduct user research first, prototype iterations fast and test often.
EMPATHISE
User Interviews
IDI is an individual in-depth interview. I brought together a three couriers and asked them about the job. What was important to them, what kind of pains they where experiencing and what their expericence was with the current product.
Card Sorting
Card sorting helps you to design an information architecture, workflow, menu structure or website navigation paths. I brought cards with all the current features and a few new ones to the users. To prioritise features based on data.
DEFINE
Problem Statement
After doing user -research I prompted to sit down define a problem statement. There are a couple of interesting user needs that arose in this phase and a selection of features numbered in importance to the user.
How might we design the app that gets the courier from stop to stop efficient as possible?
1. User flow
The general flow of the app should be focused around getting the user started asap and get to the driving of the route with minimal extra features.
2. Interface
The branding of Routigo is playfullness I would like to incorporate that into the new design. Keeping screens minimalistic and use images to lighten up.
3. Features
Importance: 1. Map with next stop - 2. Activities on stop - 3. Finishing Stop - 4. Route list - 5. Stop list - 6. To navigation - 7. Prerequisites - 8. Settings.
IDEATE
Mapping
To find out what kind of phases the driver goes through in the process of the delivery we made a Customer Journey map. For us to have a better understanding of how many screens we might need and which information to present.
User flow
The total use of the app consists out of 5 phases all according to the daily activities of the driver. The scope of the journey was large and used for make a user flow diagram later on.
User flow
After mapping out the experience of the user its time to think of a user flow. Below is the result of the main user flow. The main flow is the user picking the route, preparing the route, driving the route and finishing stops.
User flow
Do keep in mind tthat there are multiple flows made for different tasks the user can perform. To better illustrate the purpose of the app I chose to use this large scope. With the flow in mind the next would be wireframing.
1. picking
In the first phase the user gets the option to pick the next route in line or visit a list overview of planned routes for the upcoming time period.
2. preparing
In the preparation phase the user can do multiple things. The first would be checking out different stops and the second filling in the prerequisite data.
3. drive & finish
During the driving the user checks the map for stop activities and when the route is done the user can finish it by pressing a button and checking out a form.
PROTOTYPE
Wireframe Low-fidelity
1. What
These are the low fidelity wireframes. Its the general flow how the user gets from signing in to the completion of a stop with all the main features presented.
2. How
The user navigates primarily by using the rounded buttons at the the bottom of the screen or pressing a list item. There are multiple back buttons as well.
3. Why
For consistancy I chose to navigate primarily with the round buttons. The screens presented are the ones needed to understand the functionality.
Wireframes high-fidelity
1. What
This is a representaion of the actual application. I replaced the placeholder for the text with an actual font and the screens are they look more real.
2. How
I made a design system for the various components of the application this determined the font size, icon sets and I chose a map that is more representative.
3. Why
The case stated needed to be tested asap. When testing with users its best to do so with an accurate representation. I set up the prototype.
User flow diagram
1. The symbols
I used symbols for: A page, user action and questions. Besides the symbols there are arrows pointing in the direction of the flow and text for support.
2. The flow
The flow repsented is the same as the one earlier on in the process only now I replaced some symbols with the actual screens for more represental clarity.
3. stop loop
At the end of the flow the user ends up in a loop until the route is complete. It goes from driving to completing a stop and on to the next stop.
DESIGN
Final Designs
After validating and testing with users it was time to give the interface some paint. Replaced the grey colors with the Routigo colors and provided the icons from "theNounproject" for a playfull touch.
Creating an application for couriers to drive a assigned route as efficiently as possible.
1. Video
To offer a clearer understanding of the product I posted a screen recording. Here you can see the flow of the application with the screens provided.
2. Conclusion
After the usability test we found out that couriers were able to complete a stop 5 seconds faster. This has a great inpact on the completion time of a route.
3. Learned
With trial and error I learned that couriers find things important that I did not even think of. It is essential to use data to validate your assumptions.