<p>Published on <a href="http://ift.tt/2nDsjVc">| Prototyping: From UX to Front End &mdash; Medium</a> Spencer Ash </p>
<h4>UX/UI Case Study: a mobile logistics platform for bike messengers</h4>
<p><img alt="" src="http://ift.tt/2mHSbjr"><img alt="" src="http://ift.tt/2lZ9XkY"><img alt="" src="http://ift.tt/2mI3wQL"><img alt="" src="http://ift.tt/2lZfkRi"></p>
<h3>The Research</h3>
<h4>The Challenge</h4>
<p>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.</p>
<p>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…).</p>
<p>As the demand for e-commerce increases, the growth of cheap and fast delivery service is expected to become a <strong>$7billion industry</strong> with the current global market for domestic courier services worth $246 billion as of 2016.</p>
<p>The On Demand economy will drive competition between businesses and retailers and there are significant opportunities to create sustainable urban infrastructures around it.</p>
<p><strong>However, many courier services and freelance messengers are unable to tap into this market </strong>using their current business methods. <strong>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</strong> — especially since bikes are one of the fastest, sustainable, and more efficient urban delivery methods.</p>
<h4>The Vision</h4>
<p><img alt="" src="http://ift.tt/2mHXAXR."></p>
<p>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.</p>
<p>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. <strong>Dispatch</strong> has been designed as <em>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</em> — resulting in increased efficiency for the messenger and/or courier service.</p>
<p>Using Dispatch allows the courier service or freelance messenger to:</p>
<ul>
<li>Provide accurate delivery estimates based on distance and real-time road conditions.</li>
<li>Increase efficiency and organization by enabling real time tracking and determining the most efficient routes available.</li>
<li>Collect data to optimize business operations (database storage for signatures, proof of delivery photos, courier information, customer data, and more)</li>
<li>Manage courier fleets and track assets.</li>
<li>Travel the safest route possible by leveraging Red Zone crime mapping technology (urban streets can be tough).</li>
<li>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.</li>
</ul>
<h4>User Surveys</h4>
<p>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.</p>
<p><img alt="" src="http://ift.tt/2lZimoH"><img alt="" src="http://ift.tt/2mI0trt"><img alt="" src="http://ift.tt/2lZb18H">Sample Questions from the Typeform Survey</p>
<p>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.</p>
<h4>User Interviews</h4>
<p>Bike couriers are notoriously busy (typically working 16+ hour days) and are always on the move making individual interviews difficult.</p>
<p>I began reaching out to messengers through mutual friends and connecting with them on Facebook while attempting to catch them on their breaks.</p>
<p>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<strong> 2 Subject Matter Experts</strong> (SME’s who operated courier services, as well as <strong>4 individual bike messengers</strong>).</p>
<p>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.</p>
<h4>User Personas</h4>
<p><img alt="" src="http://ift.tt/2mI99y8"><img alt="" src="http://ift.tt/2lZ8HOR"><img alt="" src="http://ift.tt/2mI7oBb">User Personas representing Bike Messengers, Messenger Service Operators, and Customers of these Services</p>
<h4>Affinity Diagram</h4>
<p><img alt="" src="http://ift.tt/2lZ46MU">A condensed User Affinity diagram showing commonalities and patterns observed in interviews and from survey results.</p>
<h4>User Journey</h4>
<p><img alt="" src="http://ift.tt/2mHSdrz">A sample user Journey Map for a primary user</p>
<h4>Lo-fidelity Wireframe Sketches</h4>
<p><img alt="" src="http://ift.tt/2lZgnAS"><img alt="" src="http://ift.tt/2mI8ZqA"><img alt="" src="http://ift.tt/2lZbnfm"><img alt="" src="http://ift.tt/2mIa8yq"><img alt="" src="http://ift.tt/2lYZ5nk">Low-fidelity wireframe sketches (concept development)</p>
<h3>Information Architecture</h3>
<h4>Mobile Application Site Map</h4>
<p><img alt="" src="http://ift.tt/2mI4ImW">The Information Architecture Map for the mobile application of Dispatch</p>
<h4>Mid-fidelity Wireframes</h4>
<p><img alt="" src="http://ift.tt/2lZ9I9K"><img alt="" src="http://ift.tt/2mIhKB6"><img alt="" src="http://ift.tt/2lZ9K1m">Selected Mid-Fidelity Wireframes made in Sketch</p>
<h3>Visual Design</h3>
<h4>Branding (Identity and Naming)</h4>
<p>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.</p>
<p><img alt="" src="http://ift.tt/2mI6PHi">Primary Color Scheme used in the Design</p>
<p>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).</p>
<p><img alt="" src="http://ift.tt/2lZcQCB">Some branding inspiration</p>
<h4>Moodboard + Inspiration</h4>
<p><img alt="" src="http://ift.tt/2mI0xrk"></p>
<h4>Style Guide</h4>
<p><img alt="" src="http://ift.tt/2lZ4f2Q"></p>
<h4>High-fidelity Wireframes</h4>
<p><img alt="" src="http://ift.tt/2mI91ic"><img alt="" src="http://ift.tt/2lZ9YFU"><img alt="" src="http://ift.tt/2mIaoxl"><img alt="" src="http://ift.tt/2lZgZ9s"><img alt="" src="http://ift.tt/2mI0kEH"><img alt="" src="http://ift.tt/2lZ45bO"><img alt="" src="http://ift.tt/2mHXBen"><img alt="" src="http://ift.tt/2lZ3rLr">Selected High-fidelity Wireframes</p>
<p>Animations</p>
<p><img alt="" src="http://ift.tt/2mHVbws"><img alt="" src="http://ift.tt/2lZ8GdL"><img alt="" src="http://ift.tt/2mI3x7h">Selected animations (created in Principle)</p>
<h4>Interactive Prototype (Invision)</h4>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjZQTat9E2iw&amp;src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FjZQTat9E2iw%3Ffeature%3Doembed&amp;type=text%2Fhtml&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="http://ift.tt/2lZ38jv">http://ift.tt/2lZ38jv</a></iframe><img src="http://ift.tt/2mI0ziW" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2lZ0rhL">DISPATCH</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


DISPATCH

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

The Research

The Challe…

Top Stories