Project overview
The product:
Wingling is a local logistic company that offers drone delivery for small items that weigh 3 pounds or less like food, pharmacy prescription, first aid, etc. Wingling's goal is to make sure that users can report and claim refunds for the damaged goods during the delivery.
Project duration:
October 2021 – November 2021
The problem:
Wingling website have a cluttered designs in reporting damaged goods with drone delivery. This gives users a hard time in submitting their reports, especially senior users.
The goal:
Design a Wingling website to be user friendly by providing clear navigation and offering a better flow for reporting damaged goods with drone delivery.
My role:
UX Designer leading the Wingling's website design
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs and responsive design.
Understanding the user
User research: summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many users are new to drone delivery technology. They still find it confusing in reporting 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 is a retired veteran and a grandfather who lives in the senior housing who would like to have a better reporting system for his damaged delivery.
User journey map
Mapping user journey map of Mike 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 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 screen size variations
Because Wingling customers access the site on different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
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.
Prioritizing buttons like Return/refund for users to be complete the report faster.
Digital wireframes 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 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
Mockups: original screen size
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
The final high-fidelity prototype presented cleaner user flows for viewing items and added to the bag.
View the Wingling website high-fidelity prototype
Accessibility considerations
Going forward

You may also like

Back to Top