Restructuring The UX Of Vistara App
Heya👋,
This is my take on Vistara App. This was made after my frustration of using the app which otherwise has so premium services. They big time neglected to make the app look and work good. Right now the app has no onboarding experience laid out. Also it follows two screen approach for booking, flights, check-in etc., the options which can be placed neatly in the footer but Vistara neglected it possibly because of no proper competitor analysis.
Don’t forget to check out beautiful Behance presentation as well!
It all started with some research into how the competitors are doing and I went through a lot of app reviews of Vistara in Google Play Store to figure out multitude of issues the users are facing and to develop a design based off that! So did lot of sketching using my Wacom tablet (since I am into digital painting and illustrations and mostly does sketching also right on photoshop, any kind of sketching out ideas for user interfaces also begins there 😛). Below you can see the rough ideations.
Onboarding and Login
We cannot ignore the importance of onboarding. The main value proposition can be effectively shown in this part which comes as soon as the splash screen goes away. I researched and found out their main values and included it in the onboarding in a very story like way and it goes like this
- The customer books and gets her mobile boarding pass.
- She is overjoyed by lower cost.
- She is further delighted by the in-flight wireless entertainment.
Since Vistara’s logo has this unique shape going on, I thought about adding it effectively as the backdrop for our onboarding illustrations and it worked nicely as a design concept. All the illustrations, iconography was completely custom made since I am an illustrator as well 😉.
Apart from this many people complained about login flow as well. I have simplified that as well with using mobile number login/registration for this.
and below a beautiful interaction concept of onboarding I made in after effects and ofcourse, to show off my motion skills 😁
Dashboard
Let’s talk about the dashboard. Currently Vistara is doing two screen approach for major entry points and forcing user to return to the dashboard for other entry points which increases pressure on a users memory to remember which all sections there is to the app and how are they arranged. I simply made the major entry points in the footer and others are neatly arranged in the dashboard, utilizing the dashboard real estate to the best way possible. Also note that the Book Flight card is having a progressive disclosure design pattern applied to it like as soon as user enters the destination, the next option in the footer appears which will have remaining details to input.
Booking
Now lets proceed to their flight booking screen which is the main value proposition. It was easy to realize their booking screen has one major flaw. I went through their app reviews in Play Store and even there read about the same issue. Have a look at the image below to know what the issue I am talking about is:
They failed to follow best practices for certain sections like for the special fares, see how much space it is taking because of using radio buttons! Simple choice chips was more than enough to show it with an info tool tip for all in its heading to show what it is about. Hence I added choice chips. They gave very less spacing between sections mainly because of failed use of more space taking components and that is why their SEARCH CTA went right at the bottom for which the user has to scroll down.
Ok, so now lets look at how the booking flow is like in the app currently according to their user journey:
And now how I made the flow with relevant visual design and material design patterns:
and now some cards and banners that I made for this redesign. These two are very important to display the relevant information in an elegant way and heavily influences the conversion.
No Flights Found Error State
Now coming to the error states, we can’t overlook it and if not done properly, user will be left confused as to what happened. I went littttttttle over the board and came up with slightly out of box concept for it.
Haha yes. I added UFO as a theme here to add a little jazz. Like, nobody would want to get stuck inside a UFO and be lost so applied that concept here so that a user will modify his search quickly by having that “escape this place ASAP feeling” and at the same time not be bored by this page with this illustration.
What more can be done?
Well as a product overall, there are many other areas where improvement can be hugely done like Check-in, Trips and Profile sections, improving the overall user experience like better customer care service, ease of changing the dates of the booking and many more but in this case study my focus was Booking flow.
Hope you enjoyed this case study. Leave a clap if you did so 😊.
