Presented by Dan Mall.

  • Why do we model our agencies and/or teams around the outdated assembly line process?

We don’t want web design to be a commodity, but that’s what the assembly line was designed to do.

Framework vs. Process

  • A framework is not a process.
  • Newton’s cradle is a process; it’s a predictable system.
  • A soccer game (or any other sportsball match) is a framework. There are rules, constraints, and guidelines that don’t prohibit innovation or excitement.

Moving from Waterfall to Agile

  • Components in a waterfall process are known as swim lanes. People in a waterfall process thus exist in swim lanes, competing with one another.

We’re not set up to collaborate, but to race each other.

1. Passing the Baton

  • Extend phases in a project so that they overlap.
  • UX sticks around a little longer and designer starts a little sooner. Same with designer and developer.
  • Innovation and surprise happens in the overlap.

2. More together time

  • Extend the overlap.
  • There’s now a period in the project where everyone is working together. All hands on deck!

3. Maximum Involvement

  • Extend further and you get everyone working together throughout the entire project.
  • Advice: Don’t bill hourly!

4. Appropriate Tapering

  • UX Designer may be heavier up front, but tapers off later.
  • Development starts slow and ramps up and is full time later on.

5. Focal Points

  • Key moments in the project where everyone’s thinking together (e.g. kickoff, launch), then everyone breaks off into their own disciplines or concerns.
  • Work will converge at points throughout the project.
  • Periods of divergent thinking and effort and convergent thinking and effort throughout a project timeline.

6. Rinse & Repeat

  • Repeat the above process in phases, repeating as many times as necessary to get from beginning to finished project.

Start and ship. Start and ship. Start and ship.

  • Get all team members involved in writing creative briefs and other documents.

Modern Web Design Process

1. Plan

  • Research!
  • In a recent project (a magazine redesign), Dan worked with Jennifer Brooks and they created a document, Themes & Insights, based on their research.

Here’s a bunch of things we found. Let’s talk about them.

  • Research revealed that end users wanted to know what products they should buy. That opened up the door to really interesting advertising that could be done in a non-sleazy way.

2. Inventory

Content Inventory

  • The SuperFriend Model: No employees, everyone’s a partner. Team members are drafted based on the needs of the project.
  • Adaptive Path’s content inventory process
  • For every page on the site, pick whether it should be added to, edited, or removed.

Performance Budget

You have to be at least 20% faster to be perceived as being faster than a competitor’s site.

  • That 20% faster is your target when looking at competitors.

Pattern Lab

  • Allows you to break design elements down into atoms, molecules, organisms, templates, then pages.
  • Have a discussion with the client around the various pieces (atoms, molecules, etc.) before designing anything in Photoshop or building in the browser.
  • Not all clients are savvy enough to work with a system like Pattern Lab.

Do the least amount of work with the highest fidelity to get to the conversation points faster.

Visual Inventory

  • “Is showing the app on a laptop on the homepage the best way to sell it to prospective customers?” Just because everyone else does it, does that work for this client or product?
  • Dan starts projects in Keynote by making a visual inventory.
  • Take a screenshot of a sample website and add a caption asking questions: “How playful and whimsical should the new site be? Here’s an example of playful and whimsical.” Replace the logo with the client’s logo.

Anything I’m wondering about, I find a site that behaves that way and present it to the client and ask, “Is this what you want to do?”

3. Sketch

  • Exploring ideas as roughly and quickly as possible.
  • Stephen Hay’s Responsive Design Workflow
  • Linear Design: list out everything on a page, make them grey boxes, and roughly the size they should be.

Conversations—not deliverables—are what solve problems

  • It’s easy to make grey boxes responsive. Make that and talk about that.
  • Grantland’s interactive wireframes to discuss hierarchy and importance. Wireframe code ended up being used in production code. This work could be throwaway, but doesn’t have to be.

Element Collages

When you listen hard enough, clients will tell you about their brand.

If you suggest something to a customer, their 80% more likely to do it.

The client will tell you what to design if you listen hard enough.

  • “Obviously this isn’t a website, but I see how it could be one.” — The perfect client’s reaction to an element collage.
  • Content of an element collage varies greatly depending on the kind of project: typography for Techcrunch, for instance.
  • Showing states of things (e.g. in-action button hover states) helps a client realize that an element collage is not an actual website.
  • Showing people holding tablets or phones in an element collage reinforces the “not an actual website” notion.
  • Clearleft experimented with horizontally-oriented element collages.

Element collages are like giving your client a peek at all those hidden layers. – Paul Robert Lloyd


  • Problem and Solution Statements: Build a prototype that solves one and only one thing. Then move on to the next thing.

4. Assemble

  • Mise en place, everything in its place.
  • “Presets” are combinations of organisms. A different word for “template” since that’s such a loaded term.
  • Akin to VSCO CAM’s filters: pick a filter, but then modify its intensity.

RWD as a Catalyst

  • We’re not just talking about flexible images, media queries, etc. We’re talking about everything: content, performance, accessibility, organizational change, workflow.
  • RWD is a reminder of what’s important and we need a better framework for talking about this.