Interaction Design Process

Here’s an overly simple, step-by-step overview of the interaction design process, based on my experience as a front-end developer.

Meeting the Client or Stakeholder

• Where are they?
• What do they do?
• What is the brand position?
  • What do they offer that no one else can?

Develop the Persona

• Who are they?
• What do they value?
• What is their attitude?
• How do they spend a regular day?
  • Where do they shop?
  • Who do they spend their time with?
  • What do they think about?
  • What are their fears and dreams?
  • Where do they donate their time?

Style

Establish the look, feel, tone, and vibe.

• What tone of voice do they use in their materials?
• What is their shop or place of business like?
• How does their brand position show through?
• If they were a song, what genre would it be?

Products and Services

Figure out what the organization produces.

• Categories of products or services.
  • Individual products inside these categories.

Beyond the Paper Persona

The psychology of interaction.

• What motivates this person?
• What would make them return to the design over and over?
• What features would make their lives better?
• What look and feel would make the app feel like it was made just for them?
• What challenges make them bail on an app or website?

App/Website Features

Create feature ideas. These should be useful, usable, and desirable.

• Basic, must-have usability features
• Useful, time-saving, or convenience features
• Special, value-adding features
• Extraordinary, cool, whiz-bang innovation features

Design Considerations

Let these drive the design.

• Mobile first
• Accessibility concerns
  • Multiple languages
  • Speech-to-text
  • Color contrast
• Responsive web design
  • Flexible to adapt to different screens

Wireframing

Create the skeleton/framework that holds the elements together.

• Margins and layout
  • Consistent but flexible to hold content
• Titling
• Navigation. Following the user interface “rules”
• Main content areas
• Special screens and interactions

Design Systems

Create a kit of parts

• Buttons
• Typography
• Image frame styling

Assets

The content.

• Images formatted for screens
  • File formats
  • File size (small for faster downloads)
• Sound and video
• Titles, subheads
• Long-form content

More to come… like… testing!