'

UX Bootcamp Fall 2015 General Assembly

Понравилась презентация – покажи это...





Слайд 0

UXD BOOTCAMP JACKLYN BURGAN, UX RESEARCHER + STRATEGIST


Слайд 1

HELLO ‣ Jacklyn Burgan ‣ UX Researcher + Strategist ‣ @playfulpixel // @LadiesThatUXATL


Слайд 2

UXD BOOTCAMP NOW, YOU! 1 - YOUR NAME 2 - YOUR JOB 3 - WHY YOU’RE HERE


Слайд 3

OVERHAUL


Слайд 4

SLIDES! ‣ Previous UX Bootcamp: http://bit.ly/19i4uvc ‣ Today’s slides:


Слайд 5

WHAT WE’LL COVER TODAY ‣ Introduction to user experience design + usability ‣ Introduction to user experience exercises + outcomes


Слайд 6

HOW WE’LL COVER IT ‣ We are going to build the mobile experience for a grocery shopping app ‣ We’ll cover the basics of: ‣ competitive analysis ‣ user research ‣ wireframing ‣ user testing


Слайд 7

UXD BOOTCAMP USER EXPERIENCE DESIGN + USABILITY


Слайд 8

WHAT IS USER EXPERIENCE DESIGN [UXD]? “User experience design (UXD or UED) is the process of enhancing user satisfaction by improving the usability, ease of use, and pleasure provided in the interaction between the user and the product.” — Wikipedia “The design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal” — Jesse James Garrett, co-founder of Adaptive Path “User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products.” — Nielsen Norman Group


Слайд 9

WHAT IS USABILITY? “Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.” — Nielsen Norman Group “Usability is the ease of use and learnability of a human-made object. The object of use can be a software application, website, book, tool, machine, process, or anything a human interacts with.” — Wikipedia


Слайд 10

UX BOOTCAMP UX PROCESS


Слайд 11

TRADITIONAL UX PROCESS [“WATERFALL”] ‣ Discover ‣ Define ‣ Design ‣ Develop ‣ Deliver


Слайд 12

DISCOVER ‣ Gather information ‣ Brainstorming ‣ Competitive analysis ‣ Define the project scope ‣ UX deliverables: personas + user scenarios


Слайд 13

DEFINE ‣ Developing interaction model ‣ Define the content + functionality requirements ‣ Define information architecture ‣ Create a project plan ‣ UX deliverables: product requirement document


Слайд 14

DESIGN ‣ Create paper prototype / sketches ‣ Usability evaluation ‣ Create wireframes ‣ Visual design explorations ‣ Visual design approval ‣ UX deliverables: sitemap, user flows, wireframes + UI designs


Слайд 15

DEVELOP ‣ Architecture design ‣ UML diagram / class diagram ‣ Daily scrum ‣ Code iteration cycles ‣ Interim installers ‣ Release management ‣ Unit testing ‣ Code refactoring ‣ Documentation ‣ UX deliverables: No key UX deliverables at this stage.


Слайд 16

DELIVER ‣ Use cases ‣ Test cases ‣ Testing ‣ Regression testing ‣ Test reports ‣ Build releases ‣ UX deliverables: usability test report


Слайд 17

DRINK!


Слайд 18

UX SHOULD BE ITERATIVE Discover Deliver Define Develop Design


Слайд 19

LEAN UX PROCESS


Слайд 20

LEAN UX STORY FLOW


Слайд 21

UXD BOOTCAMP THERE’S AN APP FOR THAT.


Слайд 22

COMPETITIVE ANALYSIS Your company Competitor 1 Competitor 2 Overview & profile Competitive advantage Target market Market share Market strategies ‣ Download a competitive analysis template from Client Heartbeat. Competitor 3


Слайд 23

LET’S TALK ABOUT GROCERY APPS ‣ What grocery stores have apps that you’ve seen? ‣ What makes a good/bad grocery shopping experience? ‣ What other activities surround grocery shopping?


Слайд 24


Слайд 25


Слайд 26


Слайд 27


Слайд 28


Слайд 29


Слайд 30


Слайд 31


Слайд 32

UX BOOTCAMP UX RESEARCH


Слайд 33

WHY UNDERSTAND OUR USERS? ‣ So you don’t build a snow machine for an eskimo ‣ Ensures you’re solving a problem that exists in peoples lives ‣ Key to building a product that is tailored to its audience


Слайд 34


Слайд 35

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS? ‣ Why? ‣ Who? ‣ What? ‣ Where? ‣ When? ‣ How?


Слайд 36

UX BOOTCAMP INTERVIEWING USERS


Слайд 37

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS? ‣ Why are they coming to us? ‣ Goals? ‣ What are their needs?


Слайд 38

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS? ‣ Who are our users? ‣ Businesses vs. consumers? ‣ Demographics? ‣ Background knowledge? ‣ Understanding of terminology?


Слайд 39

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS? ‣ When are they visiting? ‣ Morning or evening? ‣ When they’re in a crisis? ‣ Daily? ‣ Monthly?


Слайд 40

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS? ‣ What are their habits? ‣ Do they use social networks? ‣ Content producers or consumers? ‣ What you ask depends on the product


Слайд 41

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS? ‣ How are they accessing? ‣ Desktop or mobile? ‣ Tablet? ‣ Over the phone or in person?


Слайд 42

UX BOOTCAMP HOW TO GET THAT INFORMATION


Слайд 43

HOW DO WE GET THAT INFORMATION? ‣ Research, Observe! ‣ Surveys ‣ User Interviews ‣ Focus Groups ‣ Existing data


Слайд 44

UX RESEARCH: SURVEYS ‣ + Gather large numbers of responses very quickly ‣ + Get quantitative or qualitative feedback immediately ‣ - Hard to get rich responses ‣ - Often learn about problems but not why they occur


Слайд 45

UX RESEARCH: USER INTERVIEWS ‣ + One-on-one discussion ‣ + Can gather rich targeted information ‣ + Flexible; can explore tangents or unexpected areas ‣ - Time consuming to organize, run + analyze


Слайд 46

UX BOOTCAMP HOW TO CONDUCT USER INTERVIEWS


Слайд 47

FINDING PARTICIPANTS ‣ Where to find them: ‣ Coffee shops ‣ Asking your network ‣ Social networks and forums ‣ Craigslist ads


Слайд 48

HOW TO ASK QUESTIONS ‣ Be wary of priming ‣ Don’t ask leading questions ‣ Never ask about intention, always probe behavior ‣ - “How many times do you plan to go to the gym?” ‣ + “How many times have in the last 3 months?”


Слайд 49

FOCUS ON SPECIFIC INSTANCES ‣ + “Have you ever had ________ problem”? ‣ + “Tell about the last time you ....” ‣ Avoid generalizations: ‣ - “What do you usually ...”


Слайд 50

KEEP THEM TALKING ‣ + “Tell me more about that” ‣ + “What do you mean by...” ‣ + “Help me understand better..” ‣ Never put words into their mouth ‣ - “So do you mean...”


Слайд 51

PREPARING AN INTERVIEW ‣ Record interviews if possible ‣ Always ask permission ‣ Explain why + that it’s for private use ‣ Take notes but remain focussed on participant ‣ Focus on topics rather than list of questions ‣ Should be a conversation ‣ If you divert off topic: “That’s really interesting. Can you tell me more about ...”


Слайд 52

TOPIC MAPS + DISCUSSION GUIDES


Слайд 53

TOPIC MAP EXERCISE! - 50 MINUTES ‣ You are going to do a user interview about grocery shopping in order to better understand users’ habits + desires ‣ ‣ Split into groups of 3 ‣ 1 person will interview, 1 will record notes on post it notes, 1 person will be interviewed ‣ ‣ Prepare a topic map covering all subjects you want to know [20m] We will rotate every 10 minutes Be prepared to share!


Слайд 54

BREAK


Слайд 55

UX BOOTCAMP ANALYZING USER RESEARCH


Слайд 56

CAPTURING INSIGHTS ‣ Straight after interview ‣ ‣ Write down or identify the 3 most important insights When reviewing recording/notes ‣ Write out each interesting point on individual post it


Слайд 57

IDENTIFYING TRENDS BY CREATING AFFINITY MAPS ‣ Once you have all of your data, it’s time to analyze ‣ Goal is to extract common trends / themes ‣ Post-Its are your friends


Слайд 58

AFFINITY MAP EXERCISE! - 30 MINUTES ‣ Everyone should have a pile of post it notes ‣ One group will place their notes on the wall + read out the insight ‣ If another group has a similar insight they will place it on top ‣ Repeat until all the post it notes are placed on the wall ‣ Create themes from the grouped insights


Слайд 59

AFFINITY MAP


Слайд 60

UX BOOTCAMP PERSONAS


Слайд 61

PERSONAS ‣ An example, generally fictional, of a person within your user base ‣ Created by conducting user research + summarizing trends into one or more archetypes


Слайд 62

PERSONAS: WHY THEY’RE IMPORTANT ‣ Communication tool ‣ Useful for summarizing what you know about your user ‣ Will help to highlight pain points + opportunities to tailor your product to your user ‣ Keep your product focused on your key users rather than building for the whole world. ‣ [Keep in mind it’s just a framework, not a roadmap]


Слайд 63

PERSONAS: WHAT SHOULD BE INCLUDED ‣ Root it in reality not your imagination ‣ Goals / Needs ‣ Behaviors ‣ Biographical information [name, age, gender, location, income, etc] ‣ Optionally assign it personality traits [again, based on your research]


Слайд 64

PERSONAS: SCENARIOS ‣ Short stories about a person using you product to achieve a goal ‣ Describes what they would do + why they would do it ‣ Independent of interface ‣ Gives the context in which its used


Слайд 65

PERSONAS: EXAMPLE


Слайд 66

PERSONAS: EXAMPLE


Слайд 67

PERSONAS: TEMPLATE


Слайд 68

UX BOOTCAMP PROVISIONAL PERSONAS


Слайд 69

PROVISIONAL PERSONAS ‣ Provisional Personas are personas created without primary research ‣ They can be created through empathy mapping techniques ‣ They need to be validated as soon as possible with real users as part of the build, measure, learn loop


Слайд 70

PROVISIONAL PERSONAS: EMPATHY MAP


Слайд 71

PROVISIONAL PERSONAS: EMPATHY MAP COMPLETED


Слайд 72

What does this person THINK and FEEL? What does this person SEE? What are this person’s NEEDS? What does this person HEAR? What are this person’s CHALLENGES?


Слайд 73

PROVISIONAL PERSONAS EXERCISE! - 30 MINUTES ‣ Treat your table as a team ‣ Draw an empathy map on your table ‣ Scenario: You’re hosting Thanksgiving at your house for 12 people. ‣ Begin filling out your empathy map based on insights from your interviewing exercise and conversations with your team.


Слайд 74

PROVISIONAL PERSONAS: EMPATHY MAP ‣ What does she Think or Feel? [What matters?] ‣ What does she See? [environment, friends, solutions in the market] ‣ What does she Say + Do? [appearance, activities, behaviors] ‣ What does she Hear? [What do friends, boss, colleagues say?] ‣ Challenges [barriers, fears, frustrations, obstacles] ‣ Needs [wants, needs, desires]


Слайд 75

UX BOOTCAMP CHALLENGES WITH PERSONAS


Слайд 76

CHALLENGES OF PERSONAS ‣ They can be artificial / abstract / fictitious ‣ They are a composite sketch of 10 people all rolled into 1 ‣ They don’t have opinions ‣ They can’t talk back, answer questions, or give feedback


Слайд 77

BREAK


Слайд 78

UXD BOOTCAMP INTRODUCTION TO WIREFRAMES


Слайд 79

WHAT IS A WIREFRAME? ‣ Focus on Structure. ‣ Visualize Ideas. ‣ Define Project Scope. ‣ Clarify Hierarchy. ‣ Identify Content Needs. ‣ Promote Discussion. ‣ Reduce Problems Early. http://themetaq.com/articles/wireframe-is-worth-a-thousand-spreadsheets-wireframing-101


Слайд 80

WIREFRAMES ARE FUN FOR EVERYONE! ‣ Designers -> useful to understand patterns and visual hierarchy while creating awesome products. ‣ Developers -> inform the requirements of what they’re building. ‣ Clients -> as a tool to make sure their needs and goals are met. They are a great way to help everyone understand the project goals.


Слайд 81

WHEN TO USE WIRES ‣ EVERY DAY. But specifically, when you’re having trouble agreeing with your stakeholder, when your design is more than two pages deep, etc.


Слайд 82

HOW FLEXIBLE DO WIREFRAMES NEED TO BE? ‣ Once the wireframe has been approved, does the comp need to match pixel perfect? The answer is: IT DEPENDS!


Слайд 83

EXERCISE: INTRO TO WIREFRAMES ‣ Using the reference on the board, sketch what you see on the next screen. ‣ Here’s an example of a wireframe.


Слайд 84


Слайд 85

EXERCISE: DESIGN A GROCERY APP HOME SCREEN - 30 MINUTES ‣ What makes a good/bad grocery app experience? ‣ What elements did people say they liked when you talked to them? ‣ What other activities surround grocery shopping and how can you design for them? ‣ What groups/themes did you identify in your affinity map? ‣ How does a user navigate from the home screen to create a shopping list? ‣ Make sure you conserve space on your desk for a second wireframe!


Слайд 86

EXERCISE: DESIGN THE SHOPPING LIST - 30 MINUTES ‣ How do people interact with shopping lists in the store? ‣ What makes a good/bad grocery app experience? ‣ What elements did people say they liked when you talked to them? ‣ What other activities surround grocery shopping and how can you design for them? ‣ What groups/themes did you identify in your affinity map?


Слайд 87

UX BOOTCAMP LET’S TEST THOSE WIREFRAMES!


Слайд 88

BEGINNING A USER INTERVIEW ‣ Remind participants to be as candid as possible - your feelings won’t be hurt! ‣ Let them know that this is just a prototype so they’ll need to use their imagination ‣ Remind them to think out loud and ask questions ‣ I’ll give you some questions to get started with and you fill in the rest with ideas from your topic map. Ready?


Слайд 89

USER TESTING QUESTIONS ‣ Can you talk to me a little bit about your grocery shopping habits? ‣ Do you ever use mobile apps to help you with grocery shopping? ‣ Walk me through what you see here on this page. ‣ Based on what you see here, how likely are you to use this app? ‣ What, if anything, can be improved on this screen?


Слайд 90

UX BOOTCAMP CONGRATULATIONS! YOU JUST COMPLETED YOUR FIRST UX DESIGN SPRINT!


Слайд 91

UXD BOOTCAMP TOOLS + SOFTWARE


Слайд 92

TOOLS + SOFTWARE: WIREFRAMES + PROTOTYPES ‣ UX Pin ‣ Mockups.me ‣ HotGloo ‣ OmniGraffle ‣ Wireframe.cc ‣ Appery ‣ FlairBuilder ‣ Fluid ‣ Solidify App ‣ Realizer App ‣ Pidoco ‣ Handcraft ‣ Proto.io ‣ Framer JS ‣ Pencil Project ‣ Composite ‣ InVision ‣ Easel ‣ FileSquare ‣ P.O.P. app ‣ Power Mockup ‣ Concept.ly ‣ Axure ‣ Moqups ‣ MockingBird ‣ Paper sketches ‣ Keynote Kung Fu ‣ Mockflow ‣ Flinto ‣ Antetype ‣ iPlotz ‣ Protoskecth ‣ AppSketcher ‣ Balsamiq


Слайд 93

TOOLS + SOFTWARE: RESEARCH + TESTING ‣ Wufoo ‣ SurveyGizmo ‣ Intuition HQ ‣ Jing ‣ TypeForm ‣ SurveyMonkey ‣ Usability Hub ‣ Try my UI ‣ Bagel Hint ‣ WebNotes ‣ UsersThink ‣ Qualtrics ‣ Verify App ‣ LiveChat ‣ Plain Frame ‣ Usabilla ‣ Frelay ‣ Chalkmark ‣ Morae ‣ iPerceptions ‣ Plunk ‣ UX Recorder ‣ Kampyle ‣ SilverBack 2.0 ‣ Google Hangouts ‣ Qualaroo ‣ Delight.io ‣ UserVoice ‣ MagiTest PollDaddy ‣ Webreep ‣ Camtasia ‣


Слайд 94

TOOLS + SOFTWARE: ORGANIZING INFORMATION ‣ Lucid Chart ‣ MindMeister ‣ Coggle.it ‣ Optimal Sort ‣ Concept Codify ‣ WebSort ‣ Simple Card Sort ‣ Xsort


Слайд 95

TOOLS + SOFTWARE: DIAGRAMS + SITEMAPS ‣ Gliffy ‣ Lovely Charts ‣ Creately ‣ Google Drawings ‣ Draw.io


Слайд 96

TOOLS + SOFTWARE: MIND MAPS ‣ Xmind ‣ Mind Node ‣ Mindjet ‣ FreeMind


Слайд 97

TOOLS + SOFTWARE: ANALYTICS + METRICS ‣ Crazy Egg ‣ Tableau ‣ Click Tale ‣ Good Data ‣ Maxymiser ‣ Inspectlet ‣ KISSmetrics ‣ App Annie ‣ FullStory ‣ Mix Panel ‣ Flurry ‣ Google Analytics ‣ Woopra ‣ Quantcast ‣ Lucky Orange ‣ Piwik ‣ Live Person ‣ Clicky ‣ Myna Web ‣ Attention Wizard ‣ HiConversion ‣ Click Density


Слайд 98

UXD BOOTCAMP RESOURCES


Слайд 99

RESOURCES: READING ‣ Hints from the Lazy Bear ‣ UX Booth ‣ 52 Weeks of UX ‣ UX Magazine ‣ UX Apprentice ‣ UX Matters ‣ Usability First Glossary ‣ UX Zeitgeist ‣ UX Beginner ‣ Smashing Magazine ‣ UIE ‣ A List Apart ‣ Transitioning Careers ‣ Medium Collection ‣ Boxes and Arrows


Слайд 100

RESOURCES: BOOKS ‣ Smashing UX Design ‣ Don’t Make Me Think, Revisited ‣ The Elements of User Experience ‣ The User Experience Team of One: A Research and Design Survival Guide ‣ It's Our Research: Getting Stakeholder Buy-in for User Experience Research Projects ‣ Designing Together: The collaboration and conflict management handbook for creative professionals


Слайд 101

RESOURCES: UXERS YOU SHOULD KNOW ‣ Jakob Nielson ‣ Jared Spool ‣ Alan Cooper ‣ Dana Chisnell ‣ Nate Bolt ‣ Peter Morville ‣ Stephen Anderson ‣ Steve Krug ‣ Luke Wroblewski


Слайд 102

RESOURCES: COMPANIES OF NOTE ‣ Nielsen Norman Group ‣ Adaptive Path ‣ IDEO ‣ Smart Design ‣ Frog Design ‣ Cooper Design


Слайд 103

RESOURCES: LOCAL ORGANIZATIONS ‣ Ladies that UX ‣ Atlanta Web Design Group ‣ IXDA ‣ CHI Atlanta


Слайд 104

RESOURCES: CONFERENCES ‣ Lean UX NYC ‣ GIANT ‣ Madison+ UX 2015 ‣ Interaction 16 ‣ SIGCHI ‣ MX2015 ‣ IA Summit ‣ Gel Conference ‣ Enterprise UX ‣ #dareconf


Слайд 105

UXD BOOTCAMP QUESTIONS?


Слайд 106

UXD BOOTCAMP THANKS!


Слайд 107


×

HTML:





Ссылка: