SlideShare a Scribd company logo
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 
 
 
 

More Related Content

What's hot

Solving Design and Business Problems in 3 Days with Google Design Sprint by B...
Solving Design and Business Problems in 3 Days with Google Design Sprint by B...Solving Design and Business Problems in 3 Days with Google Design Sprint by B...
Solving Design and Business Problems in 3 Days with Google Design Sprint by B...
Borrys Hasian
 
UXUI Shanghai Meetup March 21st
UXUI Shanghai Meetup March 21st UXUI Shanghai Meetup March 21st
UXUI Shanghai Meetup March 21st
Clément LEDORMEUR
 
Rapid Prototyping in UX Design
Rapid Prototyping in UX DesignRapid Prototyping in UX Design
Rapid Prototyping in UX Design
Stephen Denning
 
Ideation + Introduction to Prototyping
Ideation + Introduction to PrototypingIdeation + Introduction to Prototyping
Ideation + Introduction to Prototyping
Pullapproach
 
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
Marc-Oliver Gern
 
Product management and dual track agile
Product management and dual track agileProduct management and dual track agile
Product management and dual track agile
Attila Ulbert
 
Five parallel design sprints. What possibly can go wrong?
Five parallel design sprints. What possibly can go wrong?Five parallel design sprints. What possibly can go wrong?
Five parallel design sprints. What possibly can go wrong?
Den Tserkovnyi
 
UX Design Process & Methods
UX Design Process & MethodsUX Design Process & Methods
UX Design Process & Methods
Baris Erkol
 
Lean UX Workshop
Lean UX WorkshopLean UX Workshop
Lean UX Workshop
ux singapore
 
Design sprint info deck
Design sprint info deckDesign sprint info deck
Design sprint info deck
Daniil Lanovyi
 
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingAPIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
European Innovation Academy
 
Lean UX workshop @ Makers of Barcelona (MOB) + Agile BCN Meetup
Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN MeetupLean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup
Lean UX workshop @ Makers of Barcelona (MOB) + Agile BCN Meetup
Jose Berengueres
 
Product Design Sprint
Product Design SprintProduct Design Sprint
Product Design Sprint
Baris Erkol
 
Google Design Sprint - Case-Study by MAK3it
Google Design Sprint - Case-Study by MAK3itGoogle Design Sprint - Case-Study by MAK3it
Google Design Sprint - Case-Study by MAK3it
Daniel Bartel
 
UX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design MissionUX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design Mission
Marc-Oliver Gern
 
GHA Lean UX presentation
GHA Lean UX presentationGHA Lean UX presentation
GHA Lean UX presentation
Growth Hacking Asia
 
Idea Design Studio
Idea Design StudioIdea Design Studio
Idea Design Studio
Idea Design Studio
 
Insight : Design Sprint - Google Business Group Bandung
Insight : Design Sprint - Google Business Group BandungInsight : Design Sprint - Google Business Group Bandung
Insight : Design Sprint - Google Business Group Bandung
Ngurah Devara Udayana
 
Design Leadership at UXSEA Summit 2018
Design Leadership at UXSEA Summit 2018Design Leadership at UXSEA Summit 2018
Design Leadership at UXSEA Summit 2018
Kuldeep Kulshreshtha
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
Jessi Baker
 

What's hot (20)

Solving Design and Business Problems in 3 Days with Google Design Sprint by B...
Solving Design and Business Problems in 3 Days with Google Design Sprint by B...Solving Design and Business Problems in 3 Days with Google Design Sprint by B...
Solving Design and Business Problems in 3 Days with Google Design Sprint by B...
 
UXUI Shanghai Meetup March 21st
UXUI Shanghai Meetup March 21st UXUI Shanghai Meetup March 21st
UXUI Shanghai Meetup March 21st
 
Rapid Prototyping in UX Design
Rapid Prototyping in UX DesignRapid Prototyping in UX Design
Rapid Prototyping in UX Design
 
Ideation + Introduction to Prototyping
Ideation + Introduction to PrototypingIdeation + Introduction to Prototyping
Ideation + Introduction to Prototyping
 
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
 
Product management and dual track agile
Product management and dual track agileProduct management and dual track agile
Product management and dual track agile
 
Five parallel design sprints. What possibly can go wrong?
Five parallel design sprints. What possibly can go wrong?Five parallel design sprints. What possibly can go wrong?
Five parallel design sprints. What possibly can go wrong?
 
UX Design Process & Methods
UX Design Process & MethodsUX Design Process & Methods
UX Design Process & Methods
 
Lean UX Workshop
Lean UX WorkshopLean UX Workshop
Lean UX Workshop
 
Design sprint info deck
Design sprint info deckDesign sprint info deck
Design sprint info deck
 
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingAPIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
 
Lean UX workshop @ Makers of Barcelona (MOB) + Agile BCN Meetup
Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN MeetupLean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup
Lean UX workshop @ Makers of Barcelona (MOB) + Agile BCN Meetup
 
Product Design Sprint
Product Design SprintProduct Design Sprint
Product Design Sprint
 
Google Design Sprint - Case-Study by MAK3it
Google Design Sprint - Case-Study by MAK3itGoogle Design Sprint - Case-Study by MAK3it
Google Design Sprint - Case-Study by MAK3it
 
UX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design MissionUX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design Mission
 
GHA Lean UX presentation
GHA Lean UX presentationGHA Lean UX presentation
GHA Lean UX presentation
 
Idea Design Studio
Idea Design StudioIdea Design Studio
Idea Design Studio
 
Insight : Design Sprint - Google Business Group Bandung
Insight : Design Sprint - Google Business Group BandungInsight : Design Sprint - Google Business Group Bandung
Insight : Design Sprint - Google Business Group Bandung
 
Design Leadership at UXSEA Summit 2018
Design Leadership at UXSEA Summit 2018Design Leadership at UXSEA Summit 2018
Design Leadership at UXSEA Summit 2018
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
 

Similar to UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha

Design Thinking : Prototyping & Testing
Design Thinking : Prototyping & TestingDesign Thinking : Prototyping & Testing
Design Thinking : Prototyping & Testing
Sankarshan D
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
Marcelo Graciolli
 
Prototyping and Piloting
Prototyping and PilotingPrototyping and Piloting
Prototyping and Piloting
Fung Hoi Si
 
Design Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessDesign Thinking: A Common Sense Process
Design Thinking: A Common Sense Process
Michael Zarro, Ph.D.
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the Ugly
Joshua Randall
 
Prototyping.pptx
Prototyping.pptxPrototyping.pptx
Prototyping.pptx
SohailAkbar14
 
Prototyping and storyboarding.pptx
 Prototyping and storyboarding.pptx Prototyping and storyboarding.pptx
Prototyping and storyboarding.pptx
Lassonde School of Engineering
 
Successful Agile/UX
Successful Agile/UXSuccessful Agile/UX
Successful Agile/UX
Jeremy Kriegel
 
Introduction to Prototyping - Scottish UPA - June 2011
Introduction to Prototyping - Scottish UPA - June 2011Introduction to Prototyping - Scottish UPA - June 2011
Introduction to Prototyping - Scottish UPA - June 2011
Neil Allison
 
Citrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping WorkshopCitrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping Workshop
Reuven Cohen
 
DBA #5 - Design on-the-go: Effective Mobile Prototyping
DBA #5 - Design on-the-go: Effective Mobile PrototypingDBA #5 - Design on-the-go: Effective Mobile Prototyping
DBA #5 - Design on-the-go: Effective Mobile Prototyping
Design Bootcamp Asia
 
EXPERIMENT mixtape
EXPERIMENT mixtapeEXPERIMENT mixtape
EXPERIMENT mixtape
stanforddnext
 
Design Thinking - Types of prototypes
Design Thinking - Types of prototypes Design Thinking - Types of prototypes
Design Thinking - Types of prototypes
SwethaVijay10
 
UXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and DevelopersUXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and Developers
Andrew Mottaz
 
Prototypin.pptx
Prototypin.pptxPrototypin.pptx
Prototypin.pptx
EduardoVazques1
 
2011.08.29 intro prototyping_methodology
2011.08.29 intro prototyping_methodology2011.08.29 intro prototyping_methodology
2011.08.29 intro prototyping_methodology
Industrial Design Center
 
Digital Prototyping Mastery Best Practices & Techniques.
Digital Prototyping Mastery Best Practices & Techniques.Digital Prototyping Mastery Best Practices & Techniques.
Digital Prototyping Mastery Best Practices & Techniques.
Cuneiform Consulting Pvt Ltd.
 
[DevDay2019] Lean UX - By Bryant Castro, Bryant Castro at Wizeline
[DevDay2019] Lean UX - By  Bryant Castro,  Bryant Castro at Wizeline[DevDay2019] Lean UX - By  Bryant Castro,  Bryant Castro at Wizeline
[DevDay2019] Lean UX - By Bryant Castro, Bryant Castro at Wizeline
DevDay.org
 
Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprint
Bruno Mendes
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
Michele Ide-Smith
 

Similar to UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha (20)

Design Thinking : Prototyping & Testing
Design Thinking : Prototyping & TestingDesign Thinking : Prototyping & Testing
Design Thinking : Prototyping & Testing
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
 
Prototyping and Piloting
Prototyping and PilotingPrototyping and Piloting
Prototyping and Piloting
 
Design Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessDesign Thinking: A Common Sense Process
Design Thinking: A Common Sense Process
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the Ugly
 
Prototyping.pptx
Prototyping.pptxPrototyping.pptx
Prototyping.pptx
 
Prototyping and storyboarding.pptx
 Prototyping and storyboarding.pptx Prototyping and storyboarding.pptx
Prototyping and storyboarding.pptx
 
Successful Agile/UX
Successful Agile/UXSuccessful Agile/UX
Successful Agile/UX
 
Introduction to Prototyping - Scottish UPA - June 2011
Introduction to Prototyping - Scottish UPA - June 2011Introduction to Prototyping - Scottish UPA - June 2011
Introduction to Prototyping - Scottish UPA - June 2011
 
Citrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping WorkshopCitrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping Workshop
 
DBA #5 - Design on-the-go: Effective Mobile Prototyping
DBA #5 - Design on-the-go: Effective Mobile PrototypingDBA #5 - Design on-the-go: Effective Mobile Prototyping
DBA #5 - Design on-the-go: Effective Mobile Prototyping
 
EXPERIMENT mixtape
EXPERIMENT mixtapeEXPERIMENT mixtape
EXPERIMENT mixtape
 
Design Thinking - Types of prototypes
Design Thinking - Types of prototypes Design Thinking - Types of prototypes
Design Thinking - Types of prototypes
 
UXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and DevelopersUXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and Developers
 
Prototypin.pptx
Prototypin.pptxPrototypin.pptx
Prototypin.pptx
 
2011.08.29 intro prototyping_methodology
2011.08.29 intro prototyping_methodology2011.08.29 intro prototyping_methodology
2011.08.29 intro prototyping_methodology
 
Digital Prototyping Mastery Best Practices & Techniques.
Digital Prototyping Mastery Best Practices & Techniques.Digital Prototyping Mastery Best Practices & Techniques.
Digital Prototyping Mastery Best Practices & Techniques.
 
[DevDay2019] Lean UX - By Bryant Castro, Bryant Castro at Wizeline
[DevDay2019] Lean UX - By  Bryant Castro,  Bryant Castro at Wizeline[DevDay2019] Lean UX - By  Bryant Castro,  Bryant Castro at Wizeline
[DevDay2019] Lean UX - By Bryant Castro, Bryant Castro at Wizeline
 
Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprint
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
 

Recently uploaded

Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
GOWSIKRAJA PALANISAMY
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
jhonguerrerobarturen
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
Decomart Studio
 

Recently uploaded (20)

Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
 

UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha

  • 1. UXPrototype  How to make it and define the success metrics                      UXiDConference2018  October 4-5th, 2018 With Anton Chandra & Bahni Mahariasha   
  • 2. 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                                                 
  • 3. 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 
  • 4. 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 
  • 5.   Development Lifecycle with prototyping         
  • 6. 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         
  • 7. 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         
  • 8. 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     
  • 9. 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       
  • 10.   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. 
  • 11. 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. 
  • 12.     ● 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.        
  • 13. 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. 
  • 14. 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. 
  • 15. 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                       
  • 16. 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 
  • 17. 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.                     
  • 18. 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/         
  • 19. 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     
  • 20.     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