design Getting Started...User Persona as empathy tool Video link to conducting the contextual...

37
ITI Program Design and Prototyping Workshop Getting Started Step One Make a name tag First name only Draw a simple image that refers to something about you that people might be surprised to know Step Two Download the following Indigo Studio (if you haven’t already) Workshop Materials by entering the following URL into your browser https://itishowcase.rutgers.edu/design -and-prototyping-workshop EXTRA CREDIT Extra credit sign in sheets will be available at the end of the workshop For example, you might be surprised to know that I used to have a talk radio show called TechTalk

Transcript of design Getting Started...User Persona as empathy tool Video link to conducting the contextual...

Page 1: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

ITI Program Design and Prototyping Workshop

Getting StartedStep One

Make a name tag ● First name only● Draw a simple image that refers to

something about you that people might be surprised to know

Step TwoDownload the following● Indigo Studio (if you haven’t already) ● Workshop Materials by entering the following

URL into your browser

https://itishowcase.rutgers.edu/design-and-prototyping-workshop

EXTRA CREDIT

Extra credit sign in sheets will be available at the end of the workshopFor example, you might be surprised to

know that I used to have a talk radio show called TechTalk

Page 2: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Presented by the

Page 3: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design and Prototyping Workshop

October 30, 2018AB 4400

HOW TO DESIGN AND PROTOTYPE USER INTERFACES WITH INDIGO STUDIO

The ITI Program @ SC&I Presents

Page 4: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

AGENDA7:00 - 7:20: Introduction to Design Thinking

• Connie: Design Thinking 101 • Victoria: Design Spec Interpretation / Handouts*

7:20 - 8:00: Learning How to Prototype with a Tool • Victoria: Getting Started with Indigo Studio (Video Installing Indigo Studio & Video

1)*– Video: Building Your First Interactive Interfaces (Video 2 - 7:59)* – Video: Usability Test Exercise (Video 3 - 3:02)*

• Victoria: Completing and Publishing a Simple Prototype (Video 4)*

8:00 – 8:30: Your Turn -- Active Learning• Everybody: Build Your Own Application User Interface in Indigo Studio • Everybody: Share Your Application User Interface Design

*available at https://itishowcase.rutgers.edu/workshop-materials

Page 5: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Draw the process of making toast

Instructions:

Take the next 2 minutes and sketch out your own diagram of the process of making toast

When done, compare your diagram with the other people at your table.

What do you notice?

What are your take aways?

Getting in the Design Frame of Mind

Page 6: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

What is Design Thinking?A way of thinking and doing that takes a creative, iterative and hands on approach to solving problems

Page 7: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design Thinking is … Always about the creative process

and building up ideas• Design Thinking is an

ongoing creative process about ‘building up’ ideas into whole structures

• Unlike critical thinking, which is a process of analysis and is about 'breaking down' ideas into to constitute parts

Page 8: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design Thinking is…Always open to new ideas

There are no judgments in design thinking and thus no fear of failure.

Wild ideas are welcome, these often lead to the most creative solutions.

Page 9: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design Thinking...Always encourages participation

Design thinking calls for maximum input from everybody on the team … everybody participates

Page 10: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design Thinking is…Always linked to an improved future

● Iterate constantly to continuously improve on the organization’s ability to○ react○ adapt○ predict

changes in their ecosystem and environment

Page 11: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

The Design Thinking Methodology Model

Page 12: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design Thinking Phase One - Empathize

● Observe people in context

● Engage in conversation

● Immerse yourself in the person’s everyday life experience

● User Persona as empathy tool

Video link to conducting the contextual interview

What the empathize stage looks like in real world

Page 13: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

What is a User Persona?

● Personas are fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way.

● Creating personas will help you to understand your users' needs, experiences, behaviors and goals.

Source: interaction-design.org

Page 14: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Q: What do you do in Empathize Phase? A: You identify your user and their problem

• Who are you designing for? Who will use this tool in their everyday life?

• Defining the right problem to solve is the most important aspect.

• Ask why 5 times… by the fifth time you will get to the heart of the problem.

Be like a little kid and constantly keep asking why? why? why? why? why? ...

Page 15: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design Thinking Phase Two: Define

● Synthesize ideas from the team; everybody understands who the user is and what problem they need solved. (User experience stories are useful for this.)

● Adopt the point of view of your user. Ask yourself: Why does my user need to do this work? What is causing them pain? Where is the friction in the system? Why are they working the way they are?

● Observation is the key - get out there and watch people use your application.

What the definition stage looks like in the workplace

Page 16: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Q: What do you do in Define Phase? A: You define all the options to solving the problem

● Create and consider lots of options... don’t get locked into going a certain direction too early

● Better answers happen when five people with diverse backgrounds work on a problem for one day, than one person works on a problem for five days

Page 17: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design Thinking Stage 3- Ideate

What the ideate stage looks like in the real world

● Generate new ideas based on your deeper understanding of the user, their needs, and what might be possible

● Explore how the ideas fit together

● Imagine how things could be. Ask yourself - what could this look like?

Page 18: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Q: What do you do in Ideate Phase? A: You nurture ideas and refine direction

Encourages experimentation

- no idea is too far out to be discussed

Views mistakes and failures as a necessary

part of the learning process

Even the strongest of new ideas can be fragile in their

infancy

Page 19: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design Thinking Stage - Prototype

THIS STAGE IS THE FOCUS

OF THIS WORKSHOP

● Make ideas physical○ User interface○ User experience

● Iterative by nature

○ Low - Paper or whiteboard

○ Mid - Interaction flow

○ High - Look and feel

Page 20: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Q: What do you do in Prototyping Phase? A: You choose a direction and get started

● Choose a direction and commit resources

● Get started by developing a low fidelity prototype

– Interaction flow and user experience is most important at this time … not graphical design

● Refine the interaction and use a tool to create a medium fidelity prototype that answers the question: Does this solve the problem?

● If it does answer the questions, create a high-fidelity prototype - one that you can hand off to graphic designers and developers to make beautiful

Page 21: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design Thinking Stage - Test

● Gather feedback from users

● Figure out what they like, dislike, or is missing.

○ What can they do?

○ What can’t they do that they want to do?

Video link to conducting the contextual interview

Page 22: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Q: What do you do in Testing Phase? A: You solicit and incorporate feedback

• Once you have your prototype it’s time to unleash it on the world

• Learn what works and what doesn’t, and then iterate

Page 23: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

THEN ITERATE ...again and again and again ….

● To iterate means going back to your prototype and modifying it based on feedback.

Page 24: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

In theory (but not in this workshop) you would go through these 5 steps in order…

● Empathize – observe, engage, immerse● Define – synthesize, understand, develop point of view● Ideate – generate, explore, flexibility

BEFORE you begin prototyping and testing…

● Prototype - make ideas physical, interactive, rapid● Test - get feedback - fix problems - refine interactions

Summary of design process

Page 25: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Design Thinking is…

Always about applying design to solve life’s problems

Page 26: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

INTRODUCING OUR USER PERSONA FOR THE EVENING

...SARA!

Page 27: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Time to get to work!Victoria will be leading you along the step by step process of using Indigo Studio to build an interactive prototype of an application we are calling RU Chat. We’ll do this in 4 parts:

Getting Started with Indigo Studio - Victoria • Projects, screens, and UI elements

Building Your First Interaction on your own - Video by Victoria• Log in screen, home screen, interaction flow

Testing your Prototype for Usability - Video by Victoria• Giving and receiving comments• go to https://itishowcase.rutgers.edu/workshop-materials and choose “RU Hungry” link to test example app

Completing and Publishing a Simple Prototype - Victoria• Sharing your first interactive prototype

Page 28: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Now it’s active learning time!Here you will receive handouts, pair up into groups, and then practice what you just learned by building additional screens of your own design

• Form into groups of two or three

• As a group, review handouts

• Build additional application screens per instructions on handouts

– OR Build your own screens based on your own ideas!

Page 29: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Be prepared to share! • What did you team come up with? (Let us know and we will

share it with the group)

• What were your major takeaways about the prototyping process?

• How do you plan on using Indigo?

Page 30: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Privacy By Design An urgent consideration

● Developed by Dr. Ann Cavoukian in the 90’s it outlines seven principles for designers, systems engineers, and businesses to consider

● The new EU General Data Protection Regulation (GDPR) includes ‘data protection by design’ and ‘data protection by default’ in its parameters

Dr. Ann Cavoukianphoto: Wikimedia Commons, by Laurelrusswurm

Seven Principles● Proactive not reactive; preventative not remedial● Privacy as the default setting● Privacy embedded into design● Full functionality – positive-sum, not zero-sum● End-to-end security – full lifecycle protection● Visibility and transparency – keep it open● Respect for user privacy – keep it user-centric

Page 31: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Prototyping Software for UX and UI Design

Software Function Pricing

Adobe XD Wireframes, prototypes, screen mockups

$9.99/mos. (as standalone Adobe CC product)

Atomic Wireframes, prototypes, screen mockups

$19/mos.

Axure RP Wireframes, prototypes, screen mockups, other UX flows

$29/mos., free student subscription (1 year)

Balsamiq Wireframes, simple prototypes Plans range from $9-$50/mos., single-user license desktop app $89

Flinto Prototypes $20/mos., 50% student discount

Indigo Studio Wireframes, prototypes, screen mockups, usability testing

$39/mos., free student subscription (1 year)

*Check products website for most recent plan information.

Page 32: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Prototyping Software for UX and UI Design

*Check products website for most recent plan information.

Software Function Pricing

InVision Wireframes, prototypes, screen mockups, add-on features

Plans range from $15-$99/mos.

Proto.io Wireframes, prototypes, screen mockups

$24/mos., 50% student discount

ProtoPie Prototypes $99/yr., 50% student discount

RapidUI Prototypes, code generator Free (3 projects), $39/mos.

UXPin Prototypes, developer handoff features

$23/mos.

Page 33: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

QUESTIONS / COMMENTS?

PLEASE COMPLETE THE EVALUATION FORM

THANKS FOR ATTENDING OUR WORKSHOP

Page 34: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Connie Pascal is a candidate for Ph.D. in Library and Information Science and a part-time lecturer in the Library and Information Department at the School of Communication and Information at Rutgers University in New Brunswick, N.J. She is also the Program Assistant of the Information Technology and Informatics Program. Her doctoral research focuses on knowledge management and the informatics of cannabis. Pascal's dissertation advisor is Claire McInerney. Pascal received her Master’s in Communication and Information Studies from the School of Communication & Information at Rutgers University in 2011.

ConniePascal

[email protected]

Page 35: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Victoria Kulikowski a graduate of the University of Baltimore Master's in Interaction Design & Information Architecture program. After a ten-year career in librarianship, she found her true passion in interface design and user experience, and is enjoying freelance projects ranging from website redesign to prototyping and user testing. Victoria is excited to bring her knowledge of academic theory and real world practice to a new group of beginners in the world of UX

Victoria Kulikowski

[email protected]

Page 36: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

Your evaluation of the workshop on prototyping that you attended are important to us.  Please provide us with your assessment of experience.

Workshop Objectives•Help students understand basic concepts of application user interface design from a user centered design perspective.    •Help students discover how to use prototyping software (Indigo Studio) to visualize their user interface designs •Help students develop collaboration and communication skills around technical design issues

1.Overall Reaction (Circle the number that best represents your overall reaction) 1. I feel I will be able to use what I learned.

(Disagree) 1 2 3 4 5 (Agree)2. The program was presented in an interesting manner.

(Disagree) 1 2 3 4 5 (Agree)3. The program covered the promised objectives.

(Disagree) 1 2 3 4 5 (Agree)4. The program encouraged participation and questions.

(Disagree) 1 2 3 4 5 (Agree)5. The objectives of the workshop as stated above were met.

(Disagree) 1 2 3 4 5 (Agree)

2.Workshop (circle Yes or No)2. Was the workshop well organized? Yes / No3. Were the topics relevant to you? Yes / No4. Was most of the information presented new to you? Yes / No5. Should this workshop be repeated in the future? Yes / No

3.Speaker (circle Yes or No)2. Overall, was format helpful and the speaker(s) prepared and understandable? Yes / No3. Was the material presented understandable? Yes / No4. Were the questions and discussion handled to your satisfaction? Yes / No

4.Taking it with you…(circle Yes or no)2. Did you gain insight into your own thinking and behavior preferences at the workshop? Yes / No3. Were you able to complete or nearly complete an application user interface? Yes / No 4. Overall, was the workshop worthwhile? Yes / No 5. Will you take action(s) on what you learned about designing user interfaces? Yes / No

5.What have you learned that you could put to immediate use?

6.Comments / Feedback?

WORKSHOP EVALUATION

Page 37: design Getting Started...User Persona as empathy tool Video link to conducting the contextual interview What the empathize stage looks like in real world. What is a User Persona? Personas

NOW GO FORTH AND DESIGN

YOUR OWN APPS!