During the six-week UX research phase of the project, I spoke with scores of internal stakeholders and product end-users. My team and I even traveled to Istanbul and Mumbai to conduct an initial usability test and ethnographic field study of airline reservation agents.

We were surprised to learn that reservations agents were resistant to an interface redesign that required them to use their mouse. However, once we observed them, we understood why. The speed and ease with which they can book even the most complex travel reservations using just their keyboard and a library of memorized shortcodes and quick commands were staggering. We realized we would need to design the interface to accommodate a nearly mouse-free use case.

After distilling the key findings from our discovery effort, I led the team through the process of defining the scope and parameters of the project. The output of this process is called Creative Direction.

For me, the Creative Direction refers to the overall vision for a project, and seeks to answer the following questions: What product or service are we going to design and for who? How are we going to design it? What specific user requirements must we meet for the product or service to be a success? How will it look and feel when it’s done?

Once the whole team approved and ratified the Creative Direction, it became the framework and the rule-set that we used to guide our decisions as we move into the Design Phase of the project. More than that, the Creative Direction became the yardstick by which we measured our design solutions.

This canvas, called a Lotus Blossom, is a powerful tool I use to collect relevant design precedents against a set of core design requirements.

This helps us to know which of the core design requirements have already been solved and allows us to focus our ideation efforts towards the truly novel design problems within the project. No one likes reinventing the wheel…

We used a combination of Sketch, InVision, and UXpin for wireframing and interactive prototyping. These grayscale wireframes were pretty short-lived as we quickly compiled a UI component library with which to design in later sprints.

Our first attempt at wireframes included a substantial amount of dummy data and Lorem Ipsum placeholder. We found that many of the project stakeholders were distracted by the absence of valid data, even in the lowest fidelity wireframes. We realized that we would need to populate all of our wireframes with content that mapped to their mental models in order to effectively communicate the interface design.

One of our biggest challenges was managing deliverables across several international timezones. Because we were collaborating with SITA’s development ops team located in Ireland and their developers located in India, we knew we needed to be extremely thorough with our documentation. We also wanted non-technical stakeholders to be able to refer to these wireframes free of the annotations.

We designed these wireframes to allow stakeholders to toggle the annotations on and off so they could have a clear view of the interface designs.

We used a combination of InVision, Framer.js, and Adobe After Effects to create a range of animated and interactive prototypes throughout the project.

Micro-interactions represented a significant evolution to the interface design for the Horizon platform. It was important that these animations do more than just decorate the experience. We used a thoughtful application of micro-interactions to let users know when something was happening in the background or to help them with wayfinding. In all cases, we wanted to ensure that animations were at the service of usability.

We created and tested several interactive prototypes during each of our two-week design sprints. We benefitted from the input and feedback from a consortium of airline IT experts as well as a testing group of airline reservation agents, and eCommerce end-users.

One of the big design challenges of this project was accommodating seamless use by end-users all over the world. Our designs had to consider right-to-left and verbose language support.

A common problem in multi-language support emerges when verbose languages like German cause layouts to break, especially in the mobile view. We had to implement a series of micro breakpoints to help mitigate this which required constant stress-testing of our interface designs.

The Horizon platform required a fully responsive design that was optimized for desktop, tablet and mobile.

A final phase of this project was to create a core design system that SITA could use for future project initiatives. We named the system Altitude. Altitude strived to be more than just a UI component library. We wanted to root all of those components in the design principles we defined in the early stages of the project. Altitude is a repository with knowledge-share for not just how to use components, but why to use them.

Altitude provided a single source of truth for SITA with guidance around the visual design system we created for them.

Altitude also provided a UI component library with accompanying HTML, CSS & JavaScript. The library contained a full range of standard UI components like buttons and inputs. It also held specialized components that were specifically germane to the airline travel industry, such as this seven-day date selector.

The Altitude design system provided SITA style and UI component guidance across desktop, tablet, and mobile.

The Horizon platform in the wild as used by Air India. The art direction we established allowed the interface to seamlessly absorb the visual identity of any of SITA’s airline customers. We used a system of thoughtful and limited color usage that leveraged a given airline’s primary and secondary brand colors.

The Horizon platform in the wild as used by Air Creebec