The document outlines the process of designing a product from initial user research through prototyping. It involves researching users through personas and scenarios, brainstorming design ideas through probes and workshops, sketching concepts, creating storyboards to explore interaction flows, wireframing screens with layout and functionality, adding graphic design elements to mockups, and developing interactive prototypes to test the product before coding. User involvement through co-design is recommended when possible. The process moves from loose sketches to explore ideas through increasingly refined representations to prototypes that can be tested.

1. User research
(personas)
Conceptual Design
Scenarios
brainstorming
Design probes
Design workshops
sketching Product
“draft”
Research
Designer
Creativity
User involvement
(if doing co-design)

2. User research
(personas)
Conceptual Design
Scenarios
brainstorming
Design probes
Design workshops
sketching Product
“draft”
Research
Designer
Creativity
User involvement
(if doing co-design)

3. Product “draft”
Sketches Storyboards Wireframes Mockups Prototypes

4. Sketches
Generate and explore ideas.
Rough, used only to document ideas. No art skills necessary.
Thumbnail sketches
Generate several concepts quickly
Screen sketches
Explore content, layout, functionality
Sketches are a UX designer’s fundamental creativity tool.

5. Storyboards made out of hand
sketches
Storyboard
Link sketches of several screens
to explore ideas about how the
interaction will flow.
Storyboards are useful for
creating the flow of the
application.

6. Wireframe
Wireframe
Sizes are almost pixel
perfect.
Can be hand-drawn,
too.
Shows layout,
content, functionality
(interactivity).
No graphic design (no
color, typefaces, etc.).
Wireframes let us
think about usability
first, without the
distraction of graphic
design.

7. Mockup
Wireframe
Layout
Content
Functionality
Interaction
Graphic design
layer
Color scheme
Typography
Mockups help us envision the visual and branding aspects of a product and
communicate them to clients and users.

8. Prototype
Linked together, interactive:
• Sketches, or
• Wireframes, or
• Mockups, or
• Rough code, or
• Made with
prototyping software
(e.g. Axure, Sketch)
Can be digital or paper.
Prototypes help us envision and test
our product before investing in coding.