The four steps to great product design

Edited excerpt from The Dribbblisation Of Design by Paul Adams:

Design is a multi layered process. In my experience, there is an optimal order to how you move through the layers:

1. Outcome. Start with the intended outcome. What will the thing you’re designing make easier or better for people? Most projects without a clearly defined intended outcome don’t end well. At Intercom, we work with Clay Christensen’s Jobs framework for product design. We frame every design problem in a Job, focusing on the triggering event or situation, the motivation and goal, and the intended outcome: When _____ , I want to _____ , so I can _____ .

2. Structure. Next, design the system. Work out the required components to meet the intended outcome, and map the relationship between them.

3. Interaction. After the outcome and system are figured out, design the interaction details. What are the microinteractions? The sequence of behavior and events? What are the UI components, and how will people interact with or manipulate them? How will things move, change or animate? Revisit the system, evolve it to match the interactions. Keep iterating.

4. Visual. Once the outcome, system and interactions are well defined and working (ideally prototyped), design the visual details. Make it look and feel beautiful, enjoyable. Now it’s time for beautiful grids, color, typography, iconography.

I see designer after designer focus on the fourth layer without really considering the others.

(1) Re. “Outcome” as the first stage of product design: see Why product managers should frame every product task as a Job To Be Done.
(2) Re. “we frame every design problem in a Job”: see How to describe your customers’ “Job To Be Done” using a Job Outline.
(3) Cf. Five questions to ensure product designers focus on the Job To Be Done.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s