Can only be viewed on Desktop

goibibo_logo on BG.png

Project Lumos

Lumos was the codename given to the GoIbibo app homepage re-design project, started in late 2019. The purpose was to convert a boring, static homescreen to a live, dynamic model with personalization and interactivity.

📓 Project Brief

To convert the static GoIbibo Homepage into a dynamic plug-and-play model, which could be harnessed by all verticals of the organisation e.g. Flights, Hotels etc.

⏳ Design time / Size

👩‍🔧 My Role & Team

1 Designer (Me), 1 Design Manager, 2 Product Managers.

 

I collaborated with the PMs to rethink how to display various types information on the homepage in new and interesting ways.

My design manager helped me with branding and visual design. 

1 week per component (total 6 weeks) / XL

lumos1.png

Key objectives & approach

We wanted to personalize the Goibibo App homepage for the user, in order to

oBJECTIVES@2x.png

The key idea - to have an infinite scroll on the homepage through self-discoverable & personalised components for the user.

The major components (templates) to be designed:

The first two are covered in this portfolio

components@2x.png

ASSISTANT Component

Brainstorming & Wireframing

We decided to name the Assistant Component “Upcoming Trips” and went ahead with brainstorming and wireframing.

WhatsApp Image 2020-03-11 at 3.38.48 PM.

These skeletons manifested into several iterations of visual design

Upt1.png

Iteration 1

Iteration 2

Upt3.png
Upt2.png

Iteration 3

Finally, we improved on all these iterations and decided on the design which would save the most space on the screen, while at the same time conveying the most important information upfront.

We then created skeletons for different use cases

Trip Card 1.png

One Action

Trip Card 2.png

Two Actions

Trip Card 3.png

Post Trip

User Journey Mapping

For the assistant, we needed to map the user's journey before, during and after they have booked their trip - and observe what are their needs at each point

user journey@2x.png

Final Designs on the Home screen

CROSS-SELL Component

Wireframing for Cross-sell

After covering Assistant component, we dived into Cross Sell - with a lot of brainstorming on the whiteboard (same process as before)

CrossSell.jpg

We then created skeletons for different use cases

xsell-wf1.png

This template was finalized and manifested into several visual iterations

1st Iteration
1st Iteration
press to zoom
2nd Iteration
2nd Iteration
press to zoom
3rd Iteration
3rd Iteration
press to zoom
Final Design
Final Design
press to zoom

The final card had a header section (to show the context) + a carousel to display multiple SKUs for user to browse

Below are the variations for each

Header variations

Cross-sell Card variations

xsellhd.png

Thanks for reading!