Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webvisions Barcelona 2014 (Workshop)

markwyner
June 21, 2014

Webvisions Barcelona 2014 (Workshop)

Pulling from 15 years of experimentation and flexibility for teams/projects of various sizes, I will walk you through the components of a solid discovery and production process. My partners and I at Bunker have crafted and refined a process that works for us, our team, and our clients, but there are many ways to piece together a solution that works for you, your team, and your clients. Even if you’re a team of one.
We will learn how to thoroughly understand who we are designing and building for, what we want to provide to them, and what they'll want to accomplish when using the product we’re creating. We’ll look at the steps and tools necessary for building a discovery process that sets a solid foundation for production, and how to reference that foundation throughout a scrum/sprint-like process of development AND design. Bring a pen, a love for whiteboards and sticky notes, and an inquisitive mind ready to dive deep into imagination.

markwyner

June 21, 2014
Tweet

More Decks by markwyner

Other Decks in Design

Transcript

  1. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Hola. El Meu Nom és
    Mark Wyner.

    View Slide

  2. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Goals for Today

    View Slide

  3. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Explorations
    ★ How to think, not what to think
    ★ Asking the right questions to formulate informed decisions
    ★ Sharing our process as a reference
    ★ Apply this knowledge to a process that works for you
    ★ Learning how to fully understand our target audience

    View Slide

  4. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    User-Centered
    Design?

    View Slide

  5. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    User-centered design means understanding what your users
    need, how they think, and how they behave—and
    incorporating that understanding into every aspect of your
    process.
    !
    Jesse James Garrett

    View Slide

  6. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Informed Design?

    View Slide

  7. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Designing with purpose upon a foundation of
    educated decisions
    ★ Conduct research about a product and its audience
    ★ Design to solve problems
    ★ Build prototypes
    ★ Test against product goals and audience needs
    ★ Repeat until goals/needs are satisfied

    View Slide

  8. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    User-Centered and
    Informed Design
    Process?

    View Slide

  9. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    ★ Learn who your audience is
    ★ Learn what needs your audience has
    ★ Create a vision statement that defines these needs

    View Slide

  10. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    We intend to provide our customers with the best online
    shopping experience from beginning to end, with a smart,
    searchable website, easy-to-follow instructions, clear and
    secure payment methods, and fast, quality delivery.

    View Slide

  11. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    ★ Learn who your audience is
    ★ Learn what needs your audience has
    ★ Create a vision statement that defines these needs
    ★ Compare business objectives with audience needs
    ★ Explore/recommend features that satisfy both
    ★ Produce, present, critique, refine: always validating against vision
    statement

    View Slide

  12. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Bunker’s Typical
    Process

    View Slide

  13. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Research
    ★ Ethnographic studies
    ★ Web visitor analytics audits
    ★ Competitive landscape research
    ★ Product audits
    ★ Design research
    ★ Stakeholder interviews
    ★ Usability studies
    ★ Qualitative research

    View Slide

  14. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Conceptualization
    ★ Intensive brainstorming
    ★ Use case scenario identification
    ★ User persona identification
    ★ Sketching/whiteboarding/sketchboarding
    ★ Storyboarding
    ★ Prototyping
    ★ Point-of-view statement collection
    ★ Journey map creation

    View Slide

  15. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Strategy
    ★ Task analysis
    ★ Content modeling
    ★ Gap analysis
    ★ Gantt charting
    ★ Social/marketing strategy

    View Slide

  16. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Experience design
    ★ Moodboard creation
    ★ Visual design compositions
    ★ Wireframe construction
    ★ Interaction flow creation
    ★ Responsive modeling
    ★ Information design
    ★ Usability testing
    ★ Card sorting

    View Slide

  17. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Production
    ★ Interface development
    ★ Server/software development
    ★ Copywriting
    ★ Visual asset creation
    ★ Accessibility/usability/compatibility testing
    ★ Product deployment

    View Slide

  18. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Winning

    View Slide

  19. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    You can please some of the people some of the time, all of
    the people some of the time, and some of the people all of the
    time, but you can never please all of the people all of the time.
    !
    Abraham Lincoln

    View Slide

  20. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    You can please some of the people some of the time, all of
    the people some of the time, and some of the people all of the
    time, but you can never please all of the people all of the time.
    !
    Abraham Lincoln

    View Slide

  21. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Focusing on the “some”
    ★ Break down who the audience is and rank by value
    ★ Prioritize for highest-valued people, do our best everyone else
    ★ Don’t ignore anyone—just prioritize

    View Slide

  22. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Temps de Descans

    View Slide

  23. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Idea Sketching

    View Slide

  24. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Sketch two people in love
    ★ Love is broad, but we’re thinking instinctually
    ★ Every human understands concept
    ★ No restrictions/guidelines
    ★ Just a sketch

    View Slide

  25. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Sketch a log-in screen
    ★ Love sketch focused on idea (free/open)
    ★ UI sketch influenced by details (restrictive/intentional)
    ★ Commonalities: username/email + password + button
    ★ Context: desktop/mobile/other?
    ★ Details: forgot-password/layout/button-style?
    ★ Easy to get caught in design trap
    ★ Being cognizant of that helps free flow of ideas

    View Slide

  26. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Visual Sketching

    View Slide

  27. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Effective visual sketching
    ★ Trying to convey an idea
    ★ Illustration + words as necessary
    ★ Volume over quality—no judging/editing
    ★ Explore many ideas quickly
    ★ Refine idea without loss of valuable time
    ★ Everyone can sketch—aesthetic is irrelevant

    View Slide

  28. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You

    View Slide

  29. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You

    View Slide

  30. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Design a vehicle for commuters
    ★ Personal/mass-transit, resource/human powered, ground/sky
    ★ Sketch more than one idea/concept
    ★ Try variations of a single concept
    ★ No restrictions about technology, feasibility—use imagination
    ★ Any idea is a good idea

    View Slide

  31. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Questions you may not have asked
    ★ Who will use this vehicle?
    ★ What needs to they have that you met?
    ★ What suffrages did you solve for them?
    ★ What challenges did you face?
    ★ Based on who they are—will they be able to use it?
    ★ Based on who they are—will they want to use it?
    ★ Answers help us design with purpose, solve problems, and meet needs

    View Slide

  32. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Make a list of suffrages/needs
    ★ Consider an audience of commuters and their needs
    ★ Consider challenges related to today’s technologies
    ★ Consider environmental impact

    View Slide

  33. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Sketch new ideas with intent
    ★ Remember visual sketching
    ★ Continue to be imaginative/inventive
    ★ Validate against list of challenges/needs

    View Slide

  34. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    What we’re learning
    ★ First attempt was unrestricted—fun, but not practical
    ★ Second attempt with intent—better, but self-influenced
    ★ Audience perspectives were considered with assumptions only

    View Slide

  35. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Understanding Your
    Target Audience

    View Slide

  36. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Create a list of questions for your target
    audience about commuting
    ★ How do they currently commute?
    ★ Is this method economical?
    ★ What times of day do they commute?
    ★ Consider anything related to a daily commute

    View Slide

  37. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Target audience interview—product focused
    ★ Capture name, age, gender, and occupation
    ★ Ask specifically about his/her commute and use of vehicle
    ★ Use your list but allow for moderate deviation
    ★ Explore new questions related to answers
    ★ Let interviewee lead you

    View Slide

  38. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Create a list of questions for your target
    audience about who they are
    ★ Do they have active lifestyles?
    ★ What do they do for a living?
    ★ What do they do for fun?
    ★ Are they social or reclusive?
    ★ Consider questions to influence vehicle features

    View Slide

  39. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Target audience interview—personality
    focused
    ★ Get to know your partner indirectly related to commuting
    ★ Use your list but allow for moderate deviation
    ★ Ask questions related to answers from first interview

    View Slide

  40. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Create a mini persona of your partner

    (target audience)
    ★ Make a list of commuting needs s/he has
    ★ Make a list of his/her personality and lifestyle traits
    ★ Goal is to truly understand who you’re designing for and discover
    characteristics that impact your vehicle

    View Slide

  41. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Informed Visual
    Sketching

    View Slide

  42. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Sketch new ideas that specifically solve
    problems and meet needs
    ★ Remember visual sketching
    ★ Continue to be imaginative/inventive
    ★ Validate against list of challenges/needs

    View Slide

  43. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    What we’re learning
    ★ Early sketches fun and self-influenced
    ★ Audience perspective is solidified with thorough research
    ★ Solving problems and meeting needs
    ★ Ideation: maturing concept into practical solution

    View Slide

  44. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Temps de Descans

    View Slide

  45. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    “How Might We?”

    View Slide

  46. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Quick/effective brainstorming for groups
    ★ Choose your favorite sketch/idea
    ★ Create 10 groups in the room (roughly 6 per group)
    ★ Bring interviews, personas, and selected idea
    ★ Make sure everyone has a sticky pad or two

    View Slide

  47. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Select a concept
    ★ Each person shares his/her high-level idea
    ★ Vote on one concept to work with as a group
    ★ No egos—choose one that seems fun to explore
    ★ If you can’t decide, ask me

    View Slide

  48. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Compile “how might we?” questions
    ★ Person who’s idea was selected is your project owner
    ★ Project owner will share his/her persona
    ★ As a group compile questions to mature idea (examples: How might we
    refuel? How might we save lives?)
    ★ Project owner will document questions
    ★ As a group choose 4 most unique questions and post where everyone
    can see

    View Slide

  49. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Answer questions with visual sketches—
    exploring product features
    ★ Independently answer questions one at a time
    ★ Remember, quantity over quality
    ★ Just enough to convey idea

    View Slide

  50. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Narrow down features
    ★ Place all stickies on wall, grouped by question
    ★ Each person draws stars/hearts on 2 favorite features for each question
    ★ Bring to me: 2 features with most votes for each question, list of “how
    might we?” questions, and selected concept

    View Slide

  51. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Gràcies. Preguntes?
    [email protected]

    View Slide

  52. Mark Wyner, Webvisions Barcelona, 2014
    Crafting a User-Centered and Informed-Design Process That Works for You
    Credits
    ★ Jesse James Garrett quote:

    www.adaptivepath.com/ideas/nine-pillars-of-successful-web-teams
    ★ Stormtroopers:

    movies.uk.msn.com/features/the-empire-strikes-msn-1?page=8
    ★ John Kenn illustrations:

    johnkenn.blogspot.com

    View Slide