Skills: Visual Design, Product Design Leadership

Research

Large aviation companies are used to running product cycles of 35-45 years, and have corporate strategies that emphasize structural, system, and aeronautical engineering over product design. Design work, such as industrial design, for products is usually outsourced to large industrial design firms. The design cycle for software products in this environment is slower than in software companies, and places emphasis on accomplishing new engineering feats, not user experience or design sensibility.

Team

Our team includes two strategists, six interaction designers, two meeting facilitators, and a visual designer. All are working part-time on this project.

Meetings

We begin by scoping out a list of user interface components that will need to be designed. Working through a spreadsheet of patterns and components during weekly meetings for a few months, different team members bring different ideas to each component discussion: for example, how should we handle the menu pattern? One designer likes this menu, another likes a similar one over here: discussion is vigorous and progress is slow, but a project of this scope may take some time.

Pivot

It becomes clear that the mix of people in the room may not have the necessary skills to execute on the demands of the project. For example, fully available visual designers and front end developers, who are practiced in the creation of a visual system for a large company, are needed and critical to success of this project. Also, a creative director is needed to help make decisions when the democratic process needs to be furthered along.

I desire more clarity in the conversation, so I create a PDF explaining what a Visual System should contain, and our meeting facilitators – those with the most influence in the corporate network – get approval to bring a front end developer to the team. She’s very talented, and is able to turn our designs into code. It's not a full staff of visual designers and front end developers, but it's a start.

Color Design

Noticing that our color definition is murky, I get curious about color, and how to create a color palette for interactive web apps. Looking into color theory, and creating three different color palettes to provide some options to our team, I review this with our team, and we decide the most politically expedient route is the third option: we'll adapt the current corporate print color palette for the web – rather than make a case for new color – by eliminating some of the colors, adding light and shadow to others, naming the colors (to provide clarity when talking with other designers and with development), and providing precise RGB values for each color. Below is a sample of the PDF of this third color option.

Typography

Sometimes, in the hum of corporate activity, details can get lost. Paradoxically, one of the most rewarding achievements of a large corporation is alignment, when the details come together. So design becomes a balance between going with the flow or applying friction to focus on a detail that's been lost. In the case of choosing a color palette, we were able to go with the flow by having an adaptive strategy, but with typography, we needed apply friction.

We did typography research to see if we could determine general typography guidelines at various sizes. We were told by a few employees that the corporate font, Helvetica Neue, could not be used, due to expense, and that we’ll have to use Arial instead. Since the font is the heart of web design, I encourage us to lobby hard against this for a few months, applying friction to the idea that Arial is a valid replacement for Helvetica Neue. Well done typography is one of the keys to a great web app design, and it's such a prolific detail. Getting it wrong would mean that hundreds of web apps would all be rendered in Arial: a bit of a designer's nightmare! Thankfully, we receive approval from the corporate creative services group to budget for all web apps to use Helvetica Neue webfont. Designs that formerly were using Open Sans, Arial, or other fonts are switched to Helvetica Neue, and our designs are the better for it.

Template Analysis

Noticing how understaffed we are, one of the other team members and I research visual design templates on the web, analyzing a few hundred for the visual design characteristics we thought could best transfer to the Boeing brand. I choose one I liked best, and two other team members liked two other templates better. We agreed to use one that mimicked Google's Material Design visual language. This wasn't my first choice, being that it would be recognizable as aligning to another large corporate brand's image, but I knew we could get some mileage out of it in our storytelling down the line.

Corporate bureaucracy being what it was at the time, I purchase a Bootstrap template that uses Google’s Material Design visual language, and I ask to have it hosted on an internal site, so we could see the myriad of components and decisions that would need to be made to create a full visual system for web applications.

I work with our front end web developer to put in our Helvetica Neue corporate font, and our new color palette for web applications. I also redesign a few of the templates pages to make them more appropriate for the brand. I dub this the "Digital Experience" template and start a conversation.

Using this template as a talking point, we discuss three sizes for responsive web (desktop, tablet, and phone) and the three primary native styles (iOS, Windows, and Android) needed for our products. We convey the moderate complexity of creating one of these templates: the importance of a harmonious marriage of design and code, the large number of design decisions that need to be made and coded, and how front end developers may package together a number of open sourced code libraries and frameworks (36 in this case, including Bootstrap, Angular, Less, etc.) into one entity to cover basic functionality. We were teaching layers of middle managers about web product design, so they could better understand how to staff this effort.

Branding Design

After a discussion with branding on the importance of including the Boeing brand into the design, we reach another point of flow or friction. The branding team creates a new requirement that Boeing’s brand appear on every page, rather than on the entry pages and splash pages, as had originally been required. Some team members choose friction, arguing that this isn't a smart change, and I decide to go with the flow, working on a few dozen ways to incorporate the logo into the header design. Hundreds of brands provide their logos throughout their web applications, so I wanted to try my hand at the challenge, providing real options for designers and the brand team to discuss. In each, I varied the placement, function, lines, colors, etc. in Sketch, and then creating videos for team members to visualize using Principle. Below is a sample from that exercise. These mock-ups improve the quality of conversation, (something I'm always keen to do) because while it's possible to criticize the branding team for the discomfort, it's also a valid design challenge that could result in a win for everyone, once we determine what we like or dislike about potential solutions.

New (Interim) Style Guide

As designers on the team begin to apply the template to their own designs, we start having really profitable discussions about how we can use the template’s design so as to not end up with a sort of fractured merging of styles that look unprofessional for a company of our scale. Here’s an example of one of these profitable discussions, showing before and after. While the after design isn’t perfect, it illustrates that having a physical something to say, “like this” is way more powerful than generic words and concepts.

This "Digital Experience" template became a hosted and shared show piece to explain to managers and executives that a small number of designers working a couple hours a week on this project would not result in the desired creation of a full style guide for responsive web (desktop, tablet, and phone) as well as three primary native styles (iOS, Windows, and Android) needed for our products. A dedicated team, such as a consultancy with visual designers and front end developers, would need to be hired to create a visual language that fit the company’s brand, as well as provided the necessary teamwork to create the full list of components needed by everyone.

In the years while managers and executives discussed where this budget would come from, and how it could be approved, plus the time needed for the consultants to fully create our visual system, we were able to use this template to help designers and developers on 10+ web application projects drive toward a common look and feel.

The "Digital Experience" website promoted intelligent discussion, as it addressed many of the foundational decisions that a designer/developer would need to make. It allowed the designers more time to think about the correct pattern for the job, rather than be buried in how that particular pattern would work. It also improved the linkage between a designer's design and a developers interpretation, as developers could look at the code directly. Since the code package was made available to developers, once developers learned the template, they had a wicked fast way to build their front-end UI's.

Many designers expressed how grateful they were for this template’s ability to speed up their design and development process on software projects.

The next phase of this project will involve bringing on additional resources, especially visual designers, front end developers, and a creative director, to create a fully on-brand visual system for both web and mobile applications.

Based in California, Lines is a blog by Nathanael Otto. His posts explore design and storytelling through commentary on lines used in photography, architecture, music, motion picture, and software design.

#2: Style Guide