Workbook

The Design Thinking Workshop Kit

About the kit

Solve problems
together with
Design Thinking.
Design is changing the world. Putting users and experiences
first is the key to unlocking the potential of any idea, product
or business.

But you don’t need to be a designer to apply the principles of

Design Thinking to the way you work with your team.

This hands-on workshop will give you, or your team, a simple,

inclusive and reusable process using the basic principles of
Design Thinking. It will take you from idea generation, right
the way through to sketching and creating interactive
prototypes.

Now, let’s get started in bringing your ideas to life!

02
 Introduction

In this workshop kit you will:

Understand Design Thinking Design solutions Prototype and test

Learn how to apply the process to any problem Define, empathise and target your end-user so Turn your designs into interactive prototypes
your team or business is facing; whether it’s a new you can ideate solutions with them in mind before (no coding required) and produce a real, testable
product, feature, or marketing campaign. sketching, wireframing or designing screens. solution to a challenge you’ve defined.

03
 Empathise with people
Know the people you're designing for,
so you understand their needs better.

Define a challenge
Decide on who you want to design for
and what you want to help them do.

Ideate possibilities
Come up with different solutions that
might be useful to people - remember
there are no bad ideas!

First up

Prototype your design

What is Design Create a user flow and turn your ideas
into interactive mockups.

Thinking?
Design Thinking is a set of principles that helps you go from an Test your design
idea right the way through to a testable prototype, with the user's Take your prototypes to your audience

needs at the center of every decision. and get feedback.

04
“User-centered design means understanding
what your users need, how they think, and how
they behave – and incorporating that
understanding into every aspect of your
process."

Jesse James Garrett — User Experience Designer

 Before we start: Pens, pencils and erasers

Plenty of paper for sketching

Workshop
checklist A laptop or Android/iOS device

To make sure you won’t lose time during the A Marvel account (sign up free at
workshop, let’s make sure you have the following:
www.marvelapp.com/signup)
 Workshop Agenda

Stage 1: Empathise Stage 4: Prototype

Aim to use 10% of your session time Aim to use 50% of your session time

Stage 2: Define Stage 5: Test

Aim to use 10% of your session time Aim to use 20% of your session time

Stage 3: Ideate Stage 6: Present

Aim to use 10% of your session time It’s now time to share you project!

07
 Let’s get started

Create a team

Your name/team name

Team members

08
 Build the profile of your end-user
and try to see the world through
their eyes

The first stage of Design Thinking helps develop

empathy towards your potential end-user and will be
the guiding light when you move toward
brainstorming solutions.

You’ll be asked to record the basic details of the

person you are designing for, such as:

What is their daily routine?

Where do they live?
What are their goals?
Stage 01

Each answer takes you a step closer to finding the

Empathise with right solution whilst also giving you a deeper
understanding of user needs.
people
Empathy is at the heart of great design. Without it, the
Know the people you are designing for, so solutions you create can never truely solve the
you can understand their needs better. problems of your users.

09
 Define the user you are designing for
The purpose of this profile is to frame all of your ideas and solutions
around the individual that is most likely to use it.

Example

Name

Age

Occupation

Location

Relationship Status

10
 Create the profile of your end-user
Capture the basic details about the person you are designing for and build a
deeper understanding of their personality, wants and needs.

Personality map Likes

Outgoing Shy

Serious Fun
Goals

Generous Selfish

Academic Creative

11
 Map out a typical day
Imagine what your end-user spends their day doing. What do they prioritise? What do they
care about? You can then use this to design something that fits into their daily routine.

Morning Afternoon Evening

7am 1pm 7pm

8am 2pm 8pm

9am 3pm 9pm

10am 4pm 10pm

11am 5pm 11pm

12pm 6pm 12am

12
 Good design solves problems.
What will you solve for your
user?

Using what you learned in the last stage, it's time to

discover a pain point to form a clear challenge that
you can tackle.

It's all about the end-user: Remember this is more

about the people you're trying to help than
technology

Keep it focused: Make sure the problem you are

trying to tackle isn't too broad or vague

Check it against the Empathise stage: Refer back

Stage 02 to the user profile to make sure you're on the right
track.

Define a challenge Once you've established a meaningful problem, you'll

The big, meaty problem you want to solve for be able to brainstorm better solutions around it. Onwards!

your business, customer and end-user.

13
 Choose your challenge
Define the problem you are trying to solve for the end-user and why it’s
going to be important to them. Keep referring back to this as you go.

Example What problem are you trying to solve for your end user?

What problem are you trying to solve for your end user?

Why is this important to them?

Why is this important to them?

14
 Now for the fun part! You know
your user and the problem that
needs to be solved. Let's start to
brainstorm possible solutions.

The goal of ideation is to rapidly create enough simple

and crazy ideas that apply to the problem so you can
have a discussion to pick the best one.

Generate as many ideas as possible

Even the craziest ideas count!
Anchor everything to the user profile and problems
Stage 03 you defined in the previous stages

Ideate Remember to explore each idea with an open mind

and that nothing is off the table!

possibilities Let's get started!

Generate ideas that might be useful

to the end-user.

15
 Simple ideas Crazy Ideas
Practical, straightforward ideas that solve the problem. Sometimes the wild ideas pave the way to amazing solutions.

Example Example

16
 List the user needs and features
This forces you to apply the ideas you created to real user needs. How many solve
the problem your user is facing?

Our target user needs to be able to... Therefore our design needs these features...

Example

17
 Give your idea a name and tagline
Here’s the fun part - what will you call your product, feature or idea?
Create a tagline too!

Name of your product, feature or idea The super-catchy tagline

18
 Bring your ideas to life and create
interactive prototypes, for mobile
or web, using Marvel.

The best way to test ideas with users and start a

conversation is to show them how the solution works.
Prototyping with Marvel is perfect for building your
product ideas at speed and making them tangible.

Design your ideas through sketching on the paper

templates provided or use Marvel to design and
wireframe, then it's a simple few clicks to make
everything interactive.

Stage 04
Just start building, don't get hung up on visuals

Prototype your Don't spend too much time on one idea - move fast!

Design only the screens that matter for testing

design By the end, you’ll have a working prototype that you can
Turn ideas into realistic mockups test on your phone or in a browser.

that you can test.

19
About the platform

Marvel, in a
nutshell...
Marvel is a design and prototyping platform that enables you upload them to your Marvel project and then add hotspots to
to create realistic, interactive mockups of apps, websites and create links between screens. Then, just hit play.
digital products.
If you’re using a computer, our web app can help you
It's super simple to use, you can go from idea to working wireframe, design and prototype for any device including
prototype in a matter of seconds, no design or technical iPhone, Android and browsers from scratch.
experience required.
Head to: https://marvelapp.com/apps on your laptop or
Our apps allow you to take pictures of your sketches and phone to start.

20
 How to use Marvel for desktop prototypes

Create an account Create a project Select your project type

Head over to marvelapp.com/signup and Login to your account and hit ‘Create Project’ in Give your project a name and select the
sign up for a free account the top right corner of the screen device you're designing for

Add your design Link your screens Hit play!

Upload existing files or start from scratch To make your project an interactive prototype, Time to preview your prototype and see whether
by clicking ‘Design’ add hotspots to create links between screens. it looks and flows the way you want it to.

21
 Sketch a flowchart of the user journey
A flowchart is a diagram that of steps your user will take and helps when you start designing

Home screen

Search Jobs Job result page

22
Sketch out your screens

23
Sketch out your screens

24
Sketch out your screens

25
 How to use Marvel for mobile prototypes

Download the app Create a project Add images

Search for Marvel App in your Android or iOS App Sign up for a free account, and then hit the plus To add sketches to your project, add them as
store, and install it on your phone. button on the bottom left of the screen. images by simply clicking the plus button.

Photograph your sketches Link your screens Hit play!

Take pictures of your sketches, crop them as you Add hotspots to create links between screens. Time to preview your prototype! Hit play and
wish and upload to your Marvel project. You can even add transitions, gestures and more! make sure your prototype flows nicely.

26
Sketch a flowchart of the user journey

27
Sketch your app or feature, then take photos using Marvel

28
Sketch your app or feature, then take photos using Marvel

29
Sketch your app or feature, then take photos using Marvel

30
 Test your prototype with your end
user or simply others in the room
The Test stage helps you answer the question, 'how
well does your prototype solve the problem you
initially defined?'

The goal is to observe your user's reactions and

behaviour with the prototype without giving
instructions, then gather feedback that can be used to
iterate and improve the experience.

Remember:

Give them the sales pitch before using the prototype!

Don’t interrupt or try to take over, watch and learn!

Stage 05
Identify where they hit issues or look confused

Test
Test your
your design.
design By the end, you should have a list of suggestions and
next steps to take to improve your solution’s overall
Share your prototype and gain invaluable
experience.
feedback from the people that matter.

31
 Prepare your test
Closed questions: Open questions:
Can be answered by a “yes” or “no” Should drive an answer that is more than a simple one-word reply

32
 Conduct your test

Person you’re testing with

Positives Negatives

33
 How to present using Marvel

Now that you have your finalised solution, it's time to

share it with the rest of your team or any relevant
stakeholder.

Simply open the presentation template slides at

http://bit.ly/designthinkingpresentation , click
“File” > “Make a copy” and fill in the details including
your prototyping link.

Every Marvel prototype has a sharable link which

you can send to any device or screen to present.

Simply click or tap ‘Share’ in Marvel and grab the

link to give to your facilitator to put on the screen.

Stage 06 Use the left and right arrow keys to quickly go

through your designs or click on the hotspots.

Present your work Presenting is easier with Marvel - in the words of IDEO,

Show off your prototype and “If a picture is 1000 words, a prototype is worth 1000
meetings.”
the process you used to create it.

34
 Congratulations!

You've completed your first

workshop using Design Thinking!
What ideas will you bring to life next?
Head to: https://marvelapp.com to keep going!