Envisionment: sketches, storyboards, wireframes and wireflows

Envisionment makes ideas visible so they can be discarded cheaply

Envisionment is concerned with making ideas visible and externalising thoughts. It represents design work to ourselves and to others, and it happens throughout development as the designer generates several solutions and whittles them to a final product. Different representations suit different stages and audiences. The lecture’s examples are sketches, storyboards, wireframes and prototypes.

Sketches are quick, timely, inexpensive, disposable and plentiful (credit: Greenberg, Buxton, Carpendale and Marquardt, Sketching User Experiences: The Workbook). They allow quick tests during brainstorming and reduce attachment to a design. Artistic skill is not the point.

The purpose picks the representation

A storyboard is a sequence of actions or events the user and the product go through to reach a goal. It gives a feel for the flow, either as a snapshot of a key moment or as a user journey. To get a journey from a scenario, break the scenario into 3 to 7 steps and draw one scene per step. Label each sketch with one short description. Show the context, meaning the user and the machine are both part of the activity. Keep the level of detail right: relevant aspects visible, not everything drawn. The lecture works this through a travel organiser scenario (Will, Sky and Eamonn gathered around the organiser, Claire at her mother’s house).

A wireframe shows a single screen or interaction page and outlines its structure and layout, helping plan layout and interaction patterns. At lo-fi level it has no graphical design elements such as images, colours or typography (Benyon, 2019, Ch 8.2). A wireflow chains wireframes with flowchart logic to show the pages and actions needed to complete a goal.