HUMAN CENTERED DESIGN | PROTOTYPING

Wire-framing

60 Min

Wire-framing is a form of prototyping that is used specifically for the design of digital products and services. Wireframes are visualisations of web or app screens that users will come across at various points of their journey.

USE CASES

Prototype and test digital product and service experiences.

LIMITATIONS

Wireframes are basic visualisations, that do not offer the full experience that well designed screens may create, while testing, it's important to keep that in mind.

Paper Prototyping | Google Startup

UNDERSTANDING THE TOOL

Wireframes are basic visualisations, basic boxes and text that are used to represent digital screens.
It is rare for designers to build wireframes for each and every step of a service journey, the focus is usually on key screens and interactions. Alternatively, detailed wireframes are often built for one part of the journey. For example, on-boarding screens, learning section, profile pages, etc.
Typically, phone outlines are used to communicate that the screens are meant for an app. Similarly for web screens, a laptop outline can be used.
Screens are connected by drawing lines between them. Lines represent how buttons and links connect screens to each other.
Wireframes are tested with users in the form of paper prints or as interactive prototypes (where buttons actually work). An interactive digital prototype can be created by using basic software like PowerPoint or professional design software like Zeplin or Invision.
Testing of wireframes can be done through two approaches; aided (where designers explain each screen to users) and unaided (no explanations given to user). Teams should use a mix of both.

STEP BY STEP

Outline the key steps: Start by discussing the key stages, user actions and interactions along the experience journey. Refer to the Journey Map and Service Blueprint tools if they have been already developed.
Visualise the touch-points: For each step in the service journey, identify the screens necessary to bring the concept to life, and draw them out. Design different versions of the wireframes if the intent is to do A/B testing.
Connect the screens: Connect the different screens by linking how a button may lead from one screen to another.
Test & Refine: Test wireframes with different users, and record points of improvement.

HOW TO FOR FACILITATORS

At the start: Make sure the team has a clear understanding of the key steps of their service.
During the exercise: Help teams prioritise screens to prototype. Help them create clear wireframes, while not wasting time on adding unnecessary detail. Ensure teams think about screen flows and connections.
At the close: Have participants present the wireframes to another group and refine their screens based on the feedback. If they are taking wireframes to users for testing, help them prepare for the test. Once the testing is over, discuss learnings and refinement.

FACILITATORS QUESTION BANK

Are you going to be building wireframes for the entire journey? Or a select part of the journey?
Are you making screens for an application or for a website?
Are the wireframes simple enough to understand? Do you want to add descriptions under each screen?
How are the screens you have created connected to each other?
How do you plan to test the screens? Who will you test them with?

The FinLab Toolkit