ux bootcamp fall 2015 general assembly

107
UXD BOOTCAMP JACKLYN BURGAN, UX RESEARCHER + STRATEGIST

Upload: jacklyn-burgan

Post on 15-Apr-2017

1.751 views

Category:

Design


6 download

TRANSCRIPT

Page 1: UX Bootcamp Fall 2015 General Assembly

UXD BOOTCAMPJACKLYN BURGAN, UX RESEARCHER + STRATEGIST

Page 2: UX Bootcamp Fall 2015 General Assembly

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

HELLO

Page 3: UX Bootcamp Fall 2015 General Assembly

NOW, YOU!UXD BOOTCAMP

1 - YOUR NAME2 - YOUR JOB3 - WHY YOU’RE HERE

Page 4: UX Bootcamp Fall 2015 General Assembly

OVERHAUL

Page 5: UX Bootcamp Fall 2015 General Assembly

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

SLIDES!

Page 6: UX Bootcamp Fall 2015 General Assembly

‣ Introduction to user experience design + usability‣ Introduction to user experience exercises + outcomes

WHAT WE’LL COVER TODAY

Page 7: UX Bootcamp Fall 2015 General Assembly

‣ 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

HOW WE’LL COVER IT

Page 8: UX Bootcamp Fall 2015 General Assembly

USER EXPERIENCE DESIGN + USABILITY

UXD BOOTCAMP

Page 9: UX Bootcamp Fall 2015 General Assembly

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

Page 10: UX Bootcamp Fall 2015 General Assembly

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

Page 11: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

UX PROCESS

Page 12: UX Bootcamp Fall 2015 General Assembly

TRADITIONAL UX PROCESS [“WATERFALL”]

‣ Discover‣ Define‣ Design‣ Develop‣ Deliver

Page 13: UX Bootcamp Fall 2015 General Assembly

DISCOVER

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

Page 14: UX Bootcamp Fall 2015 General Assembly

DEFINE

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

Page 15: UX Bootcamp Fall 2015 General Assembly

DESIGN

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

Page 16: UX Bootcamp Fall 2015 General Assembly

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.

Page 17: UX Bootcamp Fall 2015 General Assembly

DELIVER

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

Page 18: UX Bootcamp Fall 2015 General Assembly

DRINK!

Page 19: UX Bootcamp Fall 2015 General Assembly

UX SHOULD BE ITERATIVE

Discover

Define

Develop

Deliver

Design

Page 20: UX Bootcamp Fall 2015 General Assembly

LEAN UX PROCESS

Page 21: UX Bootcamp Fall 2015 General Assembly

LEAN UX STORY FLOW

Page 22: UX Bootcamp Fall 2015 General Assembly

THERE’S AN APP FOR THAT.

UXD BOOTCAMP

Page 23: UX Bootcamp Fall 2015 General Assembly

COMPETITIVE ANALYSIS

Your company Competitor 1 Competitor 2 Competitor 3

Overview & profile

Competitive advantage

Target market

Market share

Market strategies

‣ Download a competitive analysis template from Client Heartbeat.

Page 24: UX Bootcamp Fall 2015 General Assembly

‣ What grocery stores have apps that you’ve seen?‣ What makes a good/bad grocery shopping experience?‣ What other activities surround grocery shopping?

LET’S TALK ABOUT GROCERY APPS

Page 25: UX Bootcamp Fall 2015 General Assembly
Page 26: UX Bootcamp Fall 2015 General Assembly
Page 27: UX Bootcamp Fall 2015 General Assembly
Page 28: UX Bootcamp Fall 2015 General Assembly
Page 29: UX Bootcamp Fall 2015 General Assembly
Page 30: UX Bootcamp Fall 2015 General Assembly
Page 31: UX Bootcamp Fall 2015 General Assembly
Page 32: UX Bootcamp Fall 2015 General Assembly
Page 33: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

UX RESEARCH

Page 34: UX Bootcamp Fall 2015 General Assembly

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

Page 35: UX Bootcamp Fall 2015 General Assembly
Page 36: UX Bootcamp Fall 2015 General Assembly

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?

‣ Why?‣ Who?‣ What? ‣ Where?‣ When?‣ How?

Page 37: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

INTERVIEWING USERS

Page 38: UX Bootcamp Fall 2015 General Assembly

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?

‣ Why are they coming to us?‣ Goals?‣ What are their needs?

Page 39: UX Bootcamp Fall 2015 General Assembly

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?

‣ Who are our users?‣ Businesses vs. consumers? ‣ Demographics?‣ Background knowledge?‣ Understanding of terminology?

Page 40: UX Bootcamp Fall 2015 General Assembly

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?

Page 41: UX Bootcamp Fall 2015 General Assembly

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

Page 42: UX Bootcamp Fall 2015 General Assembly

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?

‣ How are they accessing?‣ Desktop or mobile?‣ Tablet?‣ Over the phone or in person?

Page 43: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

HOW TO GET THAT INFORMATION

Page 44: UX Bootcamp Fall 2015 General Assembly

HOW DO WE GET THAT INFORMATION?

‣ Research, Observe!‣ Surveys‣ User Interviews‣ Focus Groups‣ Existing data

Page 45: UX Bootcamp Fall 2015 General Assembly

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

Page 46: UX Bootcamp Fall 2015 General Assembly

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

Page 47: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

HOW TO CONDUCT USER INTERVIEWS

Page 48: UX Bootcamp Fall 2015 General Assembly

FINDING PARTICIPANTS

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

Page 49: UX Bootcamp Fall 2015 General Assembly

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?”

Page 50: UX Bootcamp Fall 2015 General Assembly

FOCUS ON SPECIFIC INSTANCES

‣ + “Have you ever had ________ problem”?‣ + “Tell about the last time you ....”

‣ Avoid generalizations:‣ - “What do you usually ...”

Page 51: UX Bootcamp Fall 2015 General Assembly

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...”

Page 52: UX Bootcamp Fall 2015 General Assembly

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 ...”

Page 53: UX Bootcamp Fall 2015 General Assembly

TOPIC MAPS + DISCUSSION GUIDES

Page 54: UX Bootcamp Fall 2015 General Assembly

TOPIC MAP EXERCISE! - 50 MINUTES

‣ You are going to do a user interview about grocery shopping in order to better understand users’ habits + desires‣ Prepare a topic map covering all subjects you want to know [20m]‣ Split into groups of 3‣ 1 person will interview, 1 will record notes on post it notes, 1 person

will be interviewed‣ We will rotate every 10 minutes

‣ Be prepared to share!

Page 55: UX Bootcamp Fall 2015 General Assembly

BREAK

Page 56: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

ANALYZING USER RESEARCH

Page 57: UX Bootcamp Fall 2015 General Assembly

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

Page 58: UX Bootcamp Fall 2015 General Assembly

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

Page 59: UX Bootcamp Fall 2015 General Assembly

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

Page 60: UX Bootcamp Fall 2015 General Assembly

AFFINITY MAP

Page 61: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

PERSONAS

Page 62: UX Bootcamp Fall 2015 General Assembly

PERSONAS

‣ An example, generally fictional, of a person within your user base

‣ Created by conducting user research + summarizing trends into one or more archetypes

Page 63: UX Bootcamp Fall 2015 General Assembly

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]

Page 64: UX Bootcamp Fall 2015 General Assembly

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]

Page 65: UX Bootcamp Fall 2015 General Assembly

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

Page 66: UX Bootcamp Fall 2015 General Assembly

PERSONAS: EXAMPLE

Page 67: UX Bootcamp Fall 2015 General Assembly

PERSONAS: EXAMPLE

Page 68: UX Bootcamp Fall 2015 General Assembly

PERSONAS: TEMPLATE

Page 69: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

PROVISIONAL PERSONAS

Page 70: UX Bootcamp Fall 2015 General Assembly

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

Page 71: UX Bootcamp Fall 2015 General Assembly

PROVISIONAL PERSONAS: EMPATHY MAP

Page 72: UX Bootcamp Fall 2015 General Assembly

PROVISIONAL PERSONAS: EMPATHY MAP COMPLETED

Page 73: UX Bootcamp Fall 2015 General Assembly

What does this person THINK and FEEL?

What does this person SEE?

What does this person HEAR?

What are this person’s NEEDS?

What are this person’sCHALLENGES?

Page 74: UX Bootcamp Fall 2015 General Assembly

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.

Page 75: UX Bootcamp Fall 2015 General Assembly

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]

Page 76: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

CHALLENGES WITH PERSONAS

Page 77: UX Bootcamp Fall 2015 General Assembly

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

Page 78: UX Bootcamp Fall 2015 General Assembly

BREAK

Page 79: UX Bootcamp Fall 2015 General Assembly

INTRODUCTION TO WIREFRAMES

UXD BOOTCAMP

Page 80: UX Bootcamp Fall 2015 General Assembly

‣ Focus on Structure.‣ Visualize Ideas. ‣ Define Project Scope.‣ Clarify Hierarchy.‣ Identify Content Needs.‣ Promote Discussion.‣ Reduce Problems Early.

WHAT IS A WIREFRAME?

http://themetaq.com/articles/wireframe-is-worth-a-thousand-spreadsheets-wireframing-101

Page 81: UX Bootcamp Fall 2015 General Assembly

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.

Page 82: UX Bootcamp Fall 2015 General Assembly

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.

Page 83: UX Bootcamp Fall 2015 General Assembly

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!

Page 84: UX Bootcamp Fall 2015 General Assembly

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.

Page 85: UX Bootcamp Fall 2015 General Assembly
Page 86: UX Bootcamp Fall 2015 General Assembly

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!

Page 87: UX Bootcamp Fall 2015 General Assembly

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?

Page 88: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

LET’S TEST THOSE WIREFRAMES!

Page 89: UX Bootcamp Fall 2015 General Assembly

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?

Page 90: UX Bootcamp Fall 2015 General Assembly

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?

Page 91: UX Bootcamp Fall 2015 General Assembly

UX BOOTCAMP

CONGRATULATIONS!YOU JUST COMPLETED YOUR FIRST UX DESIGN SPRINT!

Page 92: UX Bootcamp Fall 2015 General Assembly

TOOLS + SOFTWAREUXD BOOTCAMP

Page 93: UX Bootcamp Fall 2015 General Assembly

TOOLS + SOFTWARE: WIREFRAMES + PROTOTYPES

‣ UX Pin ‣ Wireframe.cc ‣ Solidify App‣ Proto.io ‣ InVision ‣ P.O.P. app ‣ Axure ‣ Paper sketches ‣ Flinto‣ Protoskecth

‣ Mockups.me‣ Appery‣ Realizer App‣ Framer JS‣ Easel‣ Power Mockup‣ Moqups‣ Keynote Kung Fu‣ Antetype‣ AppSketcher

‣ HotGloo‣ FlairBuilder‣ Pidoco‣ Pencil Project‣ FileSquare‣ Concept.ly‣ MockingBird‣ Mockflow‣ iPlotz‣ Balsamiq

‣ OmniGraffle‣ Fluid‣ Handcraft‣ Composite

Page 94: UX Bootcamp Fall 2015 General Assembly

TOOLS + SOFTWARE: RESEARCH + TESTING

‣ Wufoo ‣ TypeForm ‣ Bagel Hint ‣ Verify App ‣ Usabilla ‣ Morae‣ UX Recorder‣ Google

Hangouts ‣ PollDaddy

‣ SurveyGizmo‣ SurveyMonkey‣ WebNotes‣ LiveChat‣ Frelay‣ iPerceptions‣ Kampyle‣ Qualaroo‣ UserVoice‣ Webreep

‣ Intuition HQ‣ Usability Hub‣ UsersThink‣ Plain Frame‣ Chalkmark‣ Plunk‣ SilverBack 2.0‣ Delight.io‣ MagiTest‣ Camtasia

‣ Jing‣ Try my UI‣ Qualtrics

Page 95: UX Bootcamp Fall 2015 General Assembly

TOOLS + SOFTWARE: ORGANIZING INFORMATION

‣ Lucid Chart‣ MindMeister‣ Coggle.it‣ Optimal Sort‣ Concept Codify‣ WebSort‣ Simple Card Sort‣ Xsort

Page 96: UX Bootcamp Fall 2015 General Assembly

TOOLS + SOFTWARE: DIAGRAMS + SITEMAPS

‣ Gliffy‣ Lovely Charts‣ Creately‣ Google Drawings‣ Draw.io

Page 97: UX Bootcamp Fall 2015 General Assembly

TOOLS + SOFTWARE: MIND MAPS

‣ Xmind‣ Mind Node‣ Mindjet‣ FreeMind

Page 98: UX Bootcamp Fall 2015 General Assembly

TOOLS + SOFTWARE: ANALYTICS + METRICS

‣ Crazy Egg ‣ Good Data ‣ KISSmetrics ‣ Mix Panel ‣ Google

Analytics‣ Lucky Orange‣ Live Person‣ Myna Web‣ HiConversion

‣ Tableau‣ Maxymiser‣ App Annie‣ Flurry‣ Woopra‣ Quantcast‣ Piwik‣ Clicky‣ Attention Wizard‣ Click Density

‣ Click Tale‣ Inspectlet‣ FullStory

Page 99: UX Bootcamp Fall 2015 General Assembly

RESOURCESUXD BOOTCAMP

Page 100: UX Bootcamp Fall 2015 General Assembly

RESOURCES: READING

‣ UX Booth‣ UX Magazine‣ UX Matters‣ UX Zeitgeist‣ Smashing Magazine‣ UIE‣ A List Apart‣ Transitioning Careers‣ Medium Collection‣ Boxes and Arrows

‣ Hints from the Lazy Bear‣ 52 Weeks of UX‣ UX Apprentice‣ Usability First Glossary‣ UX Beginner

Page 102: UX Bootcamp Fall 2015 General Assembly

RESOURCES: UXERS YOU SHOULD KNOW

‣ Jakob Nielson‣ Jared Spool‣ Alan Cooper‣ Dana Chisnell‣ Nate Bolt‣ Peter Morville‣ Stephen Anderson‣ Steve Krug‣ Luke Wroblewski

Page 103: UX Bootcamp Fall 2015 General Assembly

RESOURCES: COMPANIES OF NOTE

‣ Nielsen Norman Group‣ Adaptive Path‣ IDEO‣ Smart Design‣ Frog Design‣ Cooper Design

Page 104: UX Bootcamp Fall 2015 General Assembly

RESOURCES: LOCAL ORGANIZATIONS

‣ Ladies that UX‣ Atlanta Web Design Group‣ IXDA‣ CHI Atlanta

Page 105: UX Bootcamp Fall 2015 General Assembly

RESOURCES: CONFERENCES

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

Page 106: UX Bootcamp Fall 2015 General Assembly

QUESTIONS?UXD BOOTCAMP

Page 107: UX Bootcamp Fall 2015 General Assembly

THANKS!UXD BOOTCAMP