DevNet UX Creative Design 101 workshop
-
Upload
cisco-devnet -
Category
Technology
-
view
880 -
download
1
description
Transcript of DevNet UX Creative Design 101 workshop
![Page 1: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/1.jpg)
![Page 2: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/2.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/3.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/4.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/5.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/6.jpg)
6© 2013-2014 Cisco and/or its affiliates. All rights reserved.
You are not the user.
![Page 7: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/7.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/8.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/9.jpg)
9© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Data
&
Empathy
User Research
![Page 10: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/10.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/11.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/12.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/13.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/14.jpg)
14© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Scenarios != Use Cases
![Page 15: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/15.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/16.jpg)
16© 2013-2014 Cisco and/or its affiliates. All rights reserved.
![Page 17: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/17.jpg)
17© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Design an application
![Page 18: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/18.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/19.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/20.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/21.jpg)
21© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Insights about interviewing?
![Page 22: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/22.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/23.jpg)
23© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Insights about writing personas?
![Page 24: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/24.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/25.jpg)
25© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Insights about writing scenarios?
![Page 26: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/26.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/27.jpg)
27© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Thoughts about sketching
![Page 28: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/28.jpg)
28© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Wrap up
![Page 29: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/29.jpg)
Thanks
![Page 30: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/30.jpg)
![Page 31: DevNet UX Creative Design 101 workshop](https://reader036.fdocuments.net/reader036/viewer/2022062709/55909a371a28ab46378b47b3/html5/thumbnails/31.jpg)
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