Visual Design
OpenCAE Visual Identity
Computer Aided Engineering
Timeline
June 2020 to March 2023
Domain
Graphic Design
Problem
Many NASA Jet Propulsion Laboratory's engineers are unaware of the products and services that OpenCAE offers, leading to missed opportunities on better workflows and tools for project development.
Design Challenge
How might users easily identify OpenCAE's products and services amidst all other JPL resources available?
Goal
Create visual assets that can be used across various applications by CAE team members.
Portal
The OpenCAE website is where users may learn more about the tools and services that are offered.
Presentations
OpenCAE team members have access to a presentation template readily available to them when communicating operations.
Style Guide
The following style guide includes lockups, typography, color palette, and iconography. When creating these assets, I had to be mindful of scalability for future development and accessibility for designers and non-designers. My considerations focused on a user base that had minimal knowledge on visual design and a wide range of experience with Google Slides and Microsoft Powerpoint.
Color Palette
Teal communicated warmth and trust, and so I explored values that wouldn't take too much attention away from future content that it would be applied against.
Typography
Poppins and DM Sans were chosen as the primary fonts. The roundness of the fonts aimed to bring a welcoming feel to portray a holistic use of tools and services.
Century Gothic and Libre Franklin were alternative fonts chosen in the case that the user's operating system did not have the primary fonts.
Color and Typography Accessibility Check
I explored combinations of colors and typography within the palette to see which are most accessible to users.
Imagery
I sourced imagery found on Adobe Stock that supported OpenCAE's tone, and edited the colors to match the color palette. These images are primary used as cover pages for presentation decks or banners on their website.
Iconography
The icons I chose to create were based off of what OpenCAE needed to commonly communicate. This focused on language surrounding engineering, security, connection, and collaboration.
Color and Icons
Accessibility Check
I explored combinations of colors within the palette to see which are most accessible to users.
Design Process
I worked with various senior designers throughout this process to capture their feedback and receive guidance on next steps. My individual contributions focused on creating the lockup, selecting colors and typography, and applying the style to various OpenCAE applications.
01 Team Collaboration
I facilitated a team workshop to capture guiding principles that would inform the stying. We landed on: trustworthy, holistic, and humanistic.
02 Moodboard
I then selected abstract and concrete images that resemble the chosen guide words. The client wanted a form that resembled a dragon fractal
03 Form Sketches
I wanted to explore forms that interlock each other to represent the four engineering disciplines that OpenCAE supports.
04 Sketches Vectors
I then took my sketches and created different variations of vectors for the abstract mark. I wanted the mark to resemble the letter "O" and signify OpenCAE's holistic approach in serving their users.
05 Typography Explorations
I focused my exploration on san serif fonts that express a more friendly tone. I played with bold letters and letter spacing to balance out the capitalized "CAE." After receiving client feedback, we proceeded with Urbanist as the logotype.
06 Lockup Explorations
I played with a combination of gradients and different abstract marks to see what fits well with the chosen logotype. The client and I also explored another option with serif fonts. We opted out from the redirection, and continued on with the san serif logotype.
07 Color Explorations
The client and I decided on using teal as our main color inspired by an existing internal tool's design system. We went with palette #107.
08 Style Guide
When creating assets, my focus was making sure it was scalable for other CAE team members to easily to use, regardless of whether or not they are designers. This also meant looking into alternative fonts and open source material available to users.
09 Implementation
I worked alongside our developer on the team to apply the visual style guide to OpenCAE's website, internal wiki, PowerPoint, and internal tools.
10 Extension
I was later called on to extend the identity system to internal tools developed by OpenCAE. This effort was focused on creating an abstract mark for Nexus.
Extension
In applying OpenCAE's styling to their internal tools, my explorations focused on translating the concept of "interlocking elements" when creating the abstract mark. The following process demonstrates where I drew inspiration from and what I decided to visually keep. I co-designed with another designer to develop concepts, decide on form, and explore possible applications of the abstract mark across OpenCAE's platforms.
