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
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
Responsibilities:
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
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.
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.
----------------------------------------------------------
Starting the design
Sitemap
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.
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 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.
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 wireframes with screen size variation(s)
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: findings
----------------------------------------------------------
Refining the design
Mockups
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
I increased the font sizes with better color contrast based on the Web Accessibility Guideline.
Mockups: original screen size (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.
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
----------------------------------------------------------
Going forward
Thank you!
