BWS UX Homepage
Establishing UX standards for the Boeing Wiring System App
Overview

The Boeing Wiring System, also known as BWS, is a consolidation of several wiring apps that were built to support legacy Boeing models and the 787. It was broken up into two tracks, Design and Maintenance Engineering (DME) and Change Management (CM). The DME side was built for power users as a native desktop application, while the CM side was for more casual users as a web application.

I was tasked as the design lead for the project with establishing the UX standards for both DME and CM, with over 80 teammates spread across 4 locations: Everett, Charleston, St. Louis, and Bangalore. Due to the size of the team and the breadth of the project, I decided to build a website for the team, which would serve as a centralized hub for all design assets and documentation. It would also serve as a single source of truth for all design related questions.

Duration

12 months

Role

User Research

Visual Design

Web Development

Usability Testing

Link

Website

Understanding the Problem Space

The first step of the process was identifying the current needs of the team in regards to UX support. I interviewed 8 team members from a variety of roles including PM, IT, Engineering, and Dev. From the interviews I was able to understand that most design assets and documentation were stored on a network drive or sharepoint.

However, there were many difficulties accessing or looking for specific files which are detailed below:

1. The team was not able to delete or rename any of the existing folders, as many older files were linked through shortcuts.

2. This made it very difficult to navigate, as new folders were added as time passed, and the team was unable to consolidate folders without breaking the shortcut links.

3. As a result, the size of the network drive and sharepoint frequently hit the max storage limit, since older files were never deleted.

4. It also lead to redundant files on the drive, such as training documents or presentations, which were often missed during knowledge transfer when a teaammate left the project.

5. Finally, the team had personal folders on the drives, and it was often difficult to decide whether to place files you create in the personal folder or in one of the shared team folders.

Example of file shortcut being created

Proposed Solution

From the team feedback, it was clear that we needed a centralized hub where all the design assets and documentation could be found in one place. I decided to build a site to solve this problem, as it would keep they existing file structure intact without breaking shortcut links, and provide a much better navigation experience.

To accomplish this, I used Material Design and Bootstrap to setup the look and feel for the site, ensuring that it was responsive across multiple breakpoints and compatible across multiple browsers. By relying on the components available for Material Design, I was also able to accomplish much of the project development myself, without having to rely on any developers to code the site.

Components from Material Design

Development Process

The site would be hosted in Pivotal Cloud foundry (PCF), as the server space for hosting an app was free at Boeing and didn't require budget approval. I chose to code the site in Adobe Dreamweaver as I already had a license for the Adobe Creative Suite. I would normally use Sublime Text for coding as I prefer the UI, but Adobe Dreamweaver does have the added benefit of previewing the site in real time.

Split View of Code and Live Preview in Dreamweaver

In order to push code to PCF and keep track of commits in case I needed to rollback any changes, I created a repository in Gitlab. I'm also familiar with Github, but only Gitlab was approved by Boeing. The process flow for pulling and committing changes is detailed below:

Bash script run in command line

Information Architecture

After establishing the look and feel of the site and the dev environment, the next step was figuring out what pages the site would need. Some pages had been identified during the intervews, such as the links to the network drive and sharepoint to provide a common shared space. Other pages were added based on my previous experience on other projects, including links to the style guide, wireframes/prototypes, personas, and user contact list. Several pages were also added from the user feedback during the user tests.

Sitemap of BWS UX Homepage

User Test

Once enough pages were developed, I ran several user tests to see if there were any improvements that could be made. I showed the website to the 8 team members I originally interviewed and observed their interaction with the site without any input from my end, noting down what pages they found valuable. I encouraged participants to think aloud during the test, so I could understand their thought process. After the user test, I asked several questions to gather feedback around the experience and if they had any suggestions.

The following changes were implemented based on the feedback and notes:

1. Link to UI Framework document was added as Dev found it useful when had any questions about expected UI behavior on a screen.

2. Link to UX backlog and visual defect list was added as PM found it convenient to pull up during standup or sprint planning.

3. FAQ section was added to the top navigation bar to answer commonly asked questions about the project and the UX homepage.

Fly-on-the-wall Observation

Final site

A link to the completed site can be found at the top of the page. Note that some of the links have been disabled since they are not accessible outside of the Boeing network. Some screenshots of the pages in the site can be found below.

Screenshot of Homepage screen

Screenshot of Style Guide screen

Screenshot of Prototypes screen

Screenshot of Personas screen

Screenshot of Users screen

Screenshot of FAQ (Collapsed) screen

Screenshot of FAQ (Expanded) screen