Error Pages
Project Brief:
An error during a seamless flow is never a delighted user experience. It often leaves an end user in confusion and discomfort. This sometimes leads to lack of trust. One day, while booking a ticket through our MakeMyTrip android app, I was encountering a particular error repeatedly. Needless to say, It was an annoying experience. This made me think further, if I could add something to this still error page to make it little more interactive, funny and life like. Something which could alleviate user's frustration and constructively help them get back to the normal booking flow. Often when a user is stuck with an error while booking, he prefers to leave our app before making a final booking. Not only this means loss of business but also It leaves a long lasting impression of lack of trust. Means no repeat customer.
I wanted to breathe some life into those error pages with useful tips in a creative way, so if these ever pop up for our user, they forgive us, and even think we are helpful, charming and funny.
Production:
I did discuss this idea with my team mate Nitesh, a wonderful Illustrator and Visual Designer with MMT. We have revamped all the older error pages keeping below things into mind. It should:-
a) Solve the aforementioned end user's problem.
b) Gel with our current visual language.
c) Not have regular jargons where ever possible.
d) Be short and sweet.
e) Have a big call to action button to guide user a way forward.
f) Be creative and funny where ever possible.
Nitesh worked on all the designs and Illustrations. My role and responsibilities includes animating all the assets in order to achieve the end goal. Once the POC was ready we did receive some constructive feedback from our team. With few minor iterations we were in a good position to share the POC with the Product Team. It was not much of a challenge to get their go ahead approval. So far it has been implemented with Cars and Bus LOBs. We are in process of getting it implemented across all LOBs including Flights and Hotels.
Challenges:
I had a vision of improving error pages which also includes fair amount of animation. So far we were dependent on UI Developers for animation. But this activity requires handling complex characters and visuals to be animated which is difficult to achieve via code. After little huff and puff I discovered that Bodymovin Script which is really helpful in converting my animation from After Effects into JSON files. I can easily share these JSONs with the developers. They can further use Lottie Framework to convert the aforementioned code files into native Android, IOS and React platforms. This was a sheer bliss. With a stiff learning curve initially we were able to achieve the desired result. The next challenge was to persuade Tech and Product to adopt Lottie Framework for obvious reasons.
This project was the starting point for all UI Animation in our App. Since then, I stepped into the world of UI Animation Design. For my day in day out work related to UI Animations, I pull the assets from Sketch using the tool called AEUX (formerly SketchToAE). It help me organise all the assets in a layered manner structure with proper naming conventions in AE. Once all the required assets are available for animation in AE, I start with animation production phase. Before animation production phase, I make sure I get my Animation Storyboards approved my the stakeholders. Once my animation is ready, I use Bodymovin script to convert my animations into JSON file. I share the complete code structure which includes JS, JSON and HTML files with concerned developers.
Older Error Pages:
New Error Pages:
With Animation:
Final UI Animation POC:
