Design Strategy: How information Can Drive Your Designs Decisions To Success

Inside Climate News Homepage

In the A List Apart book “Just Enough Research” Erika Hall says “Information and iteration are the keys to a successful design.” She is so right. Information is the first step in design strategy, but how do we get this information?

“Information and iteration are the keys to a successful design.” — Erika Hall

Research is the heart of the answer. Specifically, gathering information through research. It is difficult to dive into the creative process unless you have information to guide your decisions. It’s also very difficult to build a strategy without information.

So in this post, I am going to guide you through a web redesign project that has strategy and information guiding the creative process. InsideClimate News (ICN) will be our example.

InsideClimate News

InsideClimate News (ICN) is a Pulitzer prize-winning, non-profit, non-partisan news organization that covers clean energy, carbon energy, nuclear energy and environmental science — and territory in between where law, policy, and public opinion are shaped. Their mission is to produce clear, objective stories that give the public and decision-makers the information they need to navigate the heat and emotion of climate and energy debates.

What a great organization, right? What can they possibly need?

The Old InsideClimate News Homepage

Well, once we looked through their previous site, we could tell that they needed a facelift, improved site organization, audience expansion, and a more memorable online presence. 

In particular, the look of their stories were outdated — users would read an article but have no lasting memory of who they read it from. ICN also has these incredible curated aggregations that give you cutting-edge environment news, but these looked boring and uninformed in the original design.

So we started asking: How do we go about fixing their site in a strategic way? How do we open up our own creativity to create a solution that is beautiful and achieves goals?

Creativity thrives within processes.

To kick things off, we needed a strategic process, a framework for research and information. When we use the same process, our brains can relax and hone in on the ideas that are floating out there. When you have a defined process, you leave room for creativity to come in at any point. This means that you allow for the good kind of chaos (that spurs on a project) while avoiding the bad kind of chaos (that can halt a project in its tracks).

Discovery -> Design -> Development -> Implementation & Support

Range uses a structured process for this reason. We start with a discovery phase (research & information), then move into designs, which inform our development, which we back up with implementation and support. Oftentimes, we complete this process several times over as we iterate and improve. Because we’re honing in on research today, I’m going to focus exclusively on the discovery and design part of this process.

Design Strategy in the Discovery Phase

We use the Discovery Phase to research and gather information about the client, the project, and client’s user base. We then use this information to determine a site strategy and goals.

“The goal of a designer is to listen, observe, understand, sympathize, empathize, synthesize, and glean insights that enable him or her to make the invisible visible.” — Hillman Curtis

With that goal in mind, the discovery phase consists of six different sections:

1. Info Collection
2. Client Research Interviews
3. Brand Story Analysis
4. User Archetypes
5. Defined Goals
6. Sitemap and Structure.

1. Info Collection

This first part is all about collecting information from your client. Make sure you ask about their existing internal processes as well — like who is the decision maker and are there any other stakeholders? After you get sufficient information, you can start the second part: client research interviews.

2. Client Research Interviews

This is where you start asking detailed questions, not only about design but about the core of their business. Some questions you may want to consider asking:

Background:

  • Could you give us a brief background of your company?
  • Could you outline your vision for the future of your company?
  • What is the biggest value you provide to your customers?
  • Are you planning on expanding your business? If so, how?
  • Why are you building or rebuilding a website?

Business:

  • What are some of your business goals? How do you see those goals relating to your site?
  • What are your or your users’ frustrations with your site?
  • Is there anything in particular (beyond design) that you like about your competitors’ sites?
  • Pinpoint important items from the scope and ask about how these relate to their business (e.g. newsletters, text alerts, specific integrations).

Audience:

  • Who is in your audience and what are the various ways they interact with you online?
  • What do your users need to achieve and/or hope to achieve by using your site? What are their top goals when they come to your site?
  • Is there a type of user you’d like to reach with your business but haven’t been able to do so yet? How would you describe this user?
  • Have you conducted any interviews, gathered site analytics, or sent out surveys to your audience?

Information Architecture:

  • What are your least and most popular pages?
  • What pages bring you the most income?
  • What pages would you like to grow or focus user attention on?
  • Please describe your ideal workflow for users — how do you want your users to interact with the new site?

Branding:

  • Name some adjectives that describe how people view your brand (be honest).
  • Now name some adjectives that describe how you want your brand to be viewed.
  • What is your mission statement?
  • Do you feel like your brand currently supports this mission?

After interviewing the client, take all the information that you gathered from your interviews plus the data that you collected in the info collection and create a Research Interview Report.

Research Interview Report

In a Research Interview Report, we like to include our notes from discussions, key opportunities for improvement, and site goals.

Opportunities For Improvement from ICN’s Research Interview Report

In the report for InsideClimate News we identified a good number of  different opportunities for improvement. Some of those opportunities are very simple and not all of them were addressed in the final product, but outlining improvements helped both us and ICN start a dialogue and beginning establishing priorities. It also helped us identify exactly what they want to accomplish now and what they may want to accomplish later in a secondary phase.

Site Goals and Measurable Successes

After we outline key areas for improvement, we dig down into some proposed site goals.

One of ICN’s Site Goals

When we craft site goals, we aim to establish measurable success markers as well. These markers are one way we can determine if we are meeting (or have met) our site goals post-launch.

3. Brand Story Analysis

The Brand Story Analysis is a supporting document that we give the client. It analyzes the client’s position in the market, their messaging, brand tone, and different brand advancement opportunities we’ve pinpointed.

Brand Tone Analysis for ICN

Based on the client interviews and the Research Interview Report, we list out the adjectives that we identified during Step 2, Client Interviews. The purpose of the list is to address the current brand feel, brand strengths and weaknesses, and the desired feel going forward. We list these out not only to solidify the brand with the client, but to jumpstart our creative thinking. We can look at these words and try to visualize what a “credible and provocative” climate news organization looks like.

Brand Advancement Opportunities

Another section of the Brand Story Analysis is brand advancement opportunities.

Brand Advancement Opportunities for ICN

This is where we define how the company can further their brand in a variety of ways. Getting this on paper helps clients realize their goals and see where their brand can be strengthened.

4. User Archetypes

Once we deliver the Research Interview Report and Brand Story Analysis, we define the site’s key users. Here we aim to broadly identify target audiences and what they’ll need and/or want from the new site.

User Archetype for ICN

User Archetypes help us further establish the tone and direction of designs by making sure we target audiences’ needs.

5. Defined Project And Site Goals

We re-focus on project and site goals from the initial Research interview report. We tweak and revise these with the client based on any new information that has surfaced since discussing the User Archetypes and Brand Story Analysis.

Defined Project and Site Goals for ICN

6. Sitemap And Structure

This is the last part of the discovery phase. It is where we take all the information and analysis we have done so far and re-do the information architecture of the site. This is a very important thing to do with your client because it helps make sure everyone is on the same page with the navigation and structure.

A section of ICN’s Sitemap

Once the sitemap and the newly proposed navigation structure are approved by the client, the design phase begins.

Discovery -> Design -> Development -> Implementation & Support

Design Phase

The design phase does not begin with designs. In fact, because we have to flush out details of the site structure, content placement, mood, fonts, and style first, designs are the last step of the design phase! The following process (one that Range uses) will help get you and your client on the same page before you put a lot of time into high fidelity design comps. Here are our 5 design phase steps:

  1. Wireframes
  2. Mood Board
  3. Style Tile
  4. Mobile Comps
  5. Desktop Comps

1. Wireframes

A lot of people use different applications, like UX Pin or Balsamiq, for wireframes. I like to use Sketch. It’s just a personal preference. I typically go straight into designs from the wireframes so it saves me a lot of content input time.

Wireframe for the Homepage of ICN

Wireframes are meant to be lo-fi, in greyscale, and with generic fonts. This will help prevent the client from getting distracted by any design elements. Ideally, they should be focused on content organization, placement, and functionality. Working with real content whenever possible is key so you account for average headline lengths and content density.

Subscribe Page Wireframe for ICN

After we’ve completed all the wireframes, we then put them into InVision. Invision allows us to create tour points (so we can annotate functionality), notes and client comments. After any revisions, the client signs off the wireframes and we start working on mood boards and style tiles.

2. Mood Boards 

Mood boards help us gather inspiration and inform our Style Tile. It is where we collect various designs, layouts, implementations, colors, and fonts for reference.

Mood Board for Hard News Headlines
Mood Board for Pull Quotes

Sometimes we show mood boards to the client if we need assistance pinpointing their brand style. Other times, we just use it for internal reference. After moodboarding, we start working on the Style Tile.

3. Style Tile

The Style Tile helps depict our recommended font and color choices. It solidifies a design direction without the limitations of a layout. A Style Tile might include images, fonts, colors, icons, and other relevant brand assets. This tile that we did for ICN was revised upon based on stakeholder feedback and the final designs were actually drastically different from the initial tile. That’s is a good thing! The difference means we collaborated on the style early in the design process rather than wasting our time iterating hi-fidelity designs before necessary.

ICN’s Style Tile

4. Mobile Comps

After we have established a design direction with the Style Tile, we get started on mobile comps. This means we take as much real content as we can get our hands on and apply it into a mobile setting.

Mobile Comps for ICN

5. Desktop Comps

After the completion of mobile comps, we dive into desktop comps. As with mobile, we’re using as much real content as possible and keeping our site goals front and center in our mind.

Homepage Desktop Comp for ICN

Result

We’ve followed the whole process and the client is happy and satisfied! It’s time to launch! Let’s take a quick look at our progression:

Old Homepage -> Wireframe -> New Homepage

The new designs are on their way to achieving the agreed upon goals. We like to check back with the client and determine whether or not we are meeting all the measurable success that we defined. In this instance, I am happy to say that ICN has increased brand awareness, audience breadth, newsletter sign-ups, and donations. They even received an EPPY award for best re-design under a million page views.

To Recap: Design is a Process

Creativity thrives within processes. Without research, we have nothing to go on. Research informs our creativity and allows us to piece together something that is not only beautiful but successful and meets client goals.

Does your company need strategic design?

Contact us at Range and we will be happy to talk with you about your needs!

This post is adapted from Sara Cannon’s WordCamp Birmingham 2016 presentation. See here for other adapted Sara speeches. 

Authored By

Managing Partner / Creative Director

Sara loves design, typography, user experience, and art. She gives talks around the globe on web design, user experience, typography, and more. A seasoned designer, Sara has done work for clients such as Disney Publishing and Flickr. She loves open source, her pets, traveling, and WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *