Project Overview
The Challenge
Create and present a compelling vision of the Viasat Aerodocs new design language to stakeholders.
My Role
Lead Designer (member of the Product Core Team).
Contribution
Research, discovery and ideation of Aerodocs design language.
My Role
Lead Designer
__________
As Viasat was maturing its design across the company and developing the company’s design language, BEAM, some of the designers responsible for individual products were asked to start a plan to align these products to BEAM.
I was responsible for doing this for Viasat Aerodocs.
"A set of interconnected patterns forms the design language of your product's interface."
Design Systems, a practical guide to creating design languages for digital products, by Alla, Kholmatova.
The Ask
Aerodocs Design Language Alignment
__________
Aerodocs is a cloud-based service, that allows airlines to create, manage, distribute and view their documentation in a collaborative, secure and controlled environment. Some of the worlds biggest airlines are amongst our customers: Delta, Qatar Airwarys, Japan Airlines, Singapore Airlines, amongst others.
Over the last few years, production had been so intense in order to fulfil our customers requirements that both designers and engineers had not had a chance to review our product. It was time to do this for several reasons. First, Viasat had developed a new and vibrant brand and we needed to deliver on this.
Second, inconsistencies had crept into our interface, which made it harder to use and navigate the tool; we had developed UX debt.
Our UI had become a hybrid between Material Design and our own custom components. Using Google's Material Design was a strategic decision taken years ago at the start of the project to speed up design and development to meet delivery timelines. However, as the product evolved Material Design was just not fit for purpose any more.
There were also huge differences across all of the Viasat products. Some of the newest products were starting to align. However, Aerodocs was a different beast; with hundreds of thousands of users, it had been a lot more challenging to slow down and coordinate this effort up to now.
Notice the hybrid style of Aerodocs (top left) which combines components of Material Design and custom components, and the many obvious differences with other newer Viasat products.
Finally, there's strong need and desire across the team to work more efficiently and free up our time so we can spend it focusing on our users, understanding their needs and exploring and testing ideas.
Research
What's the landscape?
__________
I started by gathering user feedback about the current design. The feedback wasn’t pretty, but it was valuable:
“It doesn’t look well finished.”
“It feels clunky”
“Seems more complex than it needs to be.”
“Too many options. My eye isn’t drawn anywhere specifically.”
I then spent some time understanding Viasat’s new design system and its state of development. At the time I was doing this work, BEAM was not a complete system, only the first building blocks were in place: typography, colour, iconography, progress indicators, and basic buttons.
I then had conversations with other designers and did a brief audit of some of the key screens, components and interactions of their products trying to find common areas of alignment with Aerodocs.
Ideation
New visual direction
__________
I selected some of the core screens: the document library and the document editor, and took a few days to explore how they could be redesigned.
I focused on simplifying the UI and creating a clear hierarchy of all the elements. Here’s are some of the new design concepts:
Each document in Aerodocs is more like a project, with huge amounts of metadata connected to it: the current working draft, previous published revisions, workflows, complete document history, document team, etc.
Showing just the right amount of information, it's a real trick!
To give a little bit of context on this last screen:
Smart Content is a very powerful feature in Aerodocs. Content can be added to the library from any document and to be reused across all other documents. Much like symbols in Sketch.
More on Aerodocs
Detailed examples of Aerodocs design work
__________