BangaloreInternationalAirport
User Experience / Omnichannel
A redesign of the website and mobile app for one of India's biggest airports.
Introduction
Bangalore International Airport Limited (BIAL) is the third busiest airport in India, it is also the fastest growing airport in the country.
BIAL were aware of many potential improvements to be made to the customer experience, and that their digital channels were not living up to the latest trends and technologies.
They needed to re-engage customers, improve digital channels and create end-to-end experiences for customers by creating a modern, flexible, intuitive responsive online portal.
Discover
Design Thinking Workshops
As we had a scheduled Design Thinking workshop with the clients, we decided to run a mock workshop internally to generate some ideas within our design studio to get a general feel of what potential users are leaning towards. What are the pain points that leaves the users frustrated in an airport experience. This session included a small amount of non-designers as well, just so we could have a varied perspective on the matter.
Client Workshop
We proceeded as scheduled, to conduct the client design thinking workshop that helped us integrate the customer’s needs with business opportunities and technical possibilities.
4 Personas were developed in DT workshops and captured in brief descriptions that include behaviour patterns, goals, needs, psychographic attributes, with a few fictional personal details to bring the persona to life.
The following were the personas:
- Leisure-novice traveller
- Leisure-frequent traveller
- Business-frequent traveller
- Business-novice traveller
Clients devising and explaining their personas.
A sample snapshot to show the previous sitemap.
Technology Trends
We also created a report to showcase the technology trends from around the world in terms of best-in-class airport facilities. This report was to go an extra mile for the client and help them create experiences beyond screens.
A peek of what the report contained.
Analyse
Personas
From all the input we'd gotten from the stakeholders, other designers, sample users, etc. We chalked out the 4 personas. Following are 2 samples:
The Business-Frequent Traveller.
The Leisure-Novice Traveller.
Future State Journey Map
From thereon, we proceeded to create an ideal future state journey map of the user.
Card Sorting Activity
We decided to take the Closed Card Sorting route where participants were asked to sort topics from content within the existing website into pre-defined categories. A closed card sort was used because we were are working with a pre-defined set of categories, and wanted to learn how users sort content items into each category and their rationale behind it. Thinking aloud during the process was encouraged.
Card Sorting in progress by various participants.
Revised Information Architecture
Our next step was to create the new information architecture based on the card sorting results, previous website data and our own understanding of the users.
Data used to help inform the new IA.
Final IA.
Design
Wireframes
For the design phase, we decided to go ahead with a mobile first approach for the responsive web design as 67% of the users (for our sample 2 month time period) were primarily using mobile devices.
Data point behind decision
The following are some of the wireframes created:
A sample of the wireframes created for the entire website.
Visual Design
For the design phase, we decided to go ahead with a mobile first approach for the responsive web design as 67% of the users (for our sample 2 month time period) were primarily using mobile devices. Following are some of the screens and color guidelines.
Color Guidelines.
Flight Status color codes.
Micro-Animations
Following are few of the micro-animations created:
Handoff & Outcome
Developer Handoff
During this period I was responsible for co-ordinating with the project management, testing, back-end, and front-end teams. It was a crucial period for all teams involved as proper ground work needed to be set from the start in order to avoid irreversible issues at the end of the development cycle.
Developer Guidelines
Website mega-menu guidelines.
