About Nest.

Project brief: ‘About us’.

I was briefed in on a project that was initially a “minor refresh” for the company’s ‘About Us’ page. I sat in on the meeting with a project manager and a producer from the public relations team. The goals were simple — update photos and supply new copy for the required sections.

Objectives.

1. Simplify layout.
2. Display images & biographies for the Founder & Co-Founder only.
3. Give users a high-level overview of Nest’s mission statement.

Beginning stages.

I started with an assessment of what currently exists. It’s crucial to get a sense of the content I’ll be working with. Since this was an update, I knew I’d be working with a lot of pre-existing content.

Here’s a quick-view of the original page:

Process.

Ideation + Iteration.

I prefer to start on paper and iterate through sketching before I even touch Photoshop. This allows me to move quickly and get all my ideas out into the open for feedback.

I then took my sketches into Photoshop quickly to begin crafting the structure and layout for the page. I wanted to keep the wireframes pretty open-ended. This would allow me to be flexible if certain elements or content weren’t working together in the future.

Sticking to the grid.

Our grid allows for flexibility. I wanted to study how to break up the composition of content to create a page that was different than most of our pages. But still felt cohesive to the Nest.com system.

First pass: Visual design.

After sketching and working through some initial UX. I wanted to take a first pass at the visual design.

The first pass at visual design was a concept based off the original page. I was inspired by the lock-up of boxes and text for the biographies of each team member. I wanted to carry that into a simplified layout with the founders of the company.

If we start from the top of First pass #01 and focus on the flow to the second section, we can begin to see there are issues with the scale of the photos. The figures in the hero image overshadow the founder’s photos. This composition is also far too busy to hold users’ attention. There are too many focus points and not enough intentional elements.

This concept was interesting at first. But it started to become far too cold. The overall layout wasn’t flowing and each section felt distinctly different. This wasn’t the route to go. However, from this I learned a valuable lesson in which I’ll highlight later on in this post about managing content.

Taking a step back.

The visual design was beginning to take some shape and form. But it wasn’t being pushed.

There is more to design than just sketches and wireframes.

The sequence of things.

“Everybody knows that the whole is greater than the sum of its parts. What few people realize is that it is only through the sum of parts that the whole gets delivered.”

— Michael Wolff

This principle has been the most difficult for me to grasp. This takes time, experience and patience to comprehend. My manager pushed me understand the pacing and flow of page design. Much like music there is cadence to hold structure, balance and harmony. The same principle can also apply to design. Each section must sync with the next and those that came before. There must be a story. These pieces begin to align when all content is held to the same standard.

Conte(n/x)t.

Whether it’s design or another field, crafting an experience that evokes emotion takes dedication. All content pieces must be designed with each other in mind. Separation between pieces, equals cadence lost. Why should a designer spend so much time determining which image to choose, only then to ignore the copy? The imagery lives and breathes through the copy. This is where the story begins. The flow of a page is influenced by each decision made. Without purpose, emotion is lost.

Copy

Nest is home. (Headline)

We love home. It’s the best place in the world. But not everything inside our homes is lovable. There are things that beep at us; fail without warning; keep us in the dark. There are things we’ve learned to ignore.

We think they should do more.

Nest is focused on making simple, human, delightful things. That’s how we’re creating the thoughtful home: A home that takes care of the people inside it and the world around it.

Decision making: Copy

The copy above went through several iterations of revision. We needed to communicate the mission of Nest at a high-level. It needed to be informative, inspirational and aspirational to what the company’s values are. I didn’t include much of the iterations of copy due to how dense this post would’ve become.

Imagery

Decision making: Imagery

Image 01: This photo is heavy. The colors and amount of people weigh the header section down. It makes the following section of biographies feel weak and unimportant.

Image 02: The photo feels empty. The simplicity of the photo and composition work well with large bodies of text. But the story being told through the copy is lost when superimposed over the image.

Image 03: This photo feels family-oriented. This was a tough one, because this was one of my personal favorites. But does it push the company’s mission statement into a different light? Potentially. No two homes are the same. We don’t want to create an idea of who should be purchasing our products. The magic of home should work for anyone, anywhere.

Decisions about content

From the content above we can see that the images look great. But with copy, is there a story being told? Is there emotion? Probably. All of the images and text do work to a degree. But asking questions like “How do these images flow as a narrative?” “Is this depicting what we’re saying?” This is where understanding emotion through content becomes more complex.