London Heathrow (LHR)
INTRODUCTION
In the ever-evolving landscape of air travel, the LHR App stands as a technological marvel, meticulously designed to transform the airport experience for over 200,000 travelers. This efficient and scalable mobile application is not merely a tool but a dynamic solution that seamlessly contextualizes airport information, unifying crucial details and making them easily accessible. It transcends the conventional by offering a user-friendly interface that streamlines check-in procedures, flight details, gate changes, and baggage information, fundamentally redefining the efficiency of passenger interactions within bustling terminals. Its scalability ensures adaptability to diverse passenger volumes, making it a robust and future-proof solution. By contextualizing real-time data, the LHR App not only delivers personalized updates on flights, security wait times, and weather conditions but also curates an individualized journey, fostering a stress-free and memorable travel experience for every passenger it serves.
CHALLENGE
Heathrow Airport, as a complex and ever-evolving environment, demanded a meticulously designed app capable of effectively communicating a vast array of information to passengers while maintaining a user-friendly and intuitive experience. Navigating the intricacies of terminal-specific details, real-time flight updates, diverse amenities, and transportation options requires a comprehensive approach. The challenge lies not only in compiling this data but also in crafting an interface that effortlessly guides passengers through the airport's dynamic landscape. Striking the right balance between innovation and simplicity is paramount for creating an app that aligns with the evolving needs of modern travelers of all age groups.
MY CONTRIBUTION
As the principal UI designer for the London Heathrow App project, I dedicated a significant portion of my tenure at the company to shaping a user interface of unparalleled quality. This project holds a special place in my professional journey, representing the culmination of extensive effort and expertise. I immersed myself in refining each UI screen to world-class standards, combining user-centric design principles with meticulous attention to detail. This project became a focal point for my commitment to excellence, as I collaborated with cross-functional teams, conducted multiple audits, and iteratively refined the design based on valuable feedback.
TASK BREAKDOWN
UI Design
I had an integral role in the development of the London Heathrow app, by making substantial contributions across various facets of the project. From spearheading the Live Activities to actively shaping and optimizing user onboarding process, I've diligently worked to enhance every aspect of the app. Ensuring a seamless and user-friendly experience has been a priority throughout, extending to my involvement in refining map navigation UI, All services, search flights etc. My commitment to leaving no section untouched underscores my dedication to crafting a comprehensive and accessible tool for passengers, where each element reflects a commitment to excellence in user experience from start to finish.
Diverse UI screens on which I collaborated
Design System Updates
My assigned responsibility apart from maintaining and adding new components, involved a comprehensive update of the entire design system. This encompassed modernizing each component within the design system by incorporating the latest features available in Figma from the smallest features like autolayout to large features like variables and tokens. The objective was to facilitate faster design processes and enhance team collaboration through the utilization of cutting-edge Figma capabilities. Below is just some of the components I updated in this exercise.
A selection of the revitalized components within the LHR Project
Live Activities Design
This holds a special place as my most cherished contribution to the entire project. Even though it comes under UI Design, I have still given it its own sub section as It stood out as one of the most requested features by numerous users, and I was fortunate enough to take the lead in its design & development. When I commenced work on the live activities, Apple had recently introduced this feature, and at the time, there were limited guides or tutorials available to assist in the design process. Consequently, the journey involved a considerable amount of trial and error.
Navigating through multiple iterations and engaging in extensive client feedback sessions, we eventually arrived at a finalized design, complete with various associated states. Beyond the Live Activities aspect, my responsibilities extended to crafting the dynamic island elements within the app and designing the corresponding icons.
A variety of sketches for Live Activities to refine and select the most optimal one
Designing the Live Activities feature posed a significant challenge—finding the delicate balance between comprehensive flight-related information and ensuring the user's journey is impeccably guided at every step. To tackle this hurdle, I delved into multiple design variations, as evidenced by the early sketches above, seeking the optimal layout and structure before transitioning to the implementation phase in Figma. Multiple sketches like these represent the iterative process undertaken to refine the user experience, ensuring that no crucial details were omitted while maintaining clarity and simplicity. The culmination of this effort is reflected in the finished components below, which showcase the Live Activities main state and the three dynamic island states.
Finished components for the Live Activities and Dynamic Island
Upon the completion of all components constituting the live activity, my focus seamlessly transitioned to crafting prototypes that encapsulated the diverse states of the live activity and the dynamic island. This phase of the project not only involved the creation of interactive representations but also entailed the meticulous documentation of crucial details. Comprehensive guidelines were established, encompassing information on sizes, spacing, color and animation specifications essential for the subsequent development phase. This deliberate documentation aimed at providing a robust framework for the development team, ensuring precise implementation and cohesion in the final product.
Different states of the Live Activities showcasing the user journey while boarding a flight
Since its launch, the Live Activities feature has received widespread acclaim for its intuitive design and user-friendly interface. Many users have shared positive comments on the app's review page, expressing how they regularly utilize it and how it has significantly enhanced their overall user experience. The following post on LinkedIn is a notable example of the appreciation received. Additionally, our team's UX lead has acknowledged and commended the entire team for their valuable contributions.
A LinkedIn user expressing gratitude for Live Activities by writing a Post
Recognised as one of the contributors to the success of Live Activities
Accessibility (Upgrading Fonts)
Due to the project's antiquity, the fonts were entirely inaccessible, posing a significant obstacle to a positive user experience. My responsibility involved creating a unified typography system that adhered to accessibility standards outlined in the Human Interface Guidelines. It was crucial to ensure that none of the components were compromised, maintaining the overall integrity of the UI design system and made sure all texts scaled properly for most of the screen sizes.I collaborated extensively with developers, putting in dedicated effort to accomplish this goal.
Image showcasing how all the fonts should scale in the app as per HIG Guideline
Documentation
I meticulously authored comprehensive documentations for the newly designed features and upgraded components, ensuring clarity and accessibility for the entire team. By crafting detailed guidelines, I aimed to facilitate seamless integration and usage, enabling developers and collaborators to effectively implement these enhancements into the project. This documentation served as a valuable resource, providing insights into the functionality, purpose, and best practices associated with the revamped components, contributing to the overall success of the project. Below is just two of many documentation pages I wrote for the project components.
Detailed documentation for all the revamped and newly created components
Dark Mode
This task, serving as one of the final milestones in the project, presented a unique challenge that required a unique approach. Specifically, I was tasked with conceptualizing the dark mode color palette, a task that demanded a thorough exploration of various combinations of Hue, Saturation, and Brightness (HSB) values. Implementing these combinations across different UI designs within the app was a rigorous process, involving continuous testing and refinement to ensure optimal visual harmony. The iterative nature of this endeavor involved navigating through numerous trial-and-error cycles until achieving a dark mode palette that not only adhered to WCAG compliance standards but also retained the distinctive brand identity.
Images showcasing the process of arriving at the Dark mode color pallette
UI Audits
Given the dated design of the app, a comprehensive overhaul was necessitated at the behest of the client, placing me at the forefront of the daunting task of carefully reviewing each screen within the entire application to discern opportunities for improvement. Immersed in this undertaking, I scrutinized not only from a design perspective but also delved into the user experience intricacies. Thoroughly mapping out areas that demanded attention, I dedicated significant time to comprehend the competitive landscape through benchmarking exercises, discerning both superior practices adopted by competitors and potential features our app might lack. This exhaustive process involved a deep dive into every nook and cranny of the app, aiming to ascertain whether we were delivering a superior user experience. Overall, this venture demanded a comprehensive analysis, pushing the boundaries to ensure that the refreshed design not only met but exceeded user expectations.
Various notes related to one of many audits performed to enhance the app
Different passes taken to enhance a particular section on the app
CONCLUSION
Embarking on this project proved to be an enriching journey, encompassing a myriad of diverse tasks and marking the longest duration of my tenure within the company. With every screen in the app bearing my contributions, the significance of this undertaking was magnified by the app's status as an industry leader with a vast user base. Designing for such widespread impact demanded meticulous thought, prompting an immersive and thoughtful approach to crafting each screen. This experience not only deepened my understanding of user interface design intricacies but also underscored the responsibility that comes with designing for a platform of such prominence, making it a testament to dedication and precision in enhancing the overall user experience.