BOEING

Battle of the Buidlings

Boeing's "Battle of the Buildings" was a company-wide initiative that gamified eco-friendly practices. The program's success drove the need for a dedicated website to expand employee participation statewide. As the lead UX/UI and Visual Designer, I was tasked with crafting a user-centered website, from concept to launch, to fuel this exciting internal competition.

The Boeing team's vision for the "Battle of the Buildings" website was clear: "Fun, vibrant, and full of art." This exciting direction presented a fantastic opportunity to create a visually engaging user experience. I enthusiastically embraced this challenge, crafting vector art, logos, and User Interface using Adobe Photoshop, Illustrator, and XD to bring the website to life.

 

To Start

Every project thrives on a solid foundation – a deep understanding of user needs and project goals. I typically dedicate 3-5 days to discovery work and system design, leveraging tools like Miro to foster transparency and collaboration with stakeholders. These collaborative boards become a central hub, housing insights from stakeholder interviews, competitive analysis, initial design explorations, and relevant UX research. This approach ensures everyone is on the same page, fostering early buy-in and streamlining the design process.

 

Design Plan workshop

For the Boeing "Battle of the Buildings" website, effective stakeholder communication was paramount. I utilized Miro's sticky note feature to create a clear, collaborative document outlining key project details discovered during the initial phase. This served as a shared reference point, ensuring all parties were aligned on project vision, purpose, and requirements before design commenced. The beauty of Miro's sticky notes lies in their ease of use – stakeholders could review and contribute to the board asynchronously, without requiring additional training. This transparency helped keep the project focused and on track throughout development.

The Sticky Note Board Above includes:

Competitive analysis: I pulled trending design examples from similar sites to show stakeholders insight into my design decisions.

UX trends and articles: An important part of my career has been to keep my thumb on the pulse of trending design articles and implement them into my practice as I design. I use industry favorites such as the Nielson and Norman Group and UXbooth.com

Stakeholder Information: I included all of the information and requirements that I received while interviewing stakeholders. I also sent the link to them so they could add sticky notes on their own accord. I’ve learned that stakeholder time is more valuable than gold, and it needs to be respected as such.

 

Information Architechture

(Click to enlarge)

Laying the Foundation: Information Architechture

A well-defined sitemap and an editable stake holder user flow was the foundation of this project. I crafted a comprehensive sitemap that detailed every crucial page within the platform. This strategic approach served two key purposes:

  • Comprehensive Functionality: These artifacts ensured all essential functionalities were accounted for, guaranteeing the website effectively supported the competition's goals.

  • Pertinent information: I also included important information gathered from various stakeholders that needed to be considered while designing each page of the website.

  • Project Scope and Timeline: By visualizing the website's structure, I could accurately estimate the project's scope and create a realistic development timeline.

Style/Brand guide/ Lo-Fi mockups

I build my style guides with developers and other UX Designers in mind by including things like hex codes and relative guidelines. I also include branding guidelines to insure consistency across the product. The main business goal is also listed, which was to increase the exposure of Boeing’s environmental efforts to employees. I then kicked off the UI design process by creating Lo-FI wireframes to make sure that the product solved for everything that stakeholders needed.

 

Visual Art with Adobe Illustrator / Photoshop

Leveraging the power of Adobe Suite, I crafted visual elements for the "Battle of the Buildings" (BOB) website. This project called for a vibrant and playful aesthetic, and I collaborated closely with a talented visual designer to to produce enough art to pack the UI full of it. Here are my contributions of visual art, including the creation of minimalist vector illustrations and a logo for BOB.

Hi-fi Mockups

Following the established game plan and stakeholder alignment, I embarked on the UI design phase using Adobe XD. To ensure a comprehensive and user-centered approach, I began by crafting low-fidelity wireframes. These wireframes prioritized functionality and served as a collaborative canvas – stakeholders could easily manipulate and offer feedback without extensive development time.

Leveraging these low-fidelity wireframes, I then created a high-fidelity prototype utilizing InVisionApp. This prototype, along with a comprehensive style guide and a selection of high-fidelity wireframes, formed the core of my presentation to stakeholders. The presentation facilitated discussion and ensured alignment with my overall vision for the user interface. Once these deliverables received approval, I transitioned seamlessly into the high-fidelity wireframing process.