Build Prototypes

Graphic User Interface (GUI)

When to use it

Use this tool to mock up the user interface and visualize the key features of your design for a technology-based solution.

Get the Innovation Toolkit

Get this tool plus the whole library of 59 tools, detailed instructions, access to fully designed sessions, facilitator guides and participant presentations, all for just $9.99 per month.

Get access

Already have a cohort link? Open it to sign in and download. Buying for a team? See organisation licences.

What’s the purpose

Drawing a simple prototype of the Graphic User Interface for your solution is a useful way to map out the key steps a user needs to accomplish when interacting with your idea.

How to do it

Begin by making a note of the main job you need your user to accomplish when interacting with your design. E.g. “The user needs to be able to sign up to X event through their interaction with the website”.
Write down the steps that will enable the user to accomplish that job. E.g. The user will need to be able to: open the website page; click through to a sign-up page; and enter their contact details.
Using the ‘GUI’ templates, create a visual to accompany the steps you have outlined. E.g. For “Open the website page”, draw what the user would see on the interface for your design, and the main features needed to complete the job. Keep it as simple as possible.
Repeat this process for each step that you outlined until you have a complete set of drawings depicting the user’s journey.
Review the steps you have mapped out. Look for potential problems that may be experienced by the end user and ways their experience might be improved. Make any changes needed to simplify and streamline the user journey.

Helpful tips

Keep it simple and easy to follow – avoid complex designs, which can lead to complicated user experiences!
Consider hierarchy and adjust the weight of elements to create emphasis where necessary.

Using this method in your day-to-day work

As you move into the space of creating solutions to your challenges, if ideas that emerge are tech-based, use the GUI templates to create rough mockups of your idea as you think them through. It can be useful to see your idea in context, and translating your thoughts into visual artefacts can help you to share your thinking with others and quickly identify what will and won’t work.

Learning Lab

The lessons behind this method

The lesson page is open to everyone. Watching the video needs an account.

Want to learn more?

Back to homepage