Published on <a href="https://blog.prototypr.io/improving-p2p-international-delivery-to-excel-in-the-21st-century-5fc3bfa6fa5f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Kevin Xu <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0HpXUlCDPbFWZbPx00LYsA.png">
<h4>Product strategy, Android design, UX/UI design</h4>
You have family in Taipei, you miss them and you want to send them some gifts but it costs $80 to send a small parcel via FedEx! You hear about an app where you can send parcels through people’s luggage at cheap prices and at flexible times!
You‘re travelling to Taiwan for vacation soon and you’re super excited. You can’t wait to experience the culture there and indulge in delicious Taiwanese food! You pack your stuff and realize you have some space leftover. You heard about an app where you can make money carrying parcels for other people, backed up by an open-parcel policy to allow you to check the legality of the items you are carrying.
<h3>Aircari: A Peer to Peer (P2P) Delivery Service</h3>
Peer to peer delivery has existed for a long time now, people have always been giving packages to their friends or family to take with them when they travel to another country. Aircari improves this process by:
<ul>
<li>Allowing users to find people they may not know to deliver packages for them overseas.</li>
<li>Allowing users to make money with their free luggage space by carrying packages for other people.</li>
<li>Ensuring safety and legality by implementing an open-parcel policy, taking pictures of the items being sent and holding payments until confirmed delivery.</li>
</ul>
<h4>Design Objectives:</h4>
<ul>
<li>Design Aircari to be more appealing than traditional shipping services like FedEx.</li>
<li>Streamline the peer to peer delivery process.</li>
<li>Ensure legality of packages being carried through use of photo identification, open-parcel policy and holding payment until delivery confirmation.</li>
</ul>
<h4>Check out my prototype <a href="https://invis.io/5HDIWLZTY">here</a></h4>
<a href="https://invis.io/5HDIWLZTY">Click here to view the project `AirCari2`</a>
<h3>My Design Process</h3>
I used Human-Centered Design and Lean UX Design Thinking to make sure my decisions were supported by user research and feedback.
<img alt="" src="https://cdn-images-1.medium.com/max/851/1*nLJpwfz0J5SFMNOK6P-5aA@2x.png">
<h3>Research</h3>
Goals:
<ul>
<li>To define and understand the problem</li>
<li>To understand our user types</li>
</ul>
Tools:
<ul>
<li>User Interviews</li>
<li>Survey</li>
<li>Competitive Analysis</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2_zZwzIiRdnoe6NrG3j_5g.png">Aircari’s direct competitors
<h4>Insights:</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xYRVJYZbczY54M30Hjv7Gw.png">
<ul>
<li>People prefer to send packages with people they know (what a surprise).</li>
<li>Many people already have a large network to ask when sending items overseas, especially in Asian communities.</li>
<li>Many people do not have a problem with the informal process of finding someone to carry their packages overseas.</li>
<li>In Asian communities, there is a culture of trust that holds peer to peer delivery together (in Asian cultures, values of honour and respect are key, encouraging people to uphold their word).</li>
</ul>
From these insights, a decision was made to incorporate this app into the Toronto Taiwanese community because there is an already existing P2P delivery system in place.
<h4>Product Goals:</h4>
<ul>
<li>Prioritize connections within an user’s existing network.</li>
<li>Automate enough of the process to make it easy, convenient and efficient to use AirCari while building a space for people to genuinely connect and interact.</li>
<li>Enhance and polish the P2P delivery process, from finding a suitable sender to confirming a handoff location for package delivery.</li>
</ul>
With the product goals in mind, i began to define the user.
<h3>Personas</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JFYScho7cLsajj5husLKvA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5oF3xzASsbSMxTEN9uaHOQ.png">
<h3>User Stories</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*orVEg5882hgN2ktZNxQxrQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*M8Yif36zsziMB89IBW_LtA.png">
I created a features matrix to understand the features that need to be designed.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fvLEda31IQOwRhknNXRoew.jpeg">Features grouped according to different processes
Then i grouped the features into two categories: Important to App and Important to User. User assumptions were made based off user research and feedback. App assumptions were made based off analysis of competitors’ apps and marketing materials. Messaging, creating user networks and view delivery status and trip history are core features of the app.
<img alt="" src="https://cdn-images-1.medium.com/max/532/1*lzCmrH3c_Kro3vZdzahwMA@2x.png">Prioritizing features on a 2&#215;2 matrix
<h3>User Flow</h3>
With the Sender and Traveller personas in mind, i created a user flow of the app.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2-tk-aDCbTGGPkzO4yYroA.png">
After completing the user flow, it was time to begin ideation.
<h3>Ideation</h3>
I drew up some low-fi sketches potential solutions to some pain points.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8KZ9j-2yXkOO27vHUuSCuA.png">Low-fis for some main screens
I did some preliminary validation on the low-fi sketches and used the feedback to refine my sketches to narrow down my solutions for hi-fi mockups.
<h3>Prototyping and Testing</h3>
I used Sketch to create hi-fi mockups of my proposed solutions and used Invision to create a prototype. I tested the prototype with four new individuals. Insights from the validation test led me to reiterate on my designs. Below are the before vs. after hi-fi mockups of my final solutions.
Pain Point 1: Users did not understand what our app does
Solution: Design the on-boarding process to be more descriptive and visually stimulating to retain attention. Lay out information so it can be understood clearly.
<img alt="" src="https://cdn-images-1.medium.com/max/375/1*2oLkP89oqMAm5Z3zPn5zcg@2x.png"><img alt="" src="https://cdn-images-1.medium.com/max/375/1*gl8yX18VLL1-HmRq0tgA_g@2x.png"><img alt="" src="https://cdn-images-1.medium.com/max/375/1*i43rg_uuHta-rmzMfcpwmA@2x.png">On-boarding (Before)
The initial screens were too unclear for new users to understand what our app does and how it works. Most people not enjoy the on-boarding process due to them being asked personal information before they had full understanding.
<img alt="" src="https://cdn-images-1.medium.com/max/375/1*3ZgujUyBLZKDC_XyOoAU3w@2x.png"><img alt="" src="https://cdn-images-1.medium.com/max/375/1*P8BH_jZCMP9KZgzUUTSbxw@2x.png"><img alt="" src="https://cdn-images-1.medium.com/max/375/1*_LOUxjXxseFOpdgSjK7uGA@2x.png">On-boarding (after)<img alt="" src="https://cdn-images-1.medium.com/max/375/1*h0E5fv0VLQnQ2pczTVFwpg@2x.png">
The after screens explains all aspects of our app while also introducing the terms “Senders” and “Travellers” that will be used throughout the app.
Icons were added to increase the visual appeal of the on-boarding process to increase user retention.
Sign-in options have been moved to appear at a later time, allowing the user to play around with the app first. When the user wants to send a package or carry a package, then they make an account to do so.
Pain Point 2: Users were confused by the first page, how to use the app was unclear
Solution: Add features showing activity (“your friends are travelling” section), convey different ways users could use the app through illustrations. Make one search bar which is smaller and less dominant but is still fully functional.
<img alt="" src="https://cdn-images-1.medium.com/max/750/1*8cl3igBwaixanbh7nkb0Ug.png"><img alt="" src="https://cdn-images-1.medium.com/max/750/1*f4-hJtfwIrnPPuWoTf16rg.png"><img alt="" src="https://cdn-images-1.medium.com/max/786/1*D-o_ULPi5XvYxiIlKQQCxw.png">Iterations of the home screen (initial= left, final= right)
First screen users landed on did not reflect the that the app is people-focused. The large search bar with multiple CTAs took up valuable space on the very first page.
The search bar was reduced to one bar. When clicked, it will drop down search categories for the user to fill out. This decision was made to reduce the space the search categories took up. Also, the search bar did not have to show everything before being clicked.
A cute illustration was added with a description beside it to portray a scenario the app would be used for to increase user understanding.
“Your friends are travelling” shows all the people in your network that can potentially carry items for you.
When an icon is selected in the footer, it turns pink to indicate you are on that page.
Pain Point 3: Users found search bar useless on some pages and was annoyed by the filter button. Users did not how to toggle between “Sender” and “Traveller”. Users had no clue how the sending process works.
Solution: Got rid of the search bar on not needed screens, created an icon for filter in a less obtrusive area and gave “Send” and “Travel” prominent places on the bottom navigation. Make the app prompts very clear and apply the prompts only when applicable (vs. explaining the entire process at once).
<img alt="" src="https://cdn-images-1.medium.com/max/750/1*Js7UhNYHpjzentMZwDj_Xg.png"><img alt="" src="https://cdn-images-1.medium.com/max/750/1*pppgT9O2HvNj23nkaNJ4nA.png"><img alt="" src="https://cdn-images-1.medium.com/max/750/1*i0Ia-3JhmVWMMU_mMZUgdg.png">Sender Screens (before)
The before screens had an annoying filter that was too persistent. The search bar was not useful on the last two screens.
<img alt="" src="https://cdn-images-1.medium.com/max/375/1*r6JB4e6VBmeIbpvkoj1stA@2x.png"><img alt="" src="https://cdn-images-1.medium.com/max/375/1*8W9rRGIvbFogMv06e02SAw@2x.png"><img alt="" src="https://cdn-images-1.medium.com/max/375/1*uJNnhaQ6AJOOejm_IWUd2A@2x.png">Sender Screens (After)
The after screens had a new filter icon to the side to make it less obtrusive. The search bar was taken out on not needed pages and the bottom nav was designed to have prominent icons indicating app features.
Pain Point 4: Users were confused about the information the screen was trying to tell them
Solution: Design the traveller page to provide feedback on where users are in the delivery process. I made it more visually appealing and rearranged the information so that it was laid out better.
<img alt="" src="https://cdn-images-1.medium.com/max/375/1*1HhitSeEiTbIgpAss7JhyA.png"><img alt="" src="https://cdn-images-1.medium.com/max/375/1*rthh_Lsw9HwqFgFwoO4UyQ@2x.png"><img alt="" src="https://cdn-images-1.medium.com/max/750/1*FGfbPAB_Rioy8qvxiRf6Xw.png">Iterations of the Traveller screens (initial= left, final= right)
As you can see, the traveller page improved quite a bit. A “Delivery Progress” update bar was designed to provide user feedback on where they are in the package delivery process.
The pie chart was colour coded between different senders (you can carry stuff for multiple people as long as luggage spaces allows for it), showing exactly how much space each sender takes up.
The “Edit Trip Details” CTA allows for you to change anything about your trip, like available space left. This updates to the senders as well, allowing for arrangements.
“My Senders” section shows all senders and their items you are carrying for.
<img alt="" src="https://cdn-images-1.medium.com/max/735/1*-pSMp7jYwIeubsPN1DV1CA@2x.png">
<h3>Check out my prototype <a href="https://invis.io/5HDIWLZTY">here</a></h3>
<h3>Takeaways</h3>
Aircari is an innovative app that improves international peer to peer delivery experience. To achieve this, it has to incorporate itself into the Taiwanese community in Toronto and streamline their existing peer to peer delivery process while also making it safer. It’s back-end is designed with a lot of powerful features to do just that, its open-parcel policy and photo identification of the product protects the traveller from any illegal activity on the sender’s end. Its QR code delivery confirmation protects the sender from any illegal activity on the traveller’s end. It’s also extremely important to make it as easy and friction-less as possible for a user use the app itself; sometimes a change as small as changing a button’s colour or changing an icon can make a difference.
Thanks for reading! If you want to talk about UX design, product design, or just want to say hi, hit me up at xkevinhyx@gmail.com or connect via <a href="http://linkedin.com/in/kevin-xu-89448b8a">Linkedin</a>.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5fc3bfa6fa5f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/improving-p2p-international-delivery-to-excel-in-the-21st-century-5fc3bfa6fa5f">Improving P2P International Delivery to Excel in the 21st Century</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Improving P2P International Delivery to Excel in the 21st Century

Product strategy, Android design, UX/UI design

Top Stories