DT Project Guide - Chapter 12 - Wireframing & Prototyping
DT Project Guide - Chapter 12 - Wireframing & Prototyping
All rights reserved. No part of this publication may be reproduced transmitted or stored in a
retrieval system, in any form or by any means without permission of the authors.
Publisher
Ashesi University
1 University Drive
Berekuso, Eastern Region, Ghana
PMB CT3, Cantonments, Accra
Authors’ Contact
gadomdza@[Link] or +233547047047
Cover Design
Jay-Ford Company
Adomdza, Gordon
Design thinking, project guide: the whys and the hows / Gordon Adomdza &
This project guide is dedicated to all the pioneering students, teaching assistants and faculty of the
Foundations of Design and Entrepreneurship class, which provided opportunities to contextualize the
content for the book
Acknowledgements
Special acknowledgement goes to the following faculty who provided useful comments, insights,
illustrations etc. that helped improve on the original manuscript.
Table of Contents
Chapter 1: Problem Festival 2
Chapter 2: Innovation 14
Chapter 3: Creativity 32
Chapter 4: Chasing Mysteries 47
Chapter 5: Intro to Design Thinking 60
Chapter 6: Reframing 67
Chapter 7: Ethnography 73
Chapter 8: Lean Research 85
Chapter 9: Analysis Frameworks 95
Chapter 10: Ideation Techniques 127
Chapter 11: User Requirements, Value Fulfillment Blueprint and Dark Pattern Design
140
Chapter 12: Wireframing and Prototyping 156
Chapter 13: Business Model Canvas and Minimum Viable Product 165
References 194
156
Introduction Prototype
“Thinking by doing” helps in deriving more Design Thinking Bootcamp Bootleg Toolkit
value from research, ideation, testing lists bias towards action as one of the
among others (Dam & Siang, 2019). essential mindsets for Design Thinking.
“Design thinking is a misnomer; it is more
Purposes of prototypes: about doing than thinking. Bias toward
doing and making over-thinking and
● Exploring and Experimentation meeting.”– d. school
Prototypes can be used to explore
problems, ideas, and opportunities within a With design thinking, you cannot over
specific area of focus and test out the analyze or over think the problem because
impact of little and progressive or radical it requires that you investigate each
changes (Dam & Siang, 2019). assumption through active testing, instead
● Inspiring and Motivating of theoretically thinking it through.
Prototypes help you to sell new ideas, Controlled experiments help to prove or
motivate internal or external stakeholders disprove your assumptions (Dam & Siang,
to buy-in or agree with your idea, or inspire 2019).
markets toward radical new ways of
thinking and doing (Dam & Siang, 2019). Creative Serendipity
● Engaging, Testing, and Experiencing In their book Creative Confidence, David
You can use prototypes to engage with end- and Tom Kelley, founders of international
users or stakeholders, in a manner that design firm IDEO discuss the importance of
opens you up to deeper revelations, insights cultivating creative serendipity. They
and more valuable experiences, to inform encourage the adoption of approaches that
design decisions going forward (Dam & help create an epiphany-friendly
Siang, 2019). environment within oneself. What happens
● Learning and Understanding is this: when you deeply immerse yourself
Prototypes can help you better understand within your subject of interest, you open up
the complexities of a problem, product, or opportunities for happy accidents. The
system by physically engaging with them Kelleys bring out instances of people who
and identifying what makes them work or made breakthroughs not by thinking
fail (Dam & Siang, 2019). through solutions but by trying things and
figuring them out. One of the best ways to
learn about the positive and negative
How Prototyping Works
dynamics of your solution is to take physical
Bias Towards Action action, by experimenting with and exploring
components of the potential solutions.
Prototyping helps you bring your ideas into
159
a tangible plane, which will help you and the form of sketches on a napkin, role-
your team to see and discuss the playing or anything that allows turning your
advantages and disadvantages, to learn ideas into tangible and testable (Dam &
from users’ feedback, and to create Siang, 2019).
opportunities for creative serendipity
(Kelley & Kelley, 2013). Types of Prototyping
There are basically two types of
Learning by Doing
prototyping.
According to Dam & Siang (2019), Design
Thinking allows you to explore unknown
Low Fidelity Prototyping
possibilities and uncover unknown insights.
As a result, design thinking emphasizes the This involves using an incomplete model of
importance of learning using activities that the final product with just a few features
increase the learning potential of the team. that will be found in the final product. It
It will help you boost action-oriented may be made out of materials not intended
learning by experimenting and exploring for the finished product like wood or paper.
the proposed solutions in order to Examples of low fidelity prototypes are
understand what problems may exist with storyboarding, Sketching, card sorting, and
the assumptions behind those solutions. As wizard of Oz. Low fidelity prototyping has
such, your team can iterate rapidly, the following advantages
modifying your test models and moving you ● It is easy to make.
closer and closer to the goal. ● It is inexpensive.
● Enables the designer to get an
The Take-Away overall view of the product using minimal
time and effort.
Sometimes we forget to establish a
● Users find it easier to interact with a
connection between our ideas and the user
low fidelity prototype.
and only focus on brainstorming, planning
and implementing our ideas. We then
Disadvantage
realize that the assumptions upon which we
Since Low fidelity prototyping lacks more
based our solutions might have been
features of the final product, it may not
wrong. This leads to significant wastes of
properly inform the designer (Dam & Siang,
time and resources. Prototyping helps
2019).
prevent this. Prototyping quickly, and
frequently, is the best way to test your
High Fidelity Prototyping
assumptions, learn about users, and
improve on your ideas. Prototypes can be in High fidelity prototyping involves using a
prototype that has most of the features and
160
functionality of the final product. It allows Do not place too much value on your
users to interact with the prototype in a prototype so that it becomes difficult to
similar way they will interact with the final change its features or discard it when
model. An example of a high-fidelity necessary. Remember it is just a prototype
prototype could be creating a 3D model of a and not a final version of the product. It is
car (Dam & Siang, 2019). subject to changes and even thrashing. To
High fidelity prototyping is advantageous in avoid this, it will be better to start with
that cheap and fast prototypes. Preferably low
● It is engaging because users can fidelity prototypes. This reduces the
have a feel of exactly what the final product chances of you putting a lot of value on the
will look like, and the designer will be able prototype.
to judge how well it meets the wants,
needs, and expectations of the user. Avoid wasting time on pitching your
● It also allows the designer to get prototype
feedback with a high level of validity and Avoid explaining a lot when presenting your
applicability. prototype. If you have to explain a lot of
High fidelity prototyping is disadvantageous things about your prototype, your user will
in that not be interacting well with the product
● because you will be interrupting their
It is expensive to create.
interaction. As a result, you will not be able
● Coming up with a high-fidelity
to get the insights that you had to get from
prototype is time-consuming (Dam & Siang,
the user's interaction with the prototype. If
2019).
you find out that you have a lot of
explaining to do about your prototype, then
What to Avoid During Prototyping? that should already tell you that the
Avoid diving into the first promising idea prototype has issues. Have a bias towards
you come up with during prototyping. action, instead of telling them what to do,
Test many options within your idea, do not create a prototype that allows them to do
throw away any ideas until you have tested what they want to do.
them. This gives you room and inspiration
to create more ideas or merge a few Avoid Prototyping without a purpose
solutions into a better and more successful Even though the overall objective of
one, by testing alternative ideas and making prototyping is to test the viability of a
quick and dirty prototypes. product when it is important to ask yourself
“Why am I creating this prototype” during
Avoid getting too attached to your prototyping. Have a purpose. It may be to
prototype. test an assumption, test the usability of
161
your product or some other purpose. the process because it gives you the
Having a purpose for your prototype opportunity to see exactly what your final
informs you about what kind of prototype product will look like. If you cannot build
you will be making. your prototype on your own, you may seek
professional help to do it. Remember it is
Stages of Prototyping okay to make mistakes and correct them
along the way.
Now that you are all warmed up to build
your prototype, find below some steps you
can follow to help you come up with a good
Remote Prototyping
prototype This refers to creating prototypes by teams
who are in different locations and are not
Create a sketch of your concept on paper able to meet physically. Working remotely
Sometimes, you may get amazing ideas but has become the new norm because of the
because you failed to write them down, you COVID19 pandemic. Team members who
realize that you later forget what you had in are in their respective homes because of
mind or maybe you will not be able to situations like COVID19 can prototype by
remember all about it at a later date. It is following the steps below.
therefore important to visualize your ideas ● After coming up with the idea for
on paper. It gives you room to put down as your prototype. Discuss and assign among
many ideas as you want and at a faster team members who will be responsible for
pace. building the various parts of the prototype.
● Each team member should
Develop a virtual prototype physically build the assigned part of the
Now that you have your paper prototype, prototype and take pictures to share with
transfer and create a digital sketch of the the group.
same concept. A digital representation of ● Photoshop all the images of the
your prototype makes it look more real and
different parts of the prototype together to
makes it easier for you to have a better
create a complete design. Use platforms
view of what the final prototype will look
like; online collaborative tools like Google
like. You could do this by sketching your
Slides, Mural and Miro, design online tools
prototype on the computer or creating a 3D
like SolidWorks and AutoCAD and also,
print of it.
remote applications like TensorFlow for
JavaScript using Lego Mindstorms and
Build a physical prototype
TechViz. These platforms can both be used
Now you are ready to build your physical
on laptops and mobile phones if given
prototype. This is the most exciting part of
162
access to the camera, accelerometer and ● If you want to easily make changes
other sensors. to your wireframe, then it is advisable to
draw it with paper and a pencil, or at a
whiteboard. This helps you to make early
adjustments after feedback is given.
WIREFRAMES ● Paper-prototypes can help you test
with end-users at every stage of ideation
Similarly, to a prototype, a wireframe is a
and design because it is easier and cheaper
low-fidelity, simplified outline of your
to make changes at this stage than changes
product stripped of any visual design or
whose necessity is first discovered after
branding features.
coding is underway.
● After using paper wireframes,
The three main Purposes of progressing to software wireframes enables
Wireframes you to keep track of more detailed actions
● Presents the information that will be (Allabarton, 2019).
expected on the page
● Gives an outline of the structure and Deciding on your Wireframe Process
layout of the page Different UX designers approach the task of
● Conveys overall direction and wireframing in different ways. Some use
description of the user interface online apps or tools while others draw by
(Fanguy,2018). hand. Most times, the decision to either use
hand or online apps and tools depends on
Examples of Wireframes requirements of a particular approach and
not the UX designer’s individual preference
It will be helpful to look at some examples
(Allabarton, 2019).
of wireframes before you start designing
your own wireframe. This will give you
Below are steps different designers
some inspiration for your own wireframes
structure the wireframing process from
and also open you up to a variety of ways of
design to implementation (Allabarton,
creating them. Some people draw their
2019):
wireframes by hand, others feel more
comfortable using software like
1. Wireframe - Interactive Prototype -
InvisionApp, or Balsamiq. You should
Visual – Design
choose whichever works for you. However,
2. Sketch – Code
keep the following in mind when deciding
3. Sketch - Wireframe - Hi-Def
on your wireframe creation process
Wireframe - Visual – Code
(Allabarton, 2019):
163
REFERENCES
Allabarton, R. (2019). The Definitive Guide: How To Create Your First Wireframe. Retrieved 5
September 2020, from [Link]
wireframe/
Artwork Archive. (2019). 7 Fun Exercises to Quickly Improve Creative Thinking. Retrieved from
[Link]
thinking
Ashesi University (2019). New Entrepreneurs Xchange for Transformation: Idea to Impact
project. Retrieved from [Link]
[Link]
Ayres, C. (2019). 16 Advantages and Disadvantages of Experimental Research. Retrieved from
[Link]
Bank, C. (2014). 15 Ways to Test Your Minimum Viable Product. Retrieved 11 October 2020,
from [Link]
Barry, C. (2019). Retrieved from [Link]
[Link]/groups/k12/wiki/c0be1/[Link]
Berns, G. (2008). Neuroscience Sheds New Light on Creativity. Retrieved from
[Link]
Berns, G (2010). Iconoclast: A Neuroscientist Reveals How to Think Differently by. Harvard
Berns, G. (2008). Neuroscience Sheds New Light on Creativity. Retrieved from
[Link]
Business ReviewPress; First Trade Paper Edition edition
Blaikie, N. (2003). Analyzing Quantitative Data. SAGE publications Ltd. BridgeInnovate. (2019).
Framing the challenge. Retrieved from
[Link]
Blank, S., 2005. The Four Steps To The Epiphany.
Bitner, M., Ostrom, A., & Morgan, F. (2008). Service Blueprinting: A Practical Technique for
Service Innovation | Request PDF. Retrieved, from
[Link]
nique_for_Service_Innovation
Cieplinska, A. (2019). 5 Common UX Dark Patterns — Interfaces Designed To Trick You!.
Retrieved from
[Link]
interfaces-designed-to-trick-you-61fdede9718c
Coley Consulting (2019). User Requirements- three areas to include and one to avoid. (2019).
Retrieved from [Link]
Christensen, C., Cook, S. and Hall, T., 2016. What Customers Want from Your Products. [online]
HBS Working Knowledge. Available at: <[Link]
want-from-your-products>
196
[Link]
Hannah, J. (2019). What's The Difference Between A Wireframe, A Prototype, And A Mockup?.
Retrieved 6 September 2020, from [Link]
design/difference-between-wireframes-prototypes-mockups/
Hooks, I. (1993). Writing Good Requirements. Retrieved from
[Link]
Hucki, Z. (2017). Beyond the data: five important lessons we can learn from Hans Rosling. The
Conversation. Retrieved from [Link]
important-lessons-we-can-learn-from-hans-rosling-72810
Kelley, T., & Kelley, D. (2018). A Prototype Is Worth 1000 Meetings. Retrieved 4 September
2020, from [Link]
Kelley, T., & Kelley, D. (2013). Retrieved 5 September 2020, from
[Link]
Within/dp/038534936X
Kihn, M. (2005). “Outside the Box”: The Inside Story. Retrieved from
[Link]
Lavrakas, P. (2008). Diary. Retrieved from [Link]
Saleh, N. (2019). 10 Medical Reversals: When the Research Was Wrong. [online] Psychology
Today. Available at: [Link]
district/201907/10-medical-reversals-when-the-research-was-wrong
Liedtka, J., & Ogilvie, T. (2011). Designing for growth. New York: Columbia Business School Pub.
Madsen, S., & Madsen, S. (2019). How to Prioritize with the MoSCoW Technique -
[Link]. Retrieved, from
[Link]
Lohr, S. (2015). IBM’s design-centered Strategy to Set Free the Squares. Retrieved from
[Link]
[Link]
198
[Link]