devnet ux creative design 101 workshop

31

Upload: cisco-devnet

Post on 29-Jun-2015

877 views

Category:

Technology


1 download

DESCRIPTION

These slides are from the workshop held at the DevNet Zone at Cisco Live, San Francisco, 2014. Get to grips with what makes a good User Experience. The workshop will include the following, with plenty of hands-on tuition to help you: - warm-up game - write a persona - write 2-3 scenarios - share designs with others

TRANSCRIPT

Page 1: DevNet UX Creative Design 101 workshop
Page 2: DevNet UX Creative Design 101 workshop

2© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Creative Workshop

Talk

UX Design Process

Hands-on Design

Interviewing

Creating Personas

Writing Scenarios

Sketching

Page 3: DevNet UX Creative Design 101 workshop

3© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Ground Rules

Try the exercises

Use the Cisco design coaches

Relax and have fun

Share your mind

Ask questions

Page 4: DevNet UX Creative Design 101 workshop

4© 2013-2014 Cisco and/or its affiliates. All rights reserved.

User Experience DesignWhat is it?

Who’s doing it?When do you do it?

Page 5: DevNet UX Creative Design 101 workshop

5© 2013-2014 Cisco and/or its affiliates. All rights reserved.

UX Design != Wireframes

It’s the creative process that comes before wireframes.

Page 6: DevNet UX Creative Design 101 workshop

6© 2013-2014 Cisco and/or its affiliates. All rights reserved.

You are not the user.

Page 7: DevNet UX Creative Design 101 workshop

7© 2013-2014 Cisco and/or its affiliates. All rights reserved.

You can’t think ‘technical’ and ‘user’ at the same time.

Page 8: DevNet UX Creative Design 101 workshop

8© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Human-centered Design Process

User Researchinterviews

observation

design probes

thinking

feeling

doing

knowing

User Modelingpersonas

mental models

user journeys

hypotheses

Requirements Definitionscenarios

narratives

storyboards

Synthesisscenarios

narratives

storyboards

Page 9: DevNet UX Creative Design 101 workshop

9© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Data

&

Empathy

User Research

Page 10: DevNet UX Creative Design 101 workshop

10© 2013-2014 Cisco and/or its affiliates. All rights reserved.

User Modeling: Personas

Background

Global healthcare company

Network engineer with 10 years experience

Many satellite sites and external partners

Needs and MotivationsN e t w o r k h e a l t h — k e e p t r a ffi c i s fl o w i n g

E n s u r e t h r e a t s a r e r e s o l v e d

G i v e p e o p l e a c c e s s o n l y t o i n f o r m a t i o n t h e y n e e d

K e e p d e v i c e s o f t w a r e a n d fi r m w a r e u p - t o - d a t e

“It’s fine for the security group to manage IPS, but

I’ll never give up control of the firewalls—they’re the

keys to the kingdom.”

Ned Patton

What would Ned

do?

Page 11: DevNet UX Creative Design 101 workshop

11© 2013-2014 Cisco and/or its affiliates. All rights reserved.

A scenario is a story told from the user’s point of view.

It narrates what happens during an ideal user experience to achieve a specific goal.

There is no mention of the technology or interface, i.e., we don’t say how it’s done.

Requirements generation: Scenario

Page 12: DevNet UX Creative Design 101 workshop

12© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Scenario example

Francesca is at the Learning Lab in the DevNet Zone when a colleague calls her over to introduce Jan, a Jabber engineer. They talk collaboration technologies and decide to exchange contact information.

Francesca pulls out her phone and sees the names and photos of people in her network who are close by. “That’s you, right?” she asks Jan, pointing at a photo labeled Jan James. Jan nods, so Francesca selects Jan’s photo. From a choice of communication channels she selects LinkedIn. “You should head for your talk now,” she says. “You’ll get an SMS with a link. Follow it and you’ll get my contact info.”

As Jan heads off, Francesca adds a note to remind her they talked about collaboration technologies.

Later that day she gets an alert that Jan’s contact info has been added to her app.

Page 13: DevNet UX Creative Design 101 workshop

13© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Requirements

Francesca is at the Learning Lab in the DevNet Zone when a colleague calls her over to introduce Jan, a Jabber engineer. They talk collaboration technologies and decide to exchange contact information.

Francesca pulls out her phone and sees the names and photos of people in her network who are close by. “That’s you, right?” she asks Jan, pointing at a photo labeled Jan James. Jan nods, so Francesca selects Jan’s photo. From a choice of communication channels she selects LinkedIn and submits her choice. “You should head for your talk now,” she says. “You’ll get an SMS with a link. Follow it and you’ll get my contact info.”

As Jan heads off, Francesca adds a note to remind her they talked about collaboration technologies.

Later that day she gets an alert that Jan’s contact info has been added to her app.

context

goal

data

input

display & input

input

input

action

sensor data

Page 14: DevNet UX Creative Design 101 workshop

14© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Scenarios != Use Cases

Page 15: DevNet UX Creative Design 101 workshop

15© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Synthesis: Sketching

Fail often fail fast.

Page 16: DevNet UX Creative Design 101 workshop

16© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Page 17: DevNet UX Creative Design 101 workshop

17© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Design an application

Page 18: DevNet UX Creative Design 101 workshop

18© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Application: Order ahead of time

Design an application that enables a group to order food from a restaurant and specify when they will be arriving (pickup or delivery).

Page 19: DevNet UX Creative Design 101 workshop

19© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Form groups

Get into groups of 3-4.

Grab a Cisco designer to work with you

Introduce yourselves

We’ll all go through the process synchronously

Page 20: DevNet UX Creative Design 101 workshop

20© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Practice interviewing (10 min)

Take turns interviewing at least 2 people

• Decide the goal of your interview—what do you want to learn

• Start interview by asking the person about themselves

• Lead them through describing an experience of organizing a group lunch

• Listen

Page 21: DevNet UX Creative Design 101 workshop

21© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Insights about interviewing?

Page 22: DevNet UX Creative Design 101 workshop

22© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Background

First item

Second item

Third item

Goals and Motivations

First item

Second item

Third item

Write 2 personas (15 min)

☺︎ “Quote from your persona”

name

Page 23: DevNet UX Creative Design 101 workshop

23© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Insights about writing personas?

Page 24: DevNet UX Creative Design 101 workshop

24© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Write scenarios (15 min)

Describe the ideal experience

What the user does, sees, etc.

Force yourself to not think about the system

Page 25: DevNet UX Creative Design 101 workshop

25© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Insights about writing scenarios?

Page 26: DevNet UX Creative Design 101 workshop

26© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Sketch design ideas (30 min)

Walk through a scenario

Sketch the flow through screens

Figure out what should go on the screen

What would <persona> want?

Sketch 3 variants

Page 27: DevNet UX Creative Design 101 workshop

27© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Thoughts about sketching

Page 28: DevNet UX Creative Design 101 workshop

28© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Wrap up

Page 29: DevNet UX Creative Design 101 workshop

Thanks

Page 30: DevNet UX Creative Design 101 workshop
Page 31: DevNet UX Creative Design 101 workshop

31© 2013-2014 Cisco and/or its affiliates. All rights reserved.

Graphic Styles and Lines

Callout Leader Line

Multi-color Bar to Divide Content

Solid Gradient Image FillTransparent