Airdrop
Drone Delivery Mobile App
Role
UXD
UXR
UI
Date
Dec 22 - Feb 23
UI design HI-FI mockup for drone delivery mobile app
The Problem
There are many apps that provide delivery services, but most of them use fuel-powered vehicles that are by far the biggest contributor to global climate change. In addition, this increases expenses for businesses that are passing it along to consumers as a delivery fee. Using vehicles can also cause delays due to traffic jams, for example.
Moreover, most delivery services only reach areas with accessible roads, so geographical barriers often impede access to necessary provisions in various parts of the world.
The Solution
Airdrop is a new mobile app that provides drone delivery services and helps users discover and connect with local service providers.
The use of drones for delivery reduces fuel consumption and helps consumers skip geographical barriers.
Responsibilities
Conducting comprehensive UX research and UI design, including interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Goals
Design an accessible app that allows users to easily connect with service providers, order and track.
Assist users in getting past language and geographic barriers.
Design Thinking
In order to prioritize the needs and preferences of my target audience, I used user-centered design, which involved several rounds of usability studies and design iterations.
Design thinking process
Understanding The User
User Research
First, I conducted secondary research to identify important findings that would guide my initial research, then to better understand the needs and problems of users, I conducted a primary research using common UX research methods such as interviews, empathy maps, personas, user stories, user journey maps and problem statements. A primary user group identified through the research was working adults with a busy schedule. Research also revealed that time wasn’t the only factor influencing users. Other user problem included disabilities like visual impairment and language barriers.
Other research methods I’ve used:
Value proposition
Competitive audit
Goal statement
User flow
Storyboard
Pain Points
Language Barriers
According to interviews, some users prefer to order through the app over verbally in the store due to language barriers, while others have difficulty ordering through the app due to the lack of translation features.
A translation feature within the app would solve this problem.
"People tend to speak very quickly and limited translation options are available"
Time
Among the user groups identified were working adults and students who do not have the time to prepare meals.
Accessibility
Platforms for ordering are not usually equipped with assistive technologies.
Persona
For the scope of this assignment, we will focus on adult consumers with busy schedules who are new to English.
UX Research - Persona
Problem Statement
Joseph is a new English learner who needs friendly app that uses photos and translation with order tracking because he has languages barriers and he busy schedule.
User Journey Map
UX Research - User journey map
Mapping Joseph’s user journey revealed how helpful it would be for users to have access to a dedicated delivery app.
User Flow
UX Research - User flow
Starting the Design
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.
Drone delivery mobile app - paper wireframesDrone delivery mobile app - paper wireframesDrone delivery mobile app - paper wireframesDrone delivery mobile app - paper wireframes
Drone delivery mobile app - paper wireframesDrone delivery mobile app - paper wireframesDrone delivery mobile app - paper wireframesDrone delivery mobile app - paper wireframes
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Drone delivery mobile app - Digital wireframes - Low-fidelity mockupDrone delivery mobile app - Digital wireframes - Low-fidelity mockupDrone delivery mobile app - Digital wireframes - Low-fidelity mockupDrone delivery mobile app - Digital wireframes - Low -fidelity mockup
Drone delivery mobile app - Digital wireframes - Low -fidelity mockupDrone delivery mobile app - Digital wireframes - Low -fidelity mockupDrone delivery mobile app - Digital wireframes - Low -fidelity mockupDrone delivery mobile app - Digital wireframes - Low -fidelity mockup
Lo-Fi Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was ordering, and tracking so the prototype could be used in a usability study. 
Drone delivery mobile app - Low-fidelity prototype
View prototype
Usability Study: Findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 Findings [Lo-Fi]
Tracking process isn’t clear enough
Changing address isn’t easy
Payment process is confusing
Round 2 Findings [Hi-Fi]
Accessible tracking needed
Easy and friendly navigation needed
Users want to order quickly
Refining the Design
Early designs allowed for some customization, but after the usability studies, I added an easy and accessible way to navigate to order tracking through the home screen.
Drone delivery mobile app - Before and after user testing
The second usability study revealed frustration with the checkout flow. I added additional value for the users by refining the payment and tracking process. For example, I added a payment confirmation screen
Drone delivery mobile app - Before and after user testing
Mockups
Drone delivery mobile app - UI design - High-fidelity mockup - FigmaDrone delivery mobile app - UI design - High-fidelity mockup - FigmaDrone delivery mobile app - UI design - High-fidelity mockup - Figma
Drone delivery mobile app - UI design - High-fidelity mockup - FigmaDrone delivery mobile app - UI design - High-fidelity mockup - FigmaDrone delivery mobile app - UI design - High-fidelity mockup - Figma
Drone delivery mobile app - UI design - High-fidelity mockup - FigmaDrone delivery mobile app - UI design - High-fidelity mockup - FigmaDrone delivery mobile app - UI design - High-fidelity mockup - Figma
Drone delivery mobile app - UI design - High-fidelity mockup - FigmaDrone delivery mobile app - UI design - High-fidelity mockup - FigmaDrone delivery mobile app - UI design - High-fidelity mockup - Figma
Hi-Fi Prototype
Drone delivery mobile app - UI design - High-fidelity prototype - Figma
View prototype
Accessibility Considerations
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier.
Translation and microphone features were used to assist in overcoming language barriers
Used detailed imagery to help all users better understand the designs.
Going Forward
Takeaways
Impact:
Users feel that the app was designed to meet their needs.
One quote from peer feedback:
“The app made it so easy and fun to order and track! I would definitely use this app as a go-to for a delicious, fast, and even healthy meal.”
What I've learned:
While designing the app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
Other projects
up