Webvisions Portland 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 Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Hello, My Name is Mark Wyner
2. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Goals for Today
3. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Explore options for: ★ How to think, not what to think ★ Asking the right questions to formulate informed decisions ★ Share our process as a reference ★ Crafting a user-centered process that works for you ★ Working through activities to learn how to fully understand our target audience
4. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You User-Centered Design?
5. Mark Wyner, Webvisions Portland, 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 Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Informed Design?
7. Mark Wyner, Webvisions Portland, 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 with purpose ★ Build prototypes ★ Test against product goals and audience needs ★ Repeat until goals/needs are satisfied
8. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You User-Centered and Informed Design Process?
9. Mark Wyner, Webvisions Portland, 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 Portland, 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 Portland, 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 Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Bunker’s Typical Process
13. Mark Wyner, Webvisions Portland, 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 Portland, 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 Portland, 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 Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Experience design ★ Moodboard creation ★ Visual design comp production ★ Wireframe construction ★ Interaction flow creation ★ Responsive modeling ★ Information design ★ Usability testing ★ Card sorting
17. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Production ★ Interface development ★ Server/software development ★ Copywriting ★ Visual asset creation ★ Accessibility testing ★ Usability testing ★ Compatibility testing ★ Product deployment
18. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Winning
19. Mark Wyner, Webvisions Portland, 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 Portland, 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 Portland, 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 Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Idea Sketching
23. Mark Wyner, Webvisions Portland, 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
24. Mark Wyner, Webvisions Portland, 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
25. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Visual Sketching
26. Mark Wyner, Webvisions Portland, 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 ★ Rapid pace—no judging/editing ★ Volume over quality ★ Explore many ideas quickly ★ Refine idea without loss of valuable time ★ Everyone can sketch—aesthetic is irrelevant
27. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You
28. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You
29. Mark Wyner, Webvisions Portland, 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 ★ Variations of a single concept is okay ★ Full vehicles and/or components ★ No restrictions about technology, feasibility—use imagination ★ Any idea is a good idea
30. Mark Wyner, Webvisions Portland, 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 problems 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? ★ Need answers to design with purpose ★ We’re generally hired to solve problems and meet needs
31. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Make a list of problems/needs ★ Consider an audience of commuters and their needs ★ Consider challenges related to today’s technologies ★ Consider environmental impact
32. Mark Wyner, Webvisions Portland, 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
33. Mark Wyner, Webvisions Portland, 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 considered with assumptions only
34. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Understanding Your Target Audience
35. Mark Wyner, Webvisions Portland, 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
36. Mark Wyner, Webvisions Portland, 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
37. Mark Wyner, Webvisions Portland, 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
38. Mark Wyner, Webvisions Portland, 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
39. Mark Wyner, Webvisions Portland, 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
40. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Informed Visual Sketching
41. Mark Wyner, Webvisions Portland, 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
42. Mark Wyner, Webvisions Portland, 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
43. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You “How Might We?”
44. Mark Wyner, Webvisions Portland, 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
45. Mark Wyner, Webvisions Portland, 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
46. Mark Wyner, Webvisions Portland, 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 (example: How might we refuel?) ★ Project owner will notate questions ★ As a group choose 5 most unique questions and post where everyone can see
47. Mark Wyner, Webvisions Portland, 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
48. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Answer questions with visual sketches ★ Independently answer questions one at a time ★ Remember, quantity over quality ★ Just enough to convey idea
49. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Narrow down features ★ Place all stickies on table, grouped by question ★ Each person draws dots/stars/hearts on 2 favorite features for each question ★ Collect 2 features with most votes for each question, list of “how might we?” questions, selected concept, bring to me
50. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You User-Centered Feature Mapping
51. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Needs + frame of mind = features ★ Alternative to “how might we?” ★ Helps client/stakeholders get into mindset of and feel empathy for target audience—user-centered design ★ Needs: user-centered tasks/goals ★ Frame of mind: user-centered mindset/attitudes/beliefs (first- person questions ★ Features: user-centered solutions
52. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Map the features ★ Project owner will explain concept ★ Compile frame-of-mind statements ★ Compile features that meet needs and frame-of-mind statements ★ “How might we?” features vs mapped features
53. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You What we’re learning ★ Group brainstorming yields many great ideas ★ Visual sketching helps us formulate thoughts ★ Different ways to learn about target audience
54. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Questions about what we did here today?
55. Mark Wyner, Webvisions Portland, 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
56. Mark Wyner, Webvisions Portland, 2014 Crafting a User-Centered and Informed-Design Process That Works for You Thank You
    mark@wearebunker.com