Episode 15

RAPID PAPER PROTOTYPINGUX Workshop June 29th, 2016

Todays focus

IDEATE ASOLUTION

VALIDATEASSUMPTIONS

IDENTIFY OPPORTUNITIES

How we’ll spend our time together• Warm Up Exercise

• Discuss the Problem• Paper Prototyping B R E A K• Usability Testing• Planning Iteration• Showcase• Wrap Up

UX = User Experience

User Experience Design

“Is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.”

– Wikipedia

User Experience Design

“Is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.”

– Wikipedia

Looks a lot like behavioral psychology, cognitive science, ethnographic research … to develop products

UX = User ExperienceUX is not UI

A beautiful UI is part of the User

Experience

UX = User ExperienceUX is not UI

How features should

work?

Poor planning =Dangerous execution

Fixing, redoing, disposing is… expensive...very

What users think, need and expect

USER RESEARCH

We changed the world...

We changed the world...

...and it’s changing us in return

“UX Without User Research Is Not

UX”

UX DESIGN PROCESS

UX DESIGN PROCESS

How can we translate User Feedback into

functional Products?

Rapid PaperPrototyping•Low Cost•Early feedback•Pretty flexible•Correct issues•Save money and

resources!

Usability Testing•Focus on fixing critical

issues detected directly from the users

•What people say and what people do

•Measure behavior, not preferences

How many users to test?Usually 5 users are enough to spot the major issues at the interface level.

Norman Nielsen Group:“This lets you find almost as many usability problems as you'd find using many more test participants.”

Source Article

→ Individually read the problem definition worksheet

→ As a team think what kind of app would solve the problem

→ Together list the amount of sections you’ll prototype on this workshop

EXERCISE #1

Define Sections of Your App

15 MINS

How would it work?TASKFLOW

IDEATION TESTING IMPLEMENTATION

DISCOVERY

EXERCISE #2

Draw Paper Prototypes of Your App

30 MINS→ As a team draw the sections

of your app

→ At least 3 sections

→ Don’t forget the intro screen with a quick fictional logo

→ Plus a splash screen with any logo

VisualPrototypes

IDEATION TESTING IMPLEMENTATION

DISCOVERY

Break time

5 MINS

1. Let the user describe the section you’re showing to him/her

2. Ask the user to perform the main task. “What would you do to share this photo?

3. Ask the user to describe what he expects to happen after the task is completed

4. Always ask why. Don’t sell the app

How to test?

IDEATION TESTING IMPLEMENTATION

DISCOVERY

Examples VIDEO [ Link ]

EXERCISE #3

Define Tasks to Test

5 MINS→ Identify what goals you want

users to achieve on each sections

→ Assign a moderator and note takers

→ Get familiar with the workflow

Define Tasks

IDEATION TESTING IMPLEMENTATION

DISCOVERY

EXERCISE #3

Usability Testing

20 MINS→ Welcome your users

→ Introduce yourself and the team

→ Briefly explain the activity

→ Don’t sell the app

→ Tell them you can’t answer questions for now

List Critical Errors detected

IDEATION TESTING IMPLEMENTATION

DISCOVERY

EXERCISE #2

Iteration of the Prototype

5 MINS→ As a team improve your app

by correcting the issues found

→ You can add, remove, correct, pivote

Show how good you were...1. How does your app work?

2. What issues did you find?

3. What’s your Aha! Moment

IDEATION TESTING IMPLEMENTATION

DISCOVERY

Takeaways1. Watch users in action. Look for patterns and

common issues2. Don’t take the provided feedback as literal3. Don’t attempt to fix all the issues you found, focus

on critical errors first4. Define a design plan for the next iteration.5. Test again, again, and again!!!

Misael LeónUX Design Researchermleon@nearsoft.com misaello

Axel ValdezFront End Designeravaldez@nearsoft.com axel

Muchas Gracias!You’re Awesome!

Revista Software Guru

Our Awesome Blog

Examples VIDEO [ Link ]

Pop App VIDEO [ Link ]

Pop App In

Useful Tools for PrototypingUXPin To make digital wireframesPop App To make paper “apps”InVision To create visual prototypesMoqups To create rapid wireframesBalsamiq To create rapid wireframesUnbounce To create landing pagesProto.io To create rapid wireframesComp CC To create rapid wireframes

Sketch For hi-fi prototypesFluid UI For mobile prototypesAtomic.io To create visual prototypesMacaw For responsive prototypes

Mobile and Tablet Layouts

Get printablelayout here

Get printablelayout here

Download,Print and

Draw

Useful Literature1. Usability Testing Script by Misael2. UX Without User Research3. Usability Testing4. How to Conduct a Usability Testing5. Paper Prototyping as a Usability Testing Technique6. 10 Usability Heuristics7. Universal Methods of Design Book8. UX Week 2015 Conferences Videos9. List of Cognitive Bias10. 10 Usability Heuristics for User Interface Design

11. The Era of Living Services by Fjord

12. Universal Methods of Design (Book)13. The State of UX 2015/201614. UX Checklist Project15. UX Service Design Tools & Techniques16. My Best Advice for Conducting User Interviews17. Guerrilla Research Tactics and Tools18. The Psychologist’s View of UX Design19. A collection of tools, links, events, methods and deliverables from the UX Design universe

1. Usa temas de referencia en lugar de preguntas preguntas seriadas. Ver ejemplo en next slide.

2. Procura tener una conversación amena con tu usuario. No sigas un cuestionario.

3. Puedes hablar sobre cualquier tema que te ayude a entender el problema.4. No pierdas el rumbo, recuerda tu objetivo.5. Haz preguntas abiertas. Las preguntas de “SI/NO” no ayudan mucho.6. No induzcas la respuesta. No juzgues las respuestas.

7. Pregunta siempre ¿Por qué? y luego ¿Por qué? ¿Por qué? ¿Por qué?

8. Escucha. No des tu opinión9. Siente empatía.

How to Interview People?

Problema a explorar: Prevención de ObesidadTemas sugeridos durante entrevista:

Hábitos alimenticios

● Dieta diaria● Comida favorita● Comida menos favorita● Tips de nutrición● Esfuerzos para bajar de

peso● Gusto por la cocina● Quién cocina en casa● Costumbre de comer fuera● Sobre dietas

Ejercicio

● Esfuerzos actuales● Sobre deportes que practica● Sobre el ejercicio que hace● Familia y ejercicio● Amigos y ejercicio● Constancia en el ejercicio● Esfuerzos pasados● Esfuerzo para mantener el

peso

Salud

● Sobre médicos actuales● Sobre nutriólogos● Sobre cultura de ir al

médico en la familia● Sobre casos por los cuales

va al médico● Experiencias que haya

escuchado sobre nutriólogo● Sobre dietas y estilos● Sobre vegetarianos● Sobre comidas saludables

Example of Structured Open Interview

Problem to explore: Saving HabitsSuggested topics during the interview:

About Money & Savings

About Spending About Budgeting

Example of Structured Open Interview

● Reasons to save● Current financial status

overview● Current saving status● Personal attitude towards

money● Thoughts about banks● Savings in the family● About ideal retirement● Extra income plans● Saving management● Plan for future savings

● Decision making about big purchases

● Evaluation of a good purchase

● Attitudes regarding credit● If they perceive themselves

as big or small spenders● Current credit reasons● What concepts drain out

your budget: Food, Rent, Bills, Clothes, Leisure, Gadgets, Travels.

● Budget barriers● Money planification● Planned future purchases● How they track expenses● About cost projections● How they define budget

goals● Managing personal budget

vs family budget● Budget tools they use

Join us! We have +36 open positions!

+info nearsoft.com/join-usjobs@nearsoft.com

JavaRuby on RailsAutomationiOSAndroidNode.js

1835343

Open Positions

Skills