Drone Delivery Service
Fall 2022 | Chicago, IL
A case study for a responsive website design. The company, Drone Delivery Service (DDS), wanted to have a website that was accessible to their customers across multiple devices. The main user journey is to enter delivery information and review delivery details for their package being delivered by drone.
Goal Statement
To create an online delivery checking resource for packages delivered by DDS. This resource also needs to allow for additional features the online tracking system can provide.
Project Overview
The process of package delivery by drone is still new and uncommon to the average person. DDS wants to provide their users with an easy to use online tracking system that also supports new features that are focused on building trust between their services and the client. My role as a UX Designer is to define the problem, conduct user research, create wireframes (paper and digital), LoFi and HiFi prototypes, and prepare the design for the UX Engineer team.
Understanding the User - Empathize and Define
Empathy Maps were created from results of user interviews. These maps defined issues users face when using a drone delivery service and the lack of confidence faced while requesting this type of service. Users desired more insight into the drone delivery feature and wanted reassurance their packages will be delivered safely. Displaying the destination and ETA for delivery left users questioning the reliability of this new delivery style.
A Problem Statement helped establish goals, constraints, define deliverables, and make benchmarks for success. Using the Persona of Jamel, I was able to develop a User Journey Map. The Problem Statement was then established.
Amir is a college student who needs to order supplies for his coursework because he isn’t able to visit nearby stores often.
With a Problem Statement in mind, I wrote out the Site Map and defined a possible Hierarchical Website Structure.
Beginning the Design Stage - Ideate
I explored various instances of drone delivery with Crazy 8 exercises to drum up ideas for features and pages to be used on the website.
After listing elements needed on each page, I begin creating Paper Wireframes to quickly churn out sketches of how the desktop and mobile versions of the website would look. Below are a few examples of the Homepage and how it could be displayed across difference devices on desktop (left), tablet (middle), and mobile devices (right). Additional wireframing was also done below.
With Paper Wireframes and ideas for features from the Crazy 8 exercises, I moved away from paper and started the first version of Digital Wireframes using Adobe XD. This first version of the wireframes also included pages from the desktop version, and two iterations of the Homepage and About Us pages as viewed on tablets and mobile phones. While creating the digital wireframes, I put together a small Sticker Sheet to be used across the three devices.
Homepage - Desktop
Homepage - Tablet
Homepage - Mobile Phone
(full screen view)
About Us - Desktop
(full screen view)
About Us - Tablet
About Us - Mobile Phone
(full screen view)
Sticker Sheet for Digital Wireframes V1
Wireframes updated to Low Fidelity Prototypes
Once a second version of the Digital Wireframes had been made, page transitions and interactive queues were added to create a Low Fidelity Prototype of the website. The Homepage and About Us page were both updated to continue exploring the look and feel of the website across multiple devices.
Homepage - Desktop
Homepage - Tablet
Homepage - Mobile Phone
(full screen view)
About Us - Tablet
About Us - Mobile Phone
(full screen view)
About Us - Desktop
(full screen view)
Usability Testing and Mockups
After conducting a usability test with several users, there were some updates added to the LoFi Prototypes which included an expanded navigation field and updated information for delivery tracking. With the addition of color, iconography, and text used for Headings, Section Titles, and Body Paragraphs, I developed the Mockup for the DDS website. The Homepage and About US mobile phone screens were also included in the Mockup for the desktop site.
Before Usability Study
After Usability Study
Homepage - Desktop
LoFi Prototype
Homepage - Desktop
Mockup
Homepage - Mobile Phone
LoFi Prototype
About Us - Desktop
LoFi Prototype
(full screen view)
Homepage - Mobile Phone
Mockup
About Us - Desktop
Mockup
(full screen view)
About Us - Mobile Phone
LoFi Prototype
(full screen view)
About Us - Mobile Phone
Mockup
(full screen view)
High Fidelity Prototype
The main user journey was completed on the desktop version of the mockups as well as the additional pages of the website. The pages of the mockup were then connected with transitions to create the High Fidelity Prototype. The Homepage and About Us pages were also created as HiFi Prototypes to show the difference in views from the desktop version.
Takeaways
Moving from Figma to Adobe XD, I explored how the layouts of websites change when viewing them on different sized screens on multiple devices. Though I had fun learning and becoming more experienced in a new Adobe program, at this point I'm still leaning towards Figma as my go-to program for wireframing and prototyping web and app designs - I truly miss the Paste to Replace option!.
I continue learning how much space a desktop screen can hold and this project helped me see what key features and menu options should be displayed and how to properly nest pages on smaller screens.