GE Johnson
element exploration

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.

Goals & rally points

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.

Overall thoughts

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:

  • GE Johnson doesn’t want to be seen as trendy. They want to be seen as the company that can morph to fit the type of project a client needs. A bit of a chameleon if you will. The design should support that approach by being able to support a variety of projects, challenges and images.
  • There will be an ecosystem that needs a systematic approach. GE Johnson will need a true design system. One that uses atomic design principles and can be replicated and extended as needed. We’ll be creating multiple websites that have a common DNA. Also, they’ve already expressed interest in using the foundation of this system in other digital and traditional mediums.
  • Bold message. Strong images. GE Johnson’s personality and voice-and-tone is authentic, confident, yet approachable. Their images are powerful and show everything from high-end projects to simple, everyday interactions. Bold messaging and strong images should really come forward, with design helping to enhance those characteristics. The design should never compete with these items.
  • The big picture and the little details – The ability to be able to see the big picture AND the little details is one of the things that make GE Johnson so great and how they provide value to clients. This will be a recurring theme throughout the site.

Initial guidelines

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:

Grids, gaps and lines

Clear grids help establish hierarchy, but don’t have to be boring.

  • Related items in a section typically have an 8px gap between them
  • Items that are part of a group butt-up against each other and use a 1px border to provide subtle separation
  • Flat elements are balanced with subtle shadows on other elements. Avoid outlines, especially heavy borders whenever possible.
  • It’s all about the white space, and guess what? The client is loving that white space!


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 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.

Bold message with context

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.

People & Process

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.

Big picture & little details

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 photo quite literally shows the big picture, from a team and project perspective
  • The blue has been made less harsh by adding a subtle gradient. It also represents the sky (think big picture)
  • We’ve used thin, 1px lines to divide information blocks that are closely related to each other
  • The subtle grid pattern keeps the rest of the blocks from feeling like they’re floating and adds just a bit of personality
  • The little details section literally shows a little detail and pulls color from a detail in the image – in this case, the Union Station sign.
  • The grid doesn’t feel overwhelming or like it’s making me try to focus on too many things at once. The blocks work together instead of competing for attention.

Project profile

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.

Community & personality

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.

Breadth & utility

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.

Leadership bio

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.