7 min read

Synopsis

Ever since I’ve come to the USA, I’ve been ordering a lot of stuff online and UPS has been one of the major service providers for companies like Amazon. Their mobile website and app, however do not seem to reflect their awesomeness.

Here, I have redesigned the UPS mobile app. I found a lot of problems with the original application and it just didn’t reflect the kind of services that UPS offers.

The idea was to retain the brand colors (ochre and brown) as much as possible, give a more modern look to it, improve reachability and complete it within a few hours.

Quick Facts

My Role
High-fidelity prototyping
Tool
Created for
Mobile Phones
Time frame
2 Days
Scene 1

Identifying the issues

The first step in any redesign project is to identify issues with the original app and how it impacts user experience. I did something similar with the UPS app.
Landing Page
Bland page
On first glance, the landing page looks very bland when it comes to the UI
Lots of empty space
There's a lot of wasted space on the screen which can be filled with other quick actions
Position of the tracking input
The position of the input field makes it difficult to reach with just one hand. It sits too high.
Tracking Page
Tight spacing
The data on the page looks too cluttered and can use a bit of white space for readability
Icons alignment
The icons on this page are misaligned with its respective text field.
Shipping Page
Too many clicks
Both pages have elements that require a lot of clicks to reach to the end point.
Useful information hidden deep
Information from both these pages are vital and should be easily accessible.
Menu
Harsh shadows
The shadows are too harsh, and simply don't live up to modern standards
Issue with gestures
The positioning of the menu on left overlaps with the "Back" gestures of many new devices.
Scene 2

Proposing the solution

With the issues been identified successfully, it was time to go to my playground and come up with a solution. I already had one in mind, so just needed to execute it!
Landing Page
Tackling the empty space issue
Brought all the options from the other page on this page for quick access. Added all packages in a horizontal scroll.
Handy information on first glance
Using cards, I was able to categorize data easily and used the space efficiently to display all relevant data - Tracking number, Current status, Estimated delivery, Recent update, Recent location and weight all in one place to save clicks.
Easier one-handed use
Input fields placed strategically so as to facilitate one handed use
Tracking Page
Cards for easier categorization
Cards have proven to be the best solution to categorize data. I have used this to categorize important tracking info - sender, receiver, delivery info and processes into separate cards. This provides better readability, easier scanning of information, and looks pleasing to the eyes
Better spacing
Increased the white space to improve readability and give some breathing space.
"New" badge for updates
Added a badge that will be linked to notifications on the package progress. This will bring the attention of the user to the update, and save his time so as to not search for it
Menu
Removed shadows
Removed the harsh shadows, and simply blurred the background to give more attention to the menu
Clubbed similar options
Combined similar options to reduce load on the user
Easy access to "Chat"
Added the option to chat with a customer care rep at the bottom navigation for easier access
Extra Scenes

Dark Mode

Just did this for fun ;)
Landing page
Tracking page
Menu
Post release

Reviews

So I posted these design ideas on my LinkedIn and got some really amazing reviews for it. Check them below :)
This looks awesome. UPS needs to check it out the work. Users will love it. Kudos to you.
Vruttik Bhatt
This is so great, Rohan! I would totally love using this app! 👏
Marcy Lendaro
This looks great Rohan, the revamped design and the way information is being displayed has added a new life to the application.
Harshit Sinha
Really like the minimalistic approach! Appreciate it.
Sai Suraj Mehta
Someone send it to UPS. They really need to use it. It looks just great specially the landing page.
Ajay Mahato
Impressive! Always creative and  talented
Hussain Al-yaarubi
Like what you saw? Let's work together
Download Resume