The Porter App Redesign Concept
Firstly, what is Porter?
Porter is a logistics aggregator startup that makes intra-city pickups and deliveries thoroughly efficient and reliable. Logistics market in India is hugely underserved but has immense potential to come out as one of the largest industry of the world with the interplay of infrastructure and technology, and at Porter they aim to help customers reduce their costs in logistics sector and provide effective services.
Why Porter?
Recently, while I was planning to shift from Whitefield to BTM Layout, I came across this app. And to my absolute delight, I found that the rates are quite reasonable and it is indeed an hassle-free experience when it compared to other local movers and packers.
But there was something was caught me a little off-guarded while using the application. Though the mobile application definitely match the standards of decent user experience but there are still a lot of scope to improve and make the application a little more intuitive.
What did I do?
So I thought of doing some modifications in their interface design, which probably could be helpful.
The current home page of the app looks something like this :-
Much like an Uber or OlaCabs interface, where the location of the user is already pre-populated in the location bar on top and the different range of cargo trucks can be viewed on swiping right to left and vice versa.
But I see that all the cargos looks same irrespective of being different in a selection slider. And where are the other details? Like minimum price, rates with respect to the distance or rates with respect to the time? And as an user how do I know which truck is cheaper and which one suits my needs to the best?
Oh wait! Its there.
A decent way to display all the required information but how do I get there? Its pretty simple. Just tap on the circle of the particular cargo and it displays all the required the details.
But there are different personas who use this app and it can be anyone, be it a tech savvy millennial like me, or someone who is not as tech savvy as me, like my uncle who is about 50 years and works in the Indian Army and happens to shift from one city to another owing to his nature of transferrable job.
While it took me around 5 seconds to figure out that on tapping, it would display the details, it might take him much more time, he might also get stuck there and eventually leave the app.
Here is how I solved the problem
I came up with a screen that looks like this, though quite similar to the existing design but has a little modifications :-
- Sometimes in order to get more quickly from point A to point B, you need to slow down, look up, and see what’s ahead of you. But just as Uber did, rather than taking up the current location or pre filling it, asking the user “Where to?” saves a lot of time and everything starts there and builds around that. Thanks to GPS on our mobile phones, we can fetch the current location.
- The second thing that I modified is the selection slider, rather than just truck icons embedded inside a circle, I have used sliding cards.
Why? Because I want the user to see as much relevant information as possible.
The card accommodates information like minimum fare, fare details and most importantly the fare estimates which acts more like a deciding factor.
The user can slider to get from one card to another in order to see the different cargos and their details.
So far you have given your destination and selected the cargo of your choice.Well now what’s next?
This is the next screen.
At the very first sight, I was a bit confused. There are so many things in my plate and how to have them all at once?
Though this page looks very cluttered, but it demands many important questions to be answered and the most important of them all was, what are you carrying?
And I could hardly notice, there is a field that asks us to select good types and quantity.
So I thought of redesigning this screen as well.
The purpose of this screen is just to focus on what is important and leave everything else.
The categories in the grids generally denotes most used categories like timber, furnitures etc and there is a list view as well which ask other important categories.
There is also a search bar which gives user the flexibility of quickly typing and search through their desired category.
Next comes the detail screen, where the sender details like his name and phone number is already pre-populated which can be changed/edited and the user is required only to give the receiver’s details which can be taken by accessing the contact book of the phone.
In the case both the sender and receiver is the same person, then also it can be accessed from the contact book.
Now comes the most important part, the payment or the mode of payment. This app generally do not ask us to pre-pay the money and has only two payment options so far i.e Cash on Delivery and PayTM, I have added internet banking and card payment as alternate options which are became important after demonitisation recently.
The payment method can be changed by tapping on the payment method field and this is how the payment method screen looks :-
The very next screen is the detail screen where the users can review everything for once and proceed to book the cargo. The other relevant informations are the distance from point A to point B, estimated time to reach, probable delay due to traffic conditions etc.
And as the user confirms the booking, the next screen they are taken to is the tracking screen where they can do real time tracking, get driver and truck details and along with that the OTP to validate the booking once the driver reaches the boarding location.
Well, these were very few of the numerous modifications that can be done for a better User Experience, while the improvements can never be absolutely enough and it is an iterative process.
Being a budding designer myself, case studies of apps and websites have always been great learning experiences for me. Thanks to those who took their time out to go through this article.While I try my hands on further case studies, I would love to hear your review about this piece!
