Our Design Process

BY ZARIN FICKLIN AND MATT SUTHERLAND ON APRIL 8TH, 2014

Although every design project is different, this document shows how our design process typically goes. Depending on project scope and budget, some of these steps can differ.

  • Research & Preparation
  • Design Execution
  • Wrap Up
  • Working with HQ

1. RESEARCH AND PREPARATION

The amount of time spent on research and preparation is variable. We’ve found it cost-effective to spend the necessary amount of time here first in order to save time and money later by avoiding poor execution.

Define Project Scope and Goals

The scope includes a list of all required pages/views, features, and interactions. Determining the goals of your product will help us make informed design decisions moving forward. The following pyramid helps show the order of importance, starting from the bottom.

Define Users

Defining your users will inform future design decisions. This could be as simple as “young, tech-savvy sports fans.” For larger scoped projects, we recommend a more robust user persona definition (demographics, behaviors, likes, dislikes, etc). This can be done by HQ, the client, or both (in most cases, the client knows more about their users than we do so we encourage your input).

Use Cases

How will your users use the final product? How do you want them to use it? Use cases are a combination of project goals and users. A few examples:

  • User W wants to create an account
  • User X wants to change her profile photo
  • User Y wants to find contact information
  • User Z wants to share content

Site Map / Screenflow

The site map (for websites) or screenflow (for applications) is a visualization of the project scope and use cases. It is a list of of all pages/views and interactions and use cases that apply to those pages/views. It also shows how pages/views connect to each other. This can be done by HQ or by the client. With the scope, users, and use cases, we are well equipped to create the site map/screenflow. We will make recommendations for structuring the site map/screenflow based on our experience.

Design Inspiration

At this step, we will recommend design inspiration based on your target audience. This will typically be a list of other apps and designs we think could fit your project. We will also ask you for a list of design examples you like. This step is ideally done by both HQ and the client.

Style Guide

For projects of larger scope, it will save time later to create a style guide upfront. This would include color schemes, typography samples, form styles, etc. Creating a style guide creates consistency and helps establish a visual style. The style guide will often evolve throughout a project. This is typically done by HQ, but for some projects the client will have an existing style guide. For smaller projects, creating a formal style guide may not be necessary or within budget.

Gather Assets

Any necessary assets from the client are gathered and stored on Basecamp. This could include:

  • Logos
  • Color schemes
  • Fonts
  • Wireframes
  • Previous designs
  • Content (photos, copy, etc.)

2. DESIGN EXECUTION

Wireframing

Wireframes are informed by the site map/screenflow. Wireframing involves quickly designing black and white layouts for individual pages. Depending on scope and budget, it may not be necessary to do for every view. Wireframing could be as simple as sketches on paper or as robust as detailed wireframes designed in Illustrator or Photoshop. Wireframing allows us to quickly iterate the layout before full-color designs are created.

Full-color Design

This process typically starts with a one-screen mockup with necessary back-and-forth communication to establish a design style. When a design style is approved, the rest of the pages are designed. These are sent for feedback as JPG/PNG/PDF files. Final versions are labeled and organized as PSD or AI files.

Revisions

We encourage collaboration and communication in the wireframing and full-color design process. Careful research, preparation, and wireframing can help limit the number of necessary revisions, saving both parties time. That said, design is an iterative and objective process. We recommend viewing our previous work to ensure our design style is what you’re looking for. The best designs have been refined, tweaked, and iterated many times.

3. WRAP-UP

User Testing

We highly recommend testing designs with users as soon as possible. While we don’t recommend design-by-committee, many valuable insights can be gained by watching users interact with a demo version. We often perform heat-mapping and other analytical tests to better understand how the user interacts with the product at this stage. This often results in further revisions.

Asset Delivery

After final client approval, all design assets are delivered. This could be PSD/AI files, PNG/JPG/PDF files, or sliced up images for all elements. This could also include a final style guide.

4. WORKING WITH HQ

Basecamp

We use Basecamp as a tool for discussion and file storage. This allows us to have everything in one place (instead of scattered in various email attachments, Dropbox accounts, etc). One great feature about Basecamp is that any update can be emailed, and any responses to the email will be automatically posted back to Basecamp.

Scope Changes

Projects inevitably shift in scope as the project progresses. Our retainer billing process encourages scope change and puts the client in full control. We compile a list of major scope changes on Basecamp.

Communication Frequency and Time Frame

We pride ourselves in effective communication. We’ve found it leads to better results and happier clients. Many of our clients have come to us because they were dissatisfied with the communication of previous agencies. The frequency of our communication is dependent on the project and client. We strive to be responsive and to keep you in the loop. Some people like to be as involved as possible while others like to take a back seat. We encourage you to to let us know how often you would like to be updated and how involved you would like to be.

It’s worth noting that our team works on multiple projects at any given time. There may be one day with frequent back-and-forth revisions and then a day with no updates (in fact, we encourage our employees to focus large chunks of time on one project at a time in order to better focus). Depending on your needs and our bandwidth, we will determine a suitable timeframe at the beginning of the project. Timeframes can also evolve with the project as the scope changes. The amount of necessary revisions and collaboration speed can also affect timeframe.

We take deadlines very seriously, and we realize that you want your product as soon as possible (or perhaps a superior or your customers are applying pressure). That said, design does take time, and the best designs are the results of many iterations (which is why large tech companies have big teams of designers constantly tweaking their products).

Approvals

While we like projects to be fluid, for larger-scoped projects client sign-offs after certain design milestones are met can be beneficial. This keeps bigger projects on track and helps avoid unnecessary delays.

Feedback

We encourage client feedback. We’d rather work with you as a team because you know your users, product, and vision better than we do. Basecamp serves as a great platform for this. We bring experience and expertise, which we hope you’ll take advantage of. We’ll respectfully let you know when we disagree with design decisions but ultimately will defer to your decisions.

Designers appreciate honest feedback. Design is a collaborative process and we expect some give and take. Giving designers reasons behind changes can lead to a better result (“Make the logo bigger” vs. “Our users have terrible eyesight, so it’s important that our logo is big enough to read”).

Who will work on your project?

Depending on the timeframe and project size, there may be one or several designers working on your project. One of the advantages of working with an agency vs. a freelancer is the variety of eyes on a project. Even if only one designer is working on your project, our designers frequently collaborate and get feedback from other designers. Many of the best design decisions are made when a designer says, “what do you think of this?” and a mini-brainstorming session happens. Typically a project manager will also be involved with the project to ensure deadlines are met and communication is happening frequently enough.