Published on | Prototyping: From UX to Front End — Medium Spencer Ash

UX/UI Case Study: a mobile logistics platform for bike messengers

The Research

The Challenge

Despite years of decline, the bike messenger and courier service industry is becoming more in demand due to the rise of same day and same hour delivery with On Demand last-mile service.

On Demand Delivery services are becoming one of the fastest growing economies within the tech industry (ie. what you want, when you want it) for both traditional delivery (documents, legal notices, etc.) and non-traditional items (material samples, clothes for fashion shoots…).

As the demand for e-commerce increases, the growth of cheap and fast delivery service is expected to become a $7billion industry with the current global market for domestic courier services worth $246 billion as of 2016.

The On Demand economy will drive competition between businesses and retailers and there are significant opportunities to create sustainable urban infrastructures around it.

However, many courier services and freelance messengers are unable to tap into this market using their current business methods. The technology that can be leveraged through web-based and mobile applications can enable them to secure a hyper-local market position for their services — especially since bikes are one of the fastest, sustainable, and more efficient urban delivery methods.

The Vision

Bicycle messengers tend to work for courier services or as independent freelancers. These messengers are less subject to traffic jams, parking limitations, and fees and fines in high density areas — resulting in more reliable deliveries.

Many of these couriers still use paper and pencil manifests and receive job notifications through text message, email, and phone calls — taking payment in various forms. Dispatch has been designed as an automated logistics platform to handle all of the front and back-office activities, payment collection, and route optimization functions previously handled by a dispatcher back at the office or directly by freelance messengers on their bikes — resulting in increased efficiency for the messenger and/or courier service.

Using Dispatch allows the courier service or freelance messenger to:

Provide accurate delivery estimates based on distance and real-time road conditions.
Increase efficiency and organization by enabling real time tracking and determining the most efficient routes available.
Collect data to optimize business operations (database storage for signatures, proof of delivery photos, courier information, customer data, and more)
Manage courier fleets and track assets.
Travel the safest route possible by leveraging Red Zone crime mapping technology (urban streets can be tough).
And allowing messengers access to features such as quick signature capture, accident reporting, activity tracking (using existing on-board mobile technology), and even hyper-local weather alerts (no one like to be stuck in the rain), among others.

User Surveys

To conduct preliminary user research I created a brief survey using Typeform.com and sent it to Facebook connections who are messengers and also posting it to Instagram with various tags.

Sample Questions from the Typeform Survey

The average time to complete the survey was about 2 minutes, with the majority of participants accessing it through their mobile devices. To incentivize completion of the survey, a contest for a $25 giftcard to Chrome Industries was advertised on the survey home page and posted at the end of the survey.

User Interviews

Bike couriers are notoriously busy (typically working 16+ hour days) and are always on the move making individual interviews difficult.

I began reaching out to messengers through mutual friends and connecting with them on Facebook while attempting to catch them on their breaks.

Persistence was critical and after two days of sending Facebook messages and texts back and forth I was able to connect with three full time bike couriers in Miami and speak with them about their experience on the streets. In the end, I was able to speak with 2 Subject Matter Experts (SME’s who operated courier services, as well as 4 individual bike messengers).

These guys were passionate about what they do and once they got started the conversation flowed on for an average of 35 minutes, where I learned a lot about the local bike culture, the courier’s motivations, and the challenges that they experience working in this industry.

User Personas

User Personas representing Bike Messengers, Messenger Service Operators, and Customers of these Services

Affinity Diagram

A condensed User Affinity diagram showing commonalities and patterns observed in interviews and from survey results.

User Journey

A sample user Journey Map for a primary user

Lo-fidelity Wireframe Sketches

Low-fidelity wireframe sketches (concept development)

Information Architecture

Mobile Application Site Map

The Information Architecture Map for the mobile application of Dispatch

Mid-fidelity Wireframes

Selected Mid-Fidelity Wireframes made in Sketch

Visual Design

Branding (Identity and Naming)

The name dispatch was chosen for this project since it is a logistics platform that performs the traditional functions of a Messenger Services dispatcher / office manager. Jobs (“dispatches”) are sent to the courier through the mobile application from white-label (branded) courier service sites, the Dispatch site (for freelance couriers accessing the Dispatch network), or through checkout APIs on customer websites.

Primary Color Scheme used in the Design

The color scheme — yellow and black — was chosen for several reasons, but primarily since these colors provide a contrast that works well during both day and night as well as easily presenting information while a messenger is riding a bike. A secondary reason for choosing this color scheme is that it invokes an image of a black asphalt street with yellow striping (and bike signs).

Some branding inspiration

Moodboard + Inspiration

Style Guide

High-fidelity Wireframes

Selected High-fidelity Wireframes

Animations

Selected animations (created in Principle)

Interactive Prototype (Invision)

DISPATCH was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

DISPATCH

Cool stuff, every week

More Articles