The elements below show potential solutions to specific goals and challenges with the GE Johnson website. They combine messaging and design to provide an overall sense of tone and style that will be used as a foundation for creating the rest of the website. Each section includes a brief description of what we’re trying to achieve.
The GE Johnson Element Exploration is based on a few key things that help anchor the design and messaging style. These principles should be used as guidelines when creating new elements and as a filter after creating them.
Oh, and the styles you see in these descriptive boxes (color, headline, fonts, etc.) are really just meant as placeholders to describe the sections, not as actual design elements.
GE Johnson, perhaps more than any other client we’ve worked with, requires an approach where design is something you don’t really notice, but feel nonetheless. The feel should be based on a simple, clean, refined foundation that’s balanced with subtle details and nuance.
The “contrasts” table helps illustrate the balance that we’re trying to achieve. This balance is based on what potential clients and employees should feel when they visit the site. The column on the left is about 70%-80% of what’s needed while the other 20%-30% in the second column brings in warmth, personality and delight.
There are a few key reasons for this based on our discovery:
We’ve started to establish some design system guidelines as we’ve been creating assets. These guidelines may change as we see how elements work together but here’s some of the basics:
Clear grids help establish hierarchy, but don’t have to be boring.
The typography system should be clear, simple and refined. Avenir is already an approved font used by GE Johnson. Minion helps bring texture, personality and an almost news headline sense to offset the body copy. Both fonts are available through fonts.com web service.
Except for special circumstances, text should be in the warm gray (#5E4F47) or reversed in white.
Headlines – Minion Bold
Body copy – Avenir/Avenir Next Regular
Subheads – Avenir/Avenir Next Bold
Images and text should work seamlessly to tell the entire story. This means showing the big picture and the small details as well as people and projects. Color can be pulled from the image in subtle, yet helpful ways as needed.
This section sets the stage by letting the image and bold message come to the forefront. The image represents the big picture and the small details with it’s focus on the wheel of the scraper while showing the context of the fleet, the mountains and the land.
The “cards” are meant to provide additional context, almost like a placard next to a piece of art in a gallery. The yellow button/link pulls color from the image and is offset from the top box to show that the items are related, not part of a continuous message (see how we’re addressing that later in the exploration.
This section shows how a bold headline and short statement surrounded by lots of whitespace feels confident and clear. The video is meant to show how showing is better than saying. The caption overlaps the next section ever-so-slightly to show that the numbered boxes below it are part of the same over-arching message.
You’ll also start to see how the blue colors are used in smaller ways – especially the main corporate blue which can feel cold and overwhelming. The lighter sky blue is in the brand palette but feels much lighter and friendlier.
Whenever possible, we’re avoiding the use of borders which can feel constraining and add an extra element to the mix. In this case the separation of the video and caption as well as the shadows on the numbers and cards help achieve this.
This section shows how we might handle bits of information that are related, but need to be focused on individually. A few key things to note:
The project profile really builds on the items shown above. You could just see the initial photo, headline and description and understand most of what you need to know about the project. Key stats are built in a simple band that doesn’t call too much attention to itself. The big picture and little details text is the first (and possibly only) time a color is used in the text to provide additional emphasis.
This section works to show the breadth of how GE Johnson builds community without trying to show everything. The illustrations are meant to show a bit more personality since we’re talking about something a bit more casual. That said, the jury is still out on whether they like they approach of the illustrations.
The link with the lighter blue underline is meant to turn into a highlight of the words on hover and is a great example of a small detail that adds surprise-and-delight.
This section had the most discussion. The format worked well, but the table didn’t resonate with people and was actually confusing.
The goal here was to show the breadth of locations and work without just saying that. The toy truck is meant to not only be fun but show that you truly do see GE Johnson EVERYWHERE.
We really want to avoid the typical “corporate headshots” at all costs. We’re hoping to show each member of the leadership team in their natural environment – working on a project, talking to a team, etc. The color gradient is pulled from Jim’s tie to further show connection and personality in a subtle way.
The top box shows the big picture – the quick info – while the info below provides the little details. GE Jonson would like to shorten the bios if possible.
