Packy — Improving online shopping with a better post-purchase user experience
Packy mobile app design
Tools: Sketch, Adobe Illustrator, Flinto, Principle, InVision.
Concept and Goals
Nowadays we can easily find almost everything online and enjoy the convenience of front door delivery. Shopping websites and apps are doing a great job helping customers find the products they want and make the whole process smooth and enjoyable. However, shopping doesn’t end when a customer successfully placed an order and received a tracking number. Shoppers who shop frequently from various places often find themselves digging through piles of emails, trying to remember what they’ve bought, and wondering when can they get them. To return or replace an unsatisfying item is even more painful. Again they dig their emails to find the order, read the return policy, remember to drop off in time, and remember to check refund or replacement.
I decided to design a product that can provide a better post-purchase experience for frequent online shoppers. It is a mobile app that tracks shipping, gives timely notice and keeps all shopping record so customers can check their packages and returns on the go. This product will reduce complains and encourage more shopping in the future, which will continually increase revenue for E-commerce. I named this mobile app “Packy” and hope it becomes a good helper for online shopping.
Wireframes and the first prototype
The first screen is a hearty welcome with a short tutorial. Users can skip it at any time and start to log in or sign up. Although Packy collects order information mainly by accessing emails, to reduce the friction of creating a new account, users should be able to log in or sign up with their own shopping and social accounts like Google, Facebook, or Amazon account.
After login, users will see a default screen - package tracking screen and a menu at the bottom that allow users to navigate between main screens for packages, returns, order history, and setting. The menu stays at the bottom on most of the screens so users can quickly find the main features. Users can start a new return or add a new order that can’t be found in emails by simply tapping the big “+” button.
Tapping on a package, a return or an order leads to the detail screen, where users can find more information about the item and manage it. Once users complete a process, a success screen will pop up and let users know what they have just completed and what’s the next step.
Design Development
Welcome and sign in/ sign up
Interfaces for major tasks
Animations
Logo and Style guide
The idea of using a character and naming it “Packy” came from a glance at an Amazon cardboard box. Cardboard boxes have been largely using for shipping. A cardboard box with taps and a label can easily remind us of a package we’ve been waiting for from online shopping. I drew a cardboard-box man, named this package guy “Packy”, and used him as a logo for the app.
Before diving into the high-resolution design, I decided to spend some time establishing a style guide. It turned out to be a good decision. This guide makes sure all the screens to have a uniform look. It saved me a lot of time and helped me explore Sketch skills.
Final Prototype
Click here to view the prototype on InVision, and here on Dribbble.
Next Step
I did a quick research of online shopping to define my user. It would be helpful and fun to do more user research, like interviews and surveys. I believe there would be a lot of very interesting findings. Another feature I haven’t visualized but would like to continuously work on is giving shopping suggestions and recommendations to users based on their order history.
