Damage Delivery Report Design Flow

Convey ideas through playful notes

Project overview
The product:
Wingling is a local logistic company that offers drone delivery for small items that weigh 3 pounds or less such as food, pharmacy prescription, first aid, etc. The goal is to ensure users can report and claim refunds for damaged goods during delivery.
Project duration:
October 2021 – November 2021
Wingling's product images
The problem:
Wingling's website has cluttered designs in reporting damaged goods with drone delivery. It gives users a hard time submitting their reports, especially senior users.
The goal:
Design a Wingling's website to be user-friendly by providing better navigation and flow for reporting damaged goods with drone delivery.
My role:
UX Designer leading Wingling's website design
Conduct interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on responsive design.
Understanding the user
User research: summary
I conducted user interviews, which I then turned into empathy maps to understand the target user and their needs. I discovered that many users are new to drone delivery technology. They still find it confusing to report the damaged delivery to the Wingling website. Users wonder whether there is a need to drop off the damaged items back or not.
User research: pain points
User research - pain points
Persona: Mike
Problem statement:
Mike, a retired veteran, lives in the senior housing. He needs to have his prescription delivered to his house rather than picking it up. Sometimes, the drone delivery causes damages, which need to report for refund or new delivery.
Persona 1 - Mike
User journey map
Mapping user journey map of Mike's experience using the website to complete the damaged delivery report to find the pain points. 
User journey map
Starting the design
Easy and clear navigation is important for senior users. I used that information to create an informed information architecture. I decided to use a sequential sitemap for this particular flow to ensure that users complete the previous step before going forward.
Damaged delivery report flow
Paper wireframes
Next, I sketched out the wireframes to illustrate the steps in completing the damaged delivery on the website. I started with the homepage, login, dashboard, recent order, and return page. The main point is to get the idea flow and see which one makes sense.
Paper wireframe
Paper wireframe with screen size variations
Because Wingling customers access the site on different devices, I started working on designs for additional screen sizes for responsive design.
Paper wireframe with screen size variations - tablet and mobile
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritize buttons like return/refund for users to complete the report faster.
Digital wireframe
Digital wireframes with screen size variation(s)
Digital wireframes with screen size variations - tablet site and mobile site
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of selecting orders to report the damaged delivery.
View the Wingling website's low-fidelity prototype
Usability study: parameters
Usability study: parameters
Usability study: findings
Usability study: findings
Refining the design
Based on the insights from the usability study, I made changes to group elements like manage account, payment, and log out under the user profile.
Mockups - before and after usability studies
I increased the font sizes with better color contrast based on the Web Accessibility Guideline.
Mockups with font sizes and color adjustment
Mockups: original screen size (website)
Mockups - website
Mockups: screen size variations
I included the considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users access the website from various devices, I felt it was crucial to optimize the browsing experience to ensure that users have the smoothest experience possible.
Mockups - screen size variations
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototypes that reflect the result of the usability study.
View the Wingling website's high-fidelity prototype.
Accessibility considerations
Accessibility considerations
Going forward
Thank you!

You may also like

Back to Top