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.

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