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

Webvisions Barcelona 2014 (Workshop)

Df190eba07c8a3b7a4611908fb7732c5?s=47 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.

Df190eba07c8a3b7a4611908fb7732c5?s=128

markwyner

June 21, 2014
Tweet

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.
  2. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

    Process That Works for You Goals for Today
  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
  4. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

    Process That Works for You User-Centered Design?
  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 “
  6. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

    Process That Works for You Informed Design?
  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
  8. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

    Process That Works for You User-Centered and Informed Design Process?
  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
  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. “
  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
  12. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

    Process That Works for You Bunker’s Typical Process
  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
  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
  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
  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
  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
  18. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

    Process That Works for You Winning
  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 “
  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 “
  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
  22. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

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

    Process That Works for You Idea Sketching
  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
  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
  26. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

    Process That Works for You Visual Sketching
  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
  28. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

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

    Process That Works for You
  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
  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
  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
  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
  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
  35. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

    Process That Works for You Understanding Your Target Audience
  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
  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
  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
  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
  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
  41. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

    Process That Works for You Informed Visual Sketching
  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
  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
  44. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

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

    Process That Works for You “How Might We?”
  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
  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
  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
  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
  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
  51. Mark Wyner, Webvisions Barcelona, 2014 Crafting a User-Centered and Informed-Design

    Process That Works for You Gràcies. Preguntes? mark@wearebunker.com
  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