Methodology

We've taken our approach from Jesse James Garretts book on The Elements of User Experience.

Garrett discusses what user experience development process is all about, ensuring that no aspect of the user's experience happens without conscious, explicit intent. This means taking into account every possibility of every action the user is likely to take and understanding the user's expectations at every step of the way through that process.

By breaking the job of crafting user experience down into its component elements, we can better understand the problem as a whole. The process of designing and developing these user experiences can be broken into 5 planes:

  1. Strategy: User Needs, Site Goals
  2. Scope: Functional Specs, Content Requirements
  3. Structure: Interaction Design, Information Architecture
  4. Skeleton: Interface Design, Navigation Design
  5. Surface: Visual Design

1 Strategy

The scope is fundamentally determined by the strategy of the site. The strategy phase incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well.

Prerequisites for this phase:

  • Project Kickoff Meeting

Outcomes:

  • Define site rationale & business objectives
  • Define user goals (internal and external)
  • Highlight constraints (Technical and Practical)
  • Create Story Map
  • Creative brief (Define look and feel, tone and voice)
  • Hypelabs project hub setup

2 Scope

The structure defines the way in which the various features and functions of the site fit together. Just what those features and functions constitute the scope of the site. The question of whether that feature—or any feature—is included on a site is a question of scope. Defining what features and content will address the strategy, their priority, and which will fit in the budget.

This will have two focuses. The first is functionality. What features should be on the site to support the strategy. The second is the content strategy. Content is what people are coming for. Content is what we need people to find, process and act on. Treating it as an afterthought compromises our chances of delivering what people are seeking and of getting them to do what we want them to.

Prerequisites for this phase:

  • Project strategy has been clearly documented
  • User goals have been outlined
  • Creative brief has been created

Outcomes:

  • Functional specifications brief/Task list outlined
  • Content inventory/audit

3 Structure

The skeleton is a concrete expression of the more abstract structure of the site. The skeleton might define the placement of the interface elements on our checkout page; the structure would define how users got to that page and where they could go when they were finished there. The skeleton might define the arrangement of navigational items allowing the users to browse categories of books; the structure would define what those categories actually were.Information Architecture is about organizing content so that visitors find what they expect when and where they expect to.

Prerequisites for this phase:

  • Functional specifications brief/Task list outlined
  • Content inventory/audit

Outcomes:

  • Site map
  • User flows or user journeys
  • Lo-fi wireframing of the key layouts can happen at this phase

4 Skeleton

Beneath that surface is the skeleton of the site: the placement of buttons, tabs, photos, and blocks of text. The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiency—so that you remember the logo and can find that shopping cart button when you need it. Interface Design is where we consider and craft the subtle guides that help visitors develop and arrive at their expectations. It employs both broad and subtle friction-easing elements to help people process what they need to in the right order and then take action.

Prerequisites for this phase:

  • Lo-fi wireframes created

Outcomes:

  • Organizing the content at the page level including wireframing key pages
  • HTML/CSS wireframes in browser with key functionality
  • Visual inventory or moodboard created to aid design

5 Surface

On the surface you see a series of Web pages, made up of images and text. Some of these images are things you can click on, performing some sort of function such as taking you to a shopping cart. Here we bring detailed focus to the site’s interactive elements, apply final style details and code the templates.

Prerequisites for this phase:

  • HTML/CSS wireframes
  • Functional specifications brief/Task list outlined

Outcomes:

  • Mockup of key pages
  • Full stack development is completed

Project Tools

This describes the general flow that we integrate into every project. We're not trying to come up with the perfect process as there will always be edge cases.

  • Basecamp
  • Trello
  • Slack