Designing the “Future Of” Sites

In: Columns > The Working Designer

By Ryan Nichols

Published on August 13, 2007

I’m passionate about branding. At my previous company, Apples To Oranges, we were fortunate to be able to do a lot of branding and identity projects—either creating new brands, or evolving existing ones. As designers, our work never sits in a vacuum. Each piece is part of the brand’s visual identity. It’s our job to ensure the sites we design not only look good, but also reinforce and communicate the message of the brand.

When Ryan Carson of Carson Systems contacted us about a rebranding project for their series of conferences, naturally I jumped at the chance. The project consisted of creating an identity and website for three conferences. The first conference, The Future of Web Apps, had already hosted an event in London, and had one coming up in San Francisco. The other two conferences were called The Future of Web Design and The Future of Online Advertising, which were both scheduled to start sometime in 2007. My role in the project was creative director, and I worked with our lead designer, Ian Main, and illustrator/designer Jason Ruddy.

Developing the Design Strategy

Our first step in any project is to formulate a strategy for the design. This is very important in helping us ensure that the design communicates the right message about the brand. It also helps by giving both us and the client something to test our ideas against—a design litmus test of sorts. The strategy is derived from a branding questionnaire, an interview, and background research into competitors.

The brand questionnaire for this project was a list of questions we sent to Ryan, which was followed by a phone interview to discuss the answers. The purpose of the questionnaire was to understand the key message of the brand, its tone, what value it offered customers, and how their conferences differed from competitors. Based on his answers, there were two main communication points for their conferences. First, they wanted to get across that they were a small and more intimate conference, and second, they were focused on leading-edge topics.

In addition, we reviewed some adjectives that best described the tone of the brand. We discussed a variety of contrasting tones: feminine or masculine, casual or formal, energetic or relaxing. We decided the tone should be a combination of fresh, progressive, and friendly, yet professional. This set of adjectives was used like ingredients in a metaphorical cake. A little of this, a little of that, applying just the right mix as went through the design process, so the net effect of the tone was what we needed. It is a tall order for sure, but that’s the sort of challenge I love so much: putting together all the potentially conflicting components of a design piece to strike just the right balance in tone.

Once we completed our branding questions with Ryan, our next step was to research Carson Systems’ competitors. Our goal was to understand what message their competitors conveyed through their visuals, and the colors they used to identify their brand. This helped us to decide how we were going to differentiate the “Future of” conferences, and create visuals that would be unique and memorable.

The results of the research showed that many of the conference sites, especially the larger ones, were very corporate-looking. My first impression was that while their topics were about Web 2.0 and AJAX, the tone they conveyed was very conservative and safe. It became clear that to differentiate “The Future of” brand, we needed to show them as being on the leading edge—which fit perfectly with the progressive tone we identified in the brand questionnaire.

Our first deliverable for the project was a brand strategy document. Don’t let the fancy name fool you—it just means we communicated the results of our meeting, our research findings, and our resulting recommendations. Providing this document is really about building client trust in our process and removing the random feeling from design decisions. From that point forward we would be on the same page about what we were trying to accomplish.

Identity and Color

With a solid direction in mind, I worked with Jason Ruddy to begin conceptualizing the logo and color palettes for the three conferences. Jason started by creating a few pages of hand-drawn sketches showing various ideas. This let us easily create a wide variety of identity concepts with little investment in any one specific idea. We scanned the sketches in and sent them to Ryan along with our thoughts on the stronger candidates.

Many of the logos used an acronym and were initially rejected by Ryan. His concern was that the name of the conferences was the complete sentence—’The Future of XXX’. I could understand the idea being unsettling at first, but my gut said I should dig a little deeper. From my previous experience with naming and brands I suspected that people would shorten the name anyway because it was quicker and easier to say. A few searches confirmed that nearly every reference for past FOWA event by bloggers, press, or reviewers was typed out merely as FOWA. We showed this to Ryan and presented it as an opportunity to create a stronger and more memorable brand. Kudos to Ryan for taking the risk.

Eventually we settled on using the type treatment and arrow symbol in the upper left of the sketches (see below). This combination gave us an easily recognizable shape that was flexible and could be applied across all the properties and in multiple media. The typeface was custom drawn for the identity, and it carried a stylish and modern feel that matched our design strategy perfectly. After some refinements in the digital stage, we had a well balanced mark that worked well when combined with the full name of the conference. This presentation helped ease Ryan’s concern, since most uses of the logo would also contain the full conference name.

While we were refining the digital version of the logo, Jason and I began exploring color palettes for each conference. We believe color is a very important communicator. It contributes a lot to the tone and intended message of a brand. From the information we gathered in the design strategy phase, I knew that we wanted to create a palette that had some energy and boldness to stand out against the bland competitors. Our first step was to put together a mood board to take a look at some palettes that had this quality. Some samples, such as sample 2, 6, or 12 were too loud. Others, such as the classic look of sample 10, or the coolness of sample 3, were too subdued. You can see the influence in this collection of images on our final three identity colors.

Eventually, we decided on using a single energetic color for each conference paired with a conservative chocolate brown. This would give each brand a fresh look, while the brown balanced it and kept it from being too wild or energetic. This also allowed the brown to act as a unifying thread throughout the conferences, effectively tying them all together.

Extending the Identity to the Website

With a solid strategy in place, the color palettes picked, and the general style fleshed out in the identity, the website was a snap. OK, so maybe not quite that simple, but this general approach certainly took a good deal of the guesswork out of the design process. The client was well aware of what the general feel of the website would be long before it was complete. No surprises.

Working with our designer, Ian Main, the first page we created was the FOWA home page. Our approach was to view each element as being in a hierarchy that leads the visitor towards the intended goal. Each element would contribute to drawing the reader down a path—starting from knowing nothing about the conference to increasing their interest and eventually leading them to make a decision to attend. The first question we needed to answer in this path was “What will I get from this?”. This means we needed to clearly explain the key benefit offered by the conference and why it should matter to visitors.

To accomplish this, we created a strong reversed section on the top with a large photo of a speaker and slogan. In initial versions, we had tried using a shot of the main auditorium—showing packed seating in a cool looking building—but it just didn’t grab enough attention. Instead, by focusing the imagery on a single person, it was not only more engaging, but it also helped subtly convey the smaller and more intimate nature of the conference. The final headline read “Three days of inspiration and insight”. The dynamic photo of a speaker in action combined with the keywords ‘inspiration and insight’ formed an effective one-two punch to get the message across.

The next question we had to answer was “Can I even attend?”. We decided to place the location and date prominently and persistently across the entire site. We also created an area for the final details, such as price and ticket options, which sat across from the main messaging area. The intended flow was to guide the eye through the main message area, then over to the details panel and down to the button for registration.

The area directly below the main messaging was used to highlight the conference speakers, and we opted to show large photos along with the name of each speaker. Our initial design was to make it look like a Polaroid shot, complete with a cursive signature of their name. This approach was intended to further the friendly and intimate tone of the site. You can see the design below, but eventually the client removed this from the site—primarily because the graphics required to implement it made it difficult for them to manage last-minute changes in the speaker lineup.

Evolving the Design

As the project progressed, the design went through a number of evolutions. After spending time with the FOWA site design, I began feeling the colors were a little too de-saturated and laid-back. After some experimenting, we settled on using a richer brown that contrasted more with the primary conference color. You can see the difference in effect between the original and the final brown—it gave the design a more energetic tone. This small adjustment helped us more closely fit the brand strategy.

We also revised the home page content quite a bit. A good amount of this came from Ryan and his team as they began evaluating whether the content and its presentation met their objectives. They sent over some adjusted text for the messaging area; however, we felt it was too much body copy to throw at readers so high up in the page. As a compromise, we turned the main points into single word headlines, and used a short, single qualifying sentence underneath it to expand upon the word. The final result was much easier to skim with the eye and kept the focus on the key benefits of the conference.

Mission Complete

Overall, I was pleased with the results of all the work we did for the Carsons. I was happy with the direction of the identity and branding, and knew it would serve them well for many years to come. It was unique and fresh, and especially so when compared with their more conservative competitors. This differentiation would help them build a solid presence in their customers’ minds. I was also happy with the way the website turned out, as it was a good extension of the brand. One particularly rewarding moment was to see the identity projected through a stage light on the brick wall behind the speakers at the conferences. Designing for primarily web projects, it’s rare to see our work displayed in the physical world, and seeing it in this context was a rewarding treat.

Related Topics: Web Design, Planning, Community