A basic process for creating screen-based design.

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!

Dennis Cheatham

Associate Professor, Communication Design

Miami University

Select Your Experience