Digital Process – Websites

Digital IDEA Process

Creating or updating a website is a disciplined process where each phase builds on the last. This interactive guide explains each phase, why it’s important, and the client input we need to move forward through the phases. We also created examples of the deliverables for each phase, based on a fictional company called "GUTovation". Our experience shows that by providing a clear roadmap and seeking input and approval from the right stakeholders every step of the way can help us create a great user experience and keep digital projects on time and on budget.

PDF version
/wp-content/uploads/2016/02/idea_i.jpg

Immerse

We meet with your website stakeholders and take a deep dive into your existing web properties to thoroughly understand your audience, goals, requirements, and validate project scope.

+

Download + Discovery

What it is.

The download meeting brings together key players from your team and ours to officially kick off the project. The meeting can take place in person or via web conferencing.

Why it’s important.

The download gives everyone a chance to learn about the project’s goals, team roles and responsibilities, process and timeline.

Client involvement.

We’d like you to share any and all information that’s relevant to the project. This is also the time to clear up any lurking murkiness to make sure we’re all moving in the same direction.

Output.

Relevant information that will inform our technical and creative approach.

Audit

What it is.

The site audit is a thorough inventory and analysis of the current site. It covers the sitemap, content, assets (images, graphs/charts, videos/animations, forms, PDFs), user flows and SEO. Think of the audit as a home inspection with an inventory of what’s inside.

Why it’s important.

The audit reveals what’s working well (popular content) and what isn’t (redundancies, inconsistencies, outdated information, and under performing pages). These insights help us identify gaps and needs.

Client involvement.

You’re the subject matter experts for your company, so we depend on your input regarding the accuracy and quality of your existing content and assets. Although it takes time and focus to review and respond to the audit, it’s hard to overstate its importance.

Output.

High-level inventory and analysis of the current site.

Technical Brief

What it is.

The tech brief outlines all technical requirements and considerations that go into building the site.

Why it’s important.

The tech brief identifies the web browsers and devices the site will need to support, where the site will be hosted, who will purchase the domain(s) and the level of analytics tracking we will implement.

Client involvement.

This step gives you a chance to confirm technical responsibilities and supported devices, which will minimize surprises during development. It is important to have your internal IT stakeholder(s) review the brief to make sure it aligns with your company’s hosting or domain policies.

Output.

Technical brief.

Examples Tech Brief

Creative Brief

What it is.

The creative brief articulates the site’s purpose, function, primary audience(s) and brand personality.

Why it’s important.

For the creative team, the creative brief acts like a blueprint that guides design, functionality, messaging, content and imagery.

Client involvement.

We’re looking for your feedback on the site’s purpose, the business opportunity, audience drivers and barriers, and how we’ll measure success.

Output.

Creative brief.

Examples Creative Brief
/wp-content/uploads/2016/02/idea_d.jpg

Distill

With the insights gained from the first phase, we establish the framework for your website—how content is organized and how it will reflect your brand—to ensure a great user experience.

+

Content Outline

What it is.

The content outline identifies all the pages on the site and provides an overview of the content included on each page. If you were designing a home, the outline would be a list of each room’s appliances and/or furniture without a description of fabric, dimensions or color.

Why it’s important.

The content outline informs the sitemap, provides an overview of the content buckets and walks you through how content is organized on the site. Once approved, the content outline guides the writer through the copy development process.

Client involvement.

Your feedback will tell us if we’ve correctly outlined the content buckets and key points on each page. If not, it’s much simpler, faster and more cost-effective to make revisions to the content outline than it is to make changes to the fully written site.

Output.

Content outline.

Examples Content Outline

Sitemap

What it is.

A sitemap identifies the pages that will exist within the site, as well as page hierarchy. If we were building a house, the sitemap would identify all the rooms and their relationship to each other.

Why it’s important.

The sitemap allows us to define the pages of the site before we begin working out the details. It’s far simpler and less expensive to make changes at this step in the process, so it’s essential that we’re completely aligned before moving ahead.

Client involvement.

We’re looking for feedback on page hierarchy—specifically, whether any pages should be moved, renamed, added or deleted. This is a good time to ask questions about page hierarchy or structure.

Output.

Sitemap.

Examples Sitemap

Homepage Design

What it is.

The homepage design represents the first page the user sees when they visit your website. The emphasis is on layout, colors, image placement and navigation—not the actual words in headers or body copy. Homepage design is like a full color rendering of your future home’s exterior.

Why it’s important.

The homepage design establishes the visual tone for the entire website and shapes the design and structure for all pages. Together with the sitemap, it helps communicate navigation and information architecture.

Client involvement.

We want to make sure the homepage design reflects your vision for the site, aligns with your brand and offers an excellent user experience. We’re looking for feedback specific to the homepage design.

Output.

Homepage design.

Examples Homepage Design
/wp-content/uploads/2016/02/idea_e.jpg

Express

We get into the nitty gritty now, developing content page by page and establishing navigation and interface conventions.

+

Template Guide

What it is.

The template guide specifies the number of design templates the site will require and which pages will use which template.

Why it’s important.

The template guide helps us plan our approach to content development as we further define the site experience. The size of the guide will vary from one template for a single-page microsite to multiple templates for much larger sites.

Client involvement.

With your feedback, we can make sure we’ve correctly identified the right template for each page.

Output.

Template guide.

Examples Template Guide

Wireframes

What it is.

Wireframes visually explain how a page will work by defining functionality details and content buckets. Wireframes are like the architectural blueprints of a house.

Why it’s important.

Wireframes help communicate what we’re building before we build it, an essential step that helps us avoid time-intensive (and expensive) revisions. Intentionally void of color and design, wireframes allow us to focus on user experience, determine the content and assets we need, and discover potential flaws in the architecture.

Client involvement.

We’re looking for feedback on the organization of information, page functionality, content buckets and navigation.

Output.

Wireframes for each template.

Examples Wireframe

Template Designs

What it is.

Template designs bring the wireframes to life by showing how the design plays out across each template. A style guide is also created during this time to maintain consistencies across all templates and for future edits.

Why it’s important.

Template designs enable us to consistently extend the homepage design across pages while accommodating different types of content.

Client involvement.

We’re looking for feedback on page design.

Output.

Template designs and web style guide.

Examples Template Design Style Guide

Content Development

What it is.

Content development is the process of writing website copy. This includes headlines, subheads and body copy, calls to action, image suggestions and metadata, all written to drive SEO.

Why it’s important.

Content communicates who you are, what you do, how you’re different from competitors and, most importantly, why customers should care. Depending on the specific objectives of the site, content can increase sales, reach new audiences, raise awareness and build brand loyalty.

Client involvement.

We’re looking for feedback on the accuracy and relevance of the copy.

Output.

Full website copy, including metadata.

/wp-content/uploads/2016/02/idea_a.jpg

Activate

In this final phase, we’re creating the site: programming, beta testing, bug fixing, testing, fixing and testing some more. With your final approval, we work with your technical contact and/or your selected hosting provider to push the site live. We also monitor the site for a few weeks to make sure it’s performing properly.

+

Development

What it is.

In the development phase, the design files are translated into code and the content is entered, typically into a CMS, or content management systemDevelopment is like the construction phase of a new home.

Why it’s important.

Development takes the sitemap, written content, assets, homepage design and design templates, and turns them into a fully functional site.

Client involvement.

You’ll evaluate development after we complete testing and proofing.

Output.

Full website with all content, assets, visual design, information architecture, functionality and standard Google Analytics. Optional but highly recommended: Google Analytics event-level tracking.

Quality Assurance

What it is.

Quality assurance (QA) includes browser and device testing, and copy proofing.

Why it’s important.

Before your site goes live, we make sure it functions equally well across the browsers and devices specified in the tech brief. We also proof the copy for spelling and grammar, and check that all internal and external links work as intended.

Client involvement.

You’ll review the site on the test server to make sure it aligns with the approved vision. Because design and copy have already been approved, any copy edits at this stage should be minor.

Output.

Fully tested and proofed website.

Post-Launch Evaluation

What it is.

The post-launch evaluation includes a review of specific performance indicators during the 2–4 weeks following the launch of your site.

Why it’s important.

We use Google Analytics to give us a high-level view of site traffic, page views, most popular pages and average time spent on the site. This data provides a baseline for future tracking.

Client involvement.

Using the data, you can decide whether to make adjustments to your site, or to continue tracking for a set period of time before implementing any changes.

Output.

Google Analytics dashboard.

Examples Dashboard

Optional Service

What it is.

We provide the support you need to maintain and monitor your site after it launches. Choose the level of support that fits best with your infrastructure and budget, and we’ll provide a detailed estimate based on the scope of work.

Monthly analytics

You receive information you can use to improve your site and track the success of your marketing efforts. We create a custom analytics dashboard tailored to your site’s objectives, and share results, insights and recommendations each month. The dashboard distills information from Google Analytics and includes overall measures of site health, plus metrics on your site-specific goals.

Event-level tracking

Google Analytics event-level tracking provides additional insights into how users are interacting with content on your site. It’s used to track site events such as clicks, downloads, external links, video plays and form submissions. We help you identify meaningful events based on your site’s objectives, implement code so that identified events are tracked, and provide a Google Analytics dashboard that makes it easy to find and interpret specific data.

Ongoing site maintenance

After your site goes live, it will require ongoing management to ensure it continues to deliver a great user experience. If you don’t have the time or resources to maintain your site, we can help. Services range from helping with CMS questions to editing content and images and creating entirely new sections.