2© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Creative Workshop
Talk
UX Design Process
Hands-on Design
In...
3© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Try the exercises
Use the Cisco design coaches
Relax and ha...
4© 2013-2014 Cisco and/or its affiliates. All rights reserved.
What is it?
Who’s doing it?
When do you do it?
5© 2013-2014 Cisco and/or its affiliates. All rights reserved.
UX Design != Wireframes
It’s the creative process that come...
6© 2013-2014 Cisco and/or its affiliates. All rights reserved.
You are not the user.
7© 2013-2014 Cisco and/or its affiliates. All rights reserved.
8© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Human-centered Design Process
User Research
interviews
obse...
9© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Data
&
Empathy
User Research
10© 2013-2014 Cisco and/or its affiliates. All rights reserved.
User Modeling: Personas
Background
Global healthcare compa...
11© 2013-2014 Cisco and/or its affiliates. All rights reserved.
A scenario is a story told from the user’s point of
view.
...
12© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Scenario example
Francesca is at the Learning Lab in the D...
13© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Requirements
Francesca is at the Learning Lab in the DevNe...
14© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Scenarios != Use Cases
15© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Synthesis: Sketching
Fail often fail fast.
16© 2013-2014 Cisco and/or its affiliates. All rights reserved.
17© 2013-2014 Cisco and/or its affiliates. All rights reserved.
18© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Application: Order ahead of time
Design an application tha...
19© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Form groups
Get into groups of 3-4.
Grab a Cisco designer ...
20© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Practice interviewing (10 min)
Take turns interviewing at ...
21© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Insights about interviewing?
22© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Background
 First item
 Second item
 Third item
Goals a...
23© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Insights about writing personas?
24© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Write scenarios (15 min)
Describe the ideal experience
Wha...
25© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Insights about writing scenarios?
26© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Sketch design ideas (30 min)
Walk through a scenario
Sketc...
27© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Thoughts about sketching
28© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Wrap up
Thanks
31© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Graphic Styles and Lines
Callout Leader Line
Multi-color B...
DevNet UX Creative Design 101 workshop
DevNet UX Creative Design 101 workshop
Upcoming SlideShare
Loading in...5
×

DevNet UX Creative Design 101 workshop

900

Published on

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

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
900
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Who’s in the Audience
    Developers, Designers, Managers, Other

    Who is your user and what are you building for them? (enterprise? Consumer?)

    Who works with Designers?

    When do you start working on user experience design?

    In my experience, most people think of user experience design as wireframes
    Or even what happens after wireframes….make it look nice




  • Wireframes are the design document, like blueprints or cad drawings

    This workshop is about what happens before the wireframes

  • Extrapolation
    You are not the user.

    This is particularly important in our field where it’s easy to think everyone is tech savvy.

    Watching my mom talk to a automated system, and at the very end she said “thank you.”

    Learning about the user, what’s important, and how they accomplish a task
  • Optimize towards a particular user

    A quote generalizes the essence of the person
  • We generate requirements by telling a story.

    Inductive reasoning

    If the story holds, then the design is logical.

    Sherlock Holmes

  • Point of view
    User’s point of view vs omniscient

    Intent
    Describes experience vs system (information flow and state change)

    Plausibility
    Most likely situation vs enumerating all cases
  • Start working out ideas on paper.

    After several rounds of sketching and feedback you get to the wireframes.
  • Why do we need a process?


  • Wireframes are the design document, like blueprints or cad drawing


  • Wireframes are the design document, like blueprints or cad drawings

    This workshop is about what happens before the wireframes
  • DevNet UX Creative Design 101 workshop

    1. 1. 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
    2. 2. 3© 2013-2014 Cisco and/or its affiliates. All rights reserved. Try the exercises Use the Cisco design coaches Relax and have fun Share your mind Ask questions
    3. 3. 4© 2013-2014 Cisco and/or its affiliates. All rights reserved. What is it? Who’s doing it? When do you do it?
    4. 4. 5© 2013-2014 Cisco and/or its affiliates. All rights reserved. UX Design != Wireframes It’s the creative process that comes before wireframes.
    5. 5. 6© 2013-2014 Cisco and/or its affiliates. All rights reserved. You are not the user.
    6. 6. 7© 2013-2014 Cisco and/or its affiliates. All rights reserved.
    7. 7. 8© 2013-2014 Cisco and/or its affiliates. All rights reserved. Human-centered Design Process User Research interviews observation design probes thinking feeling doing knowing User Modeling personas mental models user journeys hypotheses Requirements Definition scenarios narratives storyboards Synthesis scenarios narratives storyboards
    8. 8. 9© 2013-2014 Cisco and/or its affiliates. All rights reserved. Data & Empathy User Research
    9. 9. 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 Motivations N e t w o r k h e a l t h — k e e p t r a f f i c i s f l 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 f i 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?
    10. 10. 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
    11. 11. 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.
    12. 12. 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
    13. 13. 14© 2013-2014 Cisco and/or its affiliates. All rights reserved. Scenarios != Use Cases
    14. 14. 15© 2013-2014 Cisco and/or its affiliates. All rights reserved. Synthesis: Sketching Fail often fail fast.
    15. 15. 16© 2013-2014 Cisco and/or its affiliates. All rights reserved.
    16. 16. 17© 2013-2014 Cisco and/or its affiliates. All rights reserved.
    17. 17. 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).
    18. 18. 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
    19. 19. 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
    20. 20. 21© 2013-2014 Cisco and/or its affiliates. All rights reserved. Insights about interviewing?
    21. 21. 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
    22. 22. 23© 2013-2014 Cisco and/or its affiliates. All rights reserved. Insights about writing personas?
    23. 23. 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
    24. 24. 25© 2013-2014 Cisco and/or its affiliates. All rights reserved. Insights about writing scenarios?
    25. 25. 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
    26. 26. 27© 2013-2014 Cisco and/or its affiliates. All rights reserved. Thoughts about sketching
    27. 27. 28© 2013-2014 Cisco and/or its affiliates. All rights reserved. Wrap up
    28. 28. Thanks
    29. 29. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×