Steps of interaction design and UX

* denotes required steps. Other step are often skipped or optional.

Definition and requirements

Define the website goals and project scope. It is not always the ID-ers job to come up with requirements, but they are often refined when gathering inspiration [link to private post] and during design.

  • Define the vision
  • Define the challenges/problems
  • SWOT analysis

Define the target audience

  • persona’s
  • contextual scenario’s

Business and user goals

  • interview and observe users
  • talk to product managers and marketing department
  • study competitors

Technological constraints

  • available programmers and their proficiency (skills and knowledge)
  • compatibility  (screen resolution, bandwidth)
  • supported functions (existing reusable components
  • innovation constraints (culture)

Application/website constraints (re-usable templates, fixed navigation elements) – these become your design constraints. Agree on which page templates (columns), high-level that you will base your designs on (rules/principles/constraints/scope).

Also consider deadline, time-to-market (feature cost-benefit).

Gather facts and goals about the website. Question to ask your client before any user research (and design project)

0. Strategy and concept

There are 3 levels within interaction design: [The in-mates are running the asylum, Alan Cooper]
1. Concept design
2. Behavioural design
3. Interface design

A good over of the overall levels outside interaction design, see JJG’s elements of user experience. (img)

Define user + device scope.

1. High-level overview (structure and flow)

First, start with content:

  • Which pages should there be?
  • On each page, which content should belong there? User flow.

Don’t be afraid to divert from the page and boxes model. For example, a one-page navigation/experience could be worth exploring.

List the high-level view, graphically or textually. With the birds-eye view, prioritise each element so you know which one needs most emphasis. Use the

Tools for brainstorming and sketching

Tools: Pen and paper, beer & back of a napkin 😉 , walk/shower/jog, whiteboards, brown paper, mindmapping tools, comics and storyboards, different visual views (Adaptive path), stories & scenarios, proto-personas
Online collaborative whiteboards: see other post

Tools for structuring

Sitemaps and diagrams,  Flowcharts,  notepad/Excel (indented), mindmaps, rough sketch (blocks) ,post-its

Page layout options

Layout options means exploring: Lightboxes, tabs, filters, columns, carrousels, rollover tooltips, accordions, grids, (mega) dropd-downs, etc

2. Coarse design

After agreeing on the high-level principles with your client, now it’s time to dive into more detail, explore the design space.

Work by iterative design

Get inspiration, note/collect good examples and research best practice and patterns, Google images  (e.g. “toggle UI”), high-level blocks, design, get feedback, design, ask bypassers, discuss, design, get feedback.

Wireframing and prototyping
Tools: prototyping tools are (from easy to use to more expert knowledge required): Balsamiq, Omnigraffle, Visio, Axure, Fireworks, DHTML, Flash, Visual Studio
Wireframing                   Interactive prototypes

Axure                   Y                                                   Y

Links to other pages with overview of ID tools.


The earlier the better. Paper prototyping or clickable prototypes.

3. Detail design

Support the visual designer and overview usability. When to do graphical design? Agile vs waterfall.


Tools: Excel, Word
Methods: Use cases
Also known as:

Define all use cases and defaults. Be sure, in later stages, to include edge-cases (randgevallen).

4. QA and functional testing

Visual design comes at play after, but often at parallel with, interaction design.

Testing. Though not always an interaction designer’s job, testing the builds and implementations for bugs, functional malfunctions and interaction design.


Remember to always…

  • Iterate

Exploring design space

1. Invetorise the known, cluster the known, prioritise (order)
2. Explore UI possibilities using the patterns at hand (patterns: accordion, tabs, show more links, anchors, etc)
3. Check if it’s scalable (future-proof) and check for edge cases (amounts, visual limits)
4. Check other constraints, boundaries, limitations. Min/max and average in terms of data, content, image dimensions, labels
5. Simplify the UI @

This is not linear! Do a bit on every step.

UX team of one

As a UX team of one I experienced good results following these steps (iteratively!):
– Vision statements (write down assumptions derived from business needs, and stakeholder quotes)
– Brainstorm your proto-persona (get at least 3) or at least a basic list of user needs (assumed)
– Competitive research (evaluate direct competitors, pros and cons of their interface. what do their users say/need on forum)
– Inspiration research (get a feel for potential solutions by checking how do others solve this problem)
– Features (A list of potential requirements structured Excel columns or Word indents is often good enough.)
– Sketches (screens and elements in their alternative 6-up approaches, patterns, format variants). Going back and forth from competitors screenshots to your sketches.
– Flows and storyboards  (walk through the possible experience as a user)
– Sitemap, use flow  (get down what you know)
– Design principles  (these act as guidelines and constraints, and as input to features/roadmap)

Only after this get into detail design, unless failing fast is an option.

Remember to contribute to team roadmap, critisize features value, offer technical solutions potentials (even at technology level, like scripts, APIs, or data sources), visualise the process & experience for them.

– User Stories  (Agile)

Annotations on your sketches, wireframes and competitive/inspiration evaluations can drive the features/stories/requirements/roadmap.

More (start at Structure)

See also my posts about basic, laws and principles of effective interaction design for the web.  Process, method toolbox and internal influences/roles

Methods and toolkit, toolbox:   (extended)  (UX evaluation methods)

Keyword: UCD process, user-centered design process, workflow, design work-flow, agency work flow


One Response to Steps of interaction design and UX

  1. […] Steps of interaction design and UX […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: