3 Days
1 Designer (Me)
- UX Design
- Visual Design
- Prototyping
Background
I created this 3-days project for exploring visual design and animations. The scope is not to create a full user flow. Instead, I want to focus on the three key screens: Homepage, Adding Sheet, Camara Scan.
This app can help people to track all their packages in one place, so they don’t need to go to different carriers’ websites to find the latest updates. I thought it will be convenient if users can add their packages by scanning the barcode or syncing their accounts to the app. Also, this app will remind the users if there’s anything they need to be aware of for receiving the package, for example, signature required.
Icons
When I looking at the shipping status, I found it usually can be broken down to a few stages: Lable Created, Shipped, Out for Delivery, Delivered. Therefore, I thought it would be interesting to see some micro-interaction when the shipping status gets updated. My initial idea was to use the shape transformation to animate one icon to another icon, so I picked the flat style.
Progress Bar
I explored three color palettes for the progress bar. The first version is the blue-gray tone. I thought this color was great for background illustrations but too subtle to show the interaction. In the end, I picked the brown tone instead of blue because brown is the color related to “package”.
In terms of the animation, when shipping status gets updated, the icon on the progress bar will change and move forward. The number of days left will be recalculated as well.
Filter & Accordion Cards
I noticed that users not only want to track packages that are sent to them, but also packages they sent out, such as return items or products they sold on eBay. Hence, I added a filter on the top which can help users quickly find the type of the package.
For arrive-today packages, my initial idea is to use the carousel to display multiple cards, but I found it will be more intuitive if users can see the status of all packages in the same viewport. That’s why I decided to use the accordion format.
Appendix
