Prototyping and designing

This module covers weeks 10 & 11 of the course.

Note that this material is subject to ongoing refinements and updates!

What is a prototype?

A simple, early version of a design that allows your stakeholder to interact with it. Prototypes can be low fidelity (Sketches, storyboards) or high fidelity (close to the final working version).

A couple of ways that prototyping can be done:

Horizontal prototyping (providing a wide range of functions but with little detail)
Vertical prototyping (providing a lot of detail for only a few functions) (2019, p. 433).

Why prototype?

useful when discussing or evaluating ideas with stakeholders...
a communication device among team members...
an effective way for designers to explore design ideas...
encourages reflection in design...
recognized by designers from many disciplines as an important aspect of design...
answer questions and support designers in choosing between alternatives (Sharp et al., 2019, p. 424).

What does a prototype look like?

In interaction design, a prototype can be (among other things):

A series of screen sketches
A storyboard, for example, a cartoon-like series of scenes
A PowerPoint slide show
A video simulating the use of a system
A lump of wood (for instance, the PalmPilot)
A cardboard mock-up
A piece of software with limited functionality written in the target language or in another language (Sharp et al., 2019).

Low fidelity examples

Storyboards (Example from DTU Skylab)
Index cards (Example from its-all-design.com)
Wireframes (Example from usability.gov)

High fidelity prototype

High fidelity prototypes will often be written in the software (or hardware) of the final version, but with more limited functionality.

Conceptual model

An outline of what people can do with a product and what concepts are needed to understand and interact with it.

Considering interaction and interface types:

Which interaction type?
Do different interface types provide insight?

Expanding the initial conceptual model

What functions will the product perform? What functions will the user perform? These days, it’s important to consider what (and whether something) can be automated.
How are the functions related to each other?
What information is needed?

Concrete design

Difference between concept and concrete is emphasis. Concrete design can be hardware, software, or both.

Explore the user’s experience

A few options for visualization, such as:

Design maps
Customer journey maps
Experience maps - often expressed as either a wheel or a timeline.

This resource shows a timeline example of an experience map, and a customer journey map:
Gibbons, S. (2017). UX Mapping Methods Compared: A Cheat Sheet. https://www.nngroup.com/articles/ux-mapping-cheat-sheet/

An example of an experience map wheel:
Jawarlal, A. (2018). User experience wheel of enlightenment. https://uxdesign.cc/self-management-user-experience-wheel-5bcc3898be8

Construction: Physical computing

Build and code prototypes using electronics. These platforms are single-board microcontrollers or (in the case of Raspberry Pi) even whole computers on a small board.

Some common toolkits include:

Designed for use by a wide range of people—not just engineers!

Construction: SDKs (Software Development Kits)

Aimed at developing applications for a particular platform, such as Android or iOS.
Includes: IDE, documentation, drivers, sample code, and application programming interfaces (APIs)
Makes development much easier

Examples:

For this class, we are using HTML/CSS as our development kit due to its simplicity compared to programming!

We will also take a brief look at 3D printing with software such as Tinkercad.