UXPrototype
How to make it and define the success metrics
UXiDConference2018
October 4-5th, 2018 With Anton Chandra & Bahni Mahariasha

Chapter1:Definitionofprototype
DesignThinking
Design Thinking
Design Thinking is a method designers use in ideation and development, that also has applications elsewhere. The method describes a human-centered,
iterative design process consisting of 5 steps—Empathize, Define, Ideate, Prototype and Test. Design thinking is useful in tackling problems that are
ill-defined or unknown. To Empathize, designers observe users and their behavior in the context of their lives, interact with the users through both
scheduled and short ‘intercept’ encounters, and experience what the user experiences. Defineis when the designers unpack and synthesize the empathy
findings into compelling needs and insights. The goal of Ideation is to explore a wide solution space, from this vast depository of ideas designers can

build prototypes to test with users. Prototypingis getting ideas and explorations out of the head and into the physical world. Testingis the chance to get
feedback on the solutions, refine solutions to make them better, and continue to learn about the users.
What'sexactlyaprototype?
"A prototype is not the actual product that is ready for the prime time and certainly not something the company would try to sell and stand
behind. But it is intended to learn fast and cheap."
Traditionally prototyping is thought of as a way to test functionality. But prototyping is used for many other reasons, including:
● Empathygaining
Prototyping is a tool to deepen your understanding of the design space and your user, even at a pre-solution phase of your project.
● Testing
Create prototypes (and develop the context) to test and refine solutions with users.
● Inspiration
Inspiration: Inspire others (teammates, clients, customers, investors) by showing your vision.
Many of the goals of prototyping are shared across all three of the above categories. We prototype to:
● Learn
If a picture is worth a thousand words, a prototype is worth a thousand pictures.
● Solvedisagreements
Prototyping is a powerful tool that can eliminate ambiguity, assist in ideation, and reduce miscommunication.
● Iteratequicklyandcheaply

Creating quick and dirty prototypes allows you to test a number of ideas without investing a lot of time and money up front.
Development Lifecycle without prototyping

Development Lifecycle with prototyping

Chapter2:Typeofprototypes
As such a transformational step prior to realization of the product, there are lots of different styles, methods, and processes to do it. Ultimately, the
nature of your project and your specific needs will determine the appropriate process and level of fidelity.
There’s no green light that will magically blink when it’s time to start prototyping. How and when to prototype is the subject of much debate in the design
world, and various differing theories and strategies have emerged. As you may probably experienced, the traditional linear process looks something like
this: Sketching → Wireframe → Mockups → Prototyping → Development. However, with the popularization of new ideas such as lean UX and rapid
prototyping, plus the school of thought that wants to get into coding as quickly as possible, this traditional sequential method is becoming outdated.
Below we’ll look at some approaches, and explain their advantages and disadvantages so you can find the best fit.
"There are several types of prototypes, each has different risks and situation."
1. Paper prototype
2. Digital prototype
3. Code Prototype
We will explain more detailed below

PaperPrototype
Paper prototypes come in the form of concept sketches, drawings
or storyboards, which represent the skeleton of your user interface. They
are usually hand-drawn, with UI screen elements cut out of paper and
glued together. You can use paper prototyping to mock up any type of
interface, such as a mobile app, tablet or website screens. This will help
you gather early and essential feedback from users and ensure your
project is on the right track from day one.
Examples of paper prototype
Pros Cons
● Fastest and cheapest
● Least effort
● The most flexible to changes
● Less precise
● Can't present it’s actual experience
● Limits user interact

DigitalPrototype
Unlike paper prototype, the digital prototype tries to mimic the
true form of its actual product. Detailed visual aspects such as color
scheme, typography, images may present. Each UI screens of the product
can be included in it, and it can be placed on the device in which we want
the product want to be released. Most of the time, digital prototypes are
created during the phase where the validation results needed is beyond
concepts and user flow.
Examples of digital prototype with invision
Pros Cons
● Precise and attractive
● More adaptive to change
● Coherent
● Slow and costly

CodedPrototype
At some point, there will be a need for the product team to create a
true-to-life prototype. That said, the prototype is written using a
programming language in which the product will be built upon. Yet
currently there are numerous non-native framework available to create
such thing.
Examples of code prototype with framer.js
Pros Cons
● Lifelike
● Robust
● Extra efforts needed
● Limits creativity
● Any changes will cost you even more

Chapter3:Theessentials
Tipsfromthepros
● Involvealltheteammembersandstakeholders
Showcase in front of the developers, PMs, and any other relevant stakeholders on what kind of user interaction, animation, flows, etc. Each team
might have different opinions, and feedbacks based on their own perspective.
● Avoid"loremipsum"and"JohnDoe"
No placeholder. Use real content, with actual context.
● Ifyou’remakingadigitalorcodeprototyping,makeitrealisticsotheycancompareittothefinalproduction
● Actualusers=lessbiases
To collect genuine feedbacks, only test the prototype to your targeted users. No, it's not anyone from your product team.
Bewareofthesepitfalls
● Divingintothefirstgoodidea
This happened when we as team did some ideation to find out the solution, and we think that this is the good idea and solution. Sometimes, this
very good ideas are not solving the real problem that we want to solve. This can be some issue, let’s say a er put effort, time and energy, it
doesn’t solve your problem.

Create multiple number of ideas and different approach into prototype
● Fallinginlovewithyourprototype
A er you produce ideas and as in the final solution. Avoid on spending time and hours on polishing and iteration creating on the same prototype
(worst more than one prototype) and ideas.
Try to explore and test wide range of ideas first rather than polishing, use fast and cheap prototypes.
● Nopurpose
Figure out what exactly you want to build. Any advanced functionalities or interactions, or changes to workflow and design will warrant
prototyping.
Some question that we might ask to ourselves, “what kind of problem that you want to solve”, “test my assumption of what”, “test of
my solution of what”
● Feelingdownwiththefailedprototype
Reframe the idea of failure in prototype testing into a learning mentality. Remind yourself that wrong ideas and failed prototypes allow you to
learn more than successful tests and prototypes do. Embrace the principles of learn methodology by working validation into every decision that
you make or have a hand in making.
“Failed Faster and success sooner”
When you think of prototypes and tests as learning opportunities, you set yourself up for a kind of positive failure that leads to a new,
more informed experiment.

● Seeingprototypeasawasteoftime
we might spend time when we build prototypes, they actually allow us to move faster in the long term. It’s because, through prototyping, we are
able to see whether our ideas would work out, and be able to refine or tweak them further
● Selectingwrongfidelityforprototype
Successmetrics
Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use
during the design process. In order to examine the usability of a product, there are many important quality attributes to look at. However, on this
particular discussion, we are focusing only on these three:
Effectiveness— can users complete tasks, achieve goals with the product/features, i.e. do what they want to do?
Efficiency— how much effort do users require to do this? (o en measured in time)
Satisfaction— what do users think about the products ease of use?
Most importantly, these aspects give us an opportunity to discover pain points that users face.

Chapter4:Gettingthehandsdirty
Pickyourdreamteamofthree
● 2 Designers
● 1 Researcher
Paperprototyping
Whatyouneedtoprepare
1. A smartphone (connected to the internet).
2. A4 papers.
3. Pencils and erasers.
4. Markers.
5. Sticky notes.
6. Dot stickers.
Agenda
Duration Task Role Remarks
Designer Researcher
02′ Be the user Open Amazon App on your smartphone. Add
Huawei P20 Midnight Black to your wishlist.

05’ UX audit Run a simple UX audit on that particular feature
10′ Ideation: Crazy 8's Crazy 8’s is an ideation method. It’s a fast sketching
exercise that challenges people to sketch 8 ideas in
8 minutes (not 8 variations of one idea or 8 steps of
one idea, but 8 distinct ideas). The goal is to push
beyond your first idea, which is frequently not the
most innovative, and generate a wide variety of
solutions to your challenge. They don’t need to be
perfect or beautiful— they just need to
communicate the idea. As Weird, impossible, and
impractical ideas o en give way to truly inspired
ones. It’s called Crazy 8's for a reason-- go nuts!
05′ SIlent voting: "Working
alone together"
A er you finished the Crazy 8’s exercise, it’s time
for us to hold a round of voting. You’re not
choosing the idea you’re moving forward with yet.
You will have 5 minutes to indicate the 3 most
compelling ideas by voting on the specific sketches
(not the entire paper). It is ok to vote for your own,
it is also ok to put all 3 dots on one idea if you think
that idea is truly the most valuable to pursue.

05′ Break
20’ Prototype! Create the paper
prototype
Write the interview script Designer, it's time for your hands to do the magic!
Transform your ideas into a paper prototype you'll
use to solve the problems. Researcher, help the
designer to keep the UI design right on the track.
Remember the points we've discussed about
success metrics above. But hey, who says the
researcher can't join the design session? Grab your
pen too!
15′ Discussion

DigitalPrototyping
Whatyouneedtoprepare
1. Your paper prototype.
2. Your findings.
3. A smartphone (connected to the internet).
4. A laptop (or more). Yes, it has to be connected to the internet.
Agenda
Duration Task Role Remarks
Designer Researcher
10′
Introduction to Figma Grab your laptop, and let's meet our new friend,
Figma. We will get to know how Figma will help us
design the UI and make our prototype comes to
life.
30′ Prototype! Create the digital
prototype
Write interview script Same thing like what we did on the paper
prototype session. But we are doing it digitally
right now.
05’ Break
20′ Test Designers observing the Researcher leading the Do remember that now you have a more

interview session and
capturing the insights
interview session interactive prototype. Please make sure you
capture users' insights on that area too.
15′ (05' for
each
groups)
Showcase Each group will share and showcase their design
and findings to another group.

References
● Usability101:IntroductiontoUsability:https://www.nngroup.com/articles/usability-101-introduction-to-usability/
● DesignThinking:https://www.interaction-design.org/literature/topics/design-thinking
● DesignThinkingBootcampBootleg:
https://static1.squarespace.com/static/57c6b79629687fde090a0fdd/t/58890239db29d6cc6c3338f7/1485374014340/METHODCARDS-v3-slim.pdf
● INSPIRED:HowtoCreateTechProductsCustomersLove:
https://www.amazon.in/INSPIRED-Create-Tech-Products-Customers-ebook/dp/B077NRB36N
● PrototypinginDesignThinking:HowtoAvoidSixCommonPitfalls:
https://www.interaction-design.org/literature/article/prototyping-in-design-thinking-how-to-avoid-six-common-pitfalls
● Book:The-Ultimate-Guide-to-PrototypingbyUXPIN:https://www.uxpin.com/studio/ebooks/guide-to-prototyping/
● Crazy8's:https://designsprintkit.withgoogle.com/methods/sketch/crazy-8s/
● Crazy8'sVideoTutorial:https://www.youtube.com/watch?v=yz4g87XapQ0
● SilentVoting:https://designsprintkit.withgoogle.com/methods/sketch/crazy-8-sharing-and-voting/
● Paperprototyping:Yourstepbystepguide:https://www.justinmind.com/blog/paper-prototyping-your-step-by-step-guide/
● UXAudit:HeuristicEvaluation:https://en.wikipedia.org/wiki/Heuristic_evaluation/

Abouttheauthors
AntonChandra•Interaction Designer at GO-JEK • +6281910159597 • anton.chdra@gmail.com
Work as UI/UX (product and interaction) for several months in GO-RIDE Product team. Currently focused on Interaction Designer (UI) building
Design Language System (DLS) on IXD Team to create a meaningful ♥design and solve the problem for people that used it. Some of GO-JEK Product
Redesign such as GO-RIDE, CORE Platform (GO-JEK Home Screen), GO-FOOD, GO-POINTS.
Previously work at Suitmedia (agency and IT consultant), and work as UI/UX Designer on mobile division for client’s project such as Nebengers,
YesJob, Mister Aladin, Agung Automall, etc.
Talk&Meetups
● SMK Telkom Bandung “Design in Industry” — 13 Jul 2018
● BNCC x GO-JEK — 23 Aug 2018
● UI/UX Meetup at MNC Innovation Center — 27 Aug 2018
● “Bermain cantik ala UI Designer” GO-JEK x Dribbble — 31 Aug
Workshops/Mentoring
● Internal Design Mentor GO-JEK (switch role from other division into ux)
● Internal GO-JEK Principle App Workshop
● Prototyping - Facilitator at UXiD Conference 2018 (upcoming) — 4-5 Oct 2018

BahniMahariasha• Product Designer at GO-JEK • 087832229711 • bahnimahariasha@gmail.com
Joined GO-JEK in 2017 as a UI/UX Designer, and was working on Core Platform, GO-BILLS, and some product experimentations. Currently being hooked
as a Product Designer on the Driver Platform team, building the new driver app together with the PMs, researchers, engineers, etc. He enjoys initiating
simple experiments to boost users’ satisfaction. Nobody knows a lovely app release note can make the users hit the download button 15x faster, right?
Yes, he and the team did that. For ~800k GO-JEK drivers. Formerly, he was a UI/UX Designer at a local startup named Dattabot, creating digital tools for
data analysts. Prior to that, he was a college kid who built an electronic catalog app that is being used to sell premium products for Samsung Electronics
Indonesia marketing division.
Talks&Meetups:
● Compfest X — 18 Aug 2018
● BNCC x GO-JEK — 23 Aug 2018
● UI/UX Meetup at MNC Innovation Center — 27 Aug 2018
Workshops/mentoring:
● UX 101 and Android Material Design at SMK Madinatul Quran, Bogor — 23-24 July 2016
● Binus SIS Design Challenge — 9 Nov 2017
● UX Design Process for Badan Informasi Geospasial, Bogor — 19 Feb-16 Mar 2018