A panopticon Protoype

Context

Picture this: In the grand scheme of a major software rollout, a game-changing airport overview application was gearing up to introduce something truly exciting – a Live View feature that was about to redefine the way users engaged with airports. This Live View was like having your very own bird's eye vantage point over the airport you were assigned to. Imagine seeing the hustle and bustle of airplanes in real-time, each with its own story to tell, all under your watchful eye.

But that's not all. We added the ability for you to select any plane you wanted, and that's when the magic happened. Suddenly, you weren't just an observer; you were a commander of information. Picking a plane would unveil a treasure trove of insights, detailed specifics that painted a vivid picture of each flight. From the flight's avatar coming to life with enhanced attributes to a side panel loaded with all the nitty-gritty details you could ask for – it’s a flight controllers dream…

Now, creating something this immersive wasn't without its challenges. We knew that the sheer amount of data flowing and the ever-changing graphics could potentially cause hiccups. So, we set our sights on a singular goal: to make things as smooth as silk. We wanted animations that weren't just eye candy but also friendly to your device's brainpower and memory. These animations needed to dance effortlessly through various scenarios, adapting to changes in a way that made the information crystal clear, no matter how quickly things were shifting.

To get here, we had to reimagine our approach. In the past, we relied on these static sprite sheets that were economical on data but had their limits when it came to bringing our vision to life. But we didn't throw everything out the window. We combined our existing assets with new technology, giving birth to a harmonious blend of the familiar and the cutting-edge. This not only sped up our development but also gave us a chance to collaborate closely with the developer team, ensuring that what we were crafting was in tune with what they could seamlessly execute.

Part I:

A review before the redesign

Ah, let's dive into a heuristic review of this app, shall we? As a seasoned designer, I've had my fair share of experiences with apps that attempt to strike that delicate balance between user experience and functionality. Now, let's see how this one stacks up.

First things first, kudos to the team for creating an ambitious and capable app.

1. Visibility of Flight Status: Upon initial interaction, the app's ability to provide clear feedback about each flights current state and any ongoing processes is evident. No loading animations or progress indicators is a real problem however.

2. Match Between System and the Real World: The app's interface reflects familiar real-world concepts and terminology related to its functionality. It's like speaking the users' language, which goes a long way in preventing confusion and making the learning curve gentler.

3. User Control and Freedom: While initially seeming really straight forward, any tasks that go beyond visual confirmations, such as sending the flight crew a message aren’t very intuitive.

4. Consistency and Standards: The app does appear to have a cohesive design language throughout though some of the execution is not very consistent, making it feel at times unfinished.

5. Error Prevention: The app seems to have invested well in error prevention. The interface guides users towards making valid choices and avoids situations where errors might pop up.

6. Recognition Rather Than Recall: Basic functionality is intuitive and visually straightforward, however, for more nuanced tasks and information, it can be really difficult to find what you are looking for.

7. Aesthetic and Overall Design: The app's design is somewhat dated but not terrible, it seems as though it originally aimed to be minimalist but got caught up in scope creep. The focus on the essentials is evident, enhancing usability.

8. Help Users Recognize, Diagnose, and Recover from Errors: In terms of error handling, the app covers its bases with clear error messages and actionable solutions. Users aren't left scratching their heads – they're guided back on track.

9. Help and Documentation: The app's built-in help and tutorials are a saving grace. They provide support without being intrusive, catering to users seeking guidance without overwhelming those who are seasoned users.

Scope creep can been seen in several places, most notably in the header and event manager.

The old UX ready for the revamp

Flight and Event status is the star of the show

Part II: The Enhancements

Enhanced Microinteractions - Our focus on user-centric design led us to implement a series of finely-tuned microinteractions. These subtle yet impactful elements enhance clarity, provide valuable user feedback, and amplify the interface's ease of use and intuitiveness.

Night Mode Enhancement - Recognizing the application's predominant use in low-light environments, we incorporated a Night Mode feature, offering users the choice to alleviate eye strain.

Dynamic Alert Bar - Replacing the old busy alert bar was a big request. The new bar places alerts based on role and importance allowing the user to focus on what tasks are urgent.

Real-Time Live View - Beyond the existing list and gantt views, the newly introduced Live View empowers users to observe the current location and status of flights in real-time.

Puck Information Toggle - Introducing a Puck Info Toggle option, users can now effortlessly switch pucks into an information-rich state, facilitating swift comparison of multiple flights at a glance.

Deprecated live view assets

New and converted assets

Live View animated proof of concept

Building a good foundation of assets allowed for more than just the efficient creation an app prototype with working features, prototypes of smaller proposed features, like the PPW (Plane Proximity Warning), were able to be previewed within days of proposing them.

Modular components

After simplifying and refining which messages were most important, base status graphics were selected to be used that could parent all other  major status variants. Edge case and rare event graphics were also made.

Icons with the circle indicate what service is alerting for that flight, 0n the bottom the red sides indicate proximity warnings for that aircraft.

Neutral, proximity warnings, in-progress and deicing statuses

Flights in green are ready to depart, blue are waiting for deicing, white are waiting, red indicates that the flight has been cancelled at the gate.

This initial prototype allowed the stakeholders to view almost all requested features very early into the project.