ux bootcamp - august 2016

Jacklyn Cohen, UX Consultant @ UX Collective

UX BOOTCAMP

UX BOOTCAMP

3

My name is Jacklyn.

Nice to Meet you@playfulpixel [I curse a lot]

@LadiesThatUXATL [dudes are welcome!]

Your name

Your current job

Why you’re here

Favorite app

Now, YOU!

UX BOOTCAMP

4

You can download them!

These Slides + Others

slideshare.net/jacklynburgan

UX BOOTCAMP

5

uxcompanion.com A handy glossary of user experience (UX) theories, tools and principles. I promise you’ll use it today!

UX Companion

Isn’t is strange that a chopped off hand holding an old iPhone looks

professional? It gives me the creeps.

AGENDA

08:00 – 08:30 IntroductionsGet to know each other

08:30 – 09:30 UX Design + Usability + UIUnderstand the difference

09:30 – 10:00

10:00 – 10:30 ResearchConducting + Analyzing

10:30 – 11:30 WireframesCreating + Testing

11:30 – 12:00 Tools + SoftwareA big old list of ‘em

UX ProcessWaterfall, Agile + Lean

08:00 – 08:30 ResourcesPeople + events you should know

These times are bogus. This workshop is built for YOU, so timing will depend on our progress.

UX Design + Usability + UI No, they’re not the same.

8

“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

User Experience Design

“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

http://img.dare.co.uk/wp/spectrum-of-user-interface-design.gif

9

“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

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

This proves that people are super confused by what usability is because this

was a top result in google images.http://usabilitygeek.com/wp-content/uploads/2012/07/12-Typography-Font-Guidelines-Usability.jpg

User interface design (UI) or user interface engineering is the

design of user interfaces for machines and software, such as

computers, home appliances, mobile devices, and other

electronic devices, with the focus on maximizing usability

and the user experience.

— Wikipedia

10

“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

UI [User Interface Design]

http://netdna.webdesignerdepot.com/uploads/2015/02/003.jpg

UX BOOTCAMP

11

Erik Flowers uxisnotui.com

UX is the intangible design

of a strategy that brings us

to a solution.

“”

UX BOOTCAMP

12

“”

UX Process Waterfall, Lean + Agile

UX BOOTCAMP

14

Traditional UX Process // Waterfall

Information gathering

DiscoverReleasing the

product

DeployBuilding the product

DevelopCreating

requirements

Define^ What that says

Design

UX BOOTCAMP

15

Iterative UX Process // AgileDiscover Deliver

Develop

Define

Design

Research

• Focus Groups

• Competitive Analysis

• Interviews

• Personas + Scenarios

• User Goals

• Usability Goals

Implementation

• Usability Testing

• Expert Evaluation

• Accessibility Evaluation

Concept

• Concept Models

• User Scenarios

• Paper Prototypes



Design

• Process Flows

• Wireframes

• Interactive Prototypes

Launch



• Accessibility Evaluation

• Focus Groups


• Metrics

UX BOOTCAMP

16

Iterative UX Process // Lean

Think

Check

Make• Generative Research

• Ideation

• Mental Models

• Behavior Models

• Test Results


• A/B Testing


• Site Analytics

• Metrics

• Prototypes

• Wireframes

• Value Proposition

• Hypotheses

• Landing Page

• Code

Research Conducting + Analyzing

UX BOOTCAMP

18

Competitive Analysis

Your Company Competitor 1 Competitor 2 Competitor 3

Overview + Profile

Analysis

Competitive Advantage

Target Market

Market Share

Marketing Strategies

Products + Services

Pricing + Costs

Distribution Channels

This is a tweaked version of the Client Heartbeat template.

19

Let’s Talk Apps

• What grocery stores have apps that you’ve seen?

• What makes a good/bad grocery shopping experience?

• What other activities surround grocery shopping?

• What makes a good/bad grocery shopping experience?

• What other activities surround grocery shopping?

• What grocery stores have apps that you’ve seen?

#RealTalk: Grocery Shopping is the Worst

https://s3-eu-west-1.amazonaws.com/static.nextnature.net/app/uploads/2016/02/supermarket-consumers-impact1.jpg


UX BOOTCAMP

20


Price Chopper InstacartPrice Chopper’s List Instacart’s List

UX BOOTCAMP

21


Aldi KrogerAldi’s List Kroger’s List

UX BOOTCAMP

22


Publix Shop RitePublix’s List Shop Rite’s List

UX BOOTCAMP

23


Whole Foods ZapposWhole Foods List Favor

24

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

http://www.wired.com/wp-content/uploads/2014/04/10_watering-can.jpg

What do we Need to Know about our Users?

• Why?

• Who?

• What?

• Where?

• When?

• How?

UX BOOTCAMP

26

What do we Need to Know about our Users?

01// Why?Why are they coming to us?

Goals?

What are their needs?

04// Where?What are they when they access?

Where are they coming from?

02// Who?Who are our users?

Businesses vs. consumers?

Demographics?

Background knowledge?

Understanding of terminology?

05// When?When are they visiting?

Morning or evening?

When they’re in a crisis?

Daily?

Monthly?

03// What?What are their habits?

Do they use social networks?

Content producers or consumers?

What you ask depends on the product

06// How?How are they accessing?

Desktop or mobile?

Tablet?

Over the phone or in person?

28

Finding Participants

Where to find them:

• Existing customers

• Work with your support or sales teams

• Coffee shops

• Asking your network

• Social networks and forums

• Craigslist ads [last resort - stay safe]

http://www.morgansbookbag.com/wp-content/uploads/2015/06/coffee-shop.jpg

29

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

• Focus on specific instances

+ “Have you ever had ________ problem”?

+ “Tell about the last time you ....”

• Avoid generalizations:

- “What do you usually ...”

• 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...”http://www.pixotech.com/wp-content/uploads/2014/07/IMG_1739.jpg

UX BOOTCAMP

30

Preparing for an Interview

Record, if possibleAsk permission. Explain why + that it’s

for helping with any gaps

Focus on topicsFocus on topics rather than a list of

questions

Stay on trackIf you divert off topic: “that’s really

interesting, can you tell me more about X…?”

Take notesTake as many notes as you can while

maintaining focus on the participant

Keep it organicIt should be a conversation

UX BOOTCAMP

31

Topic Maps + Discussion Guides

Final Testing

Choosing a place to visit

Guide books

Budgeting

Working out who will be

coming with me

Visas + paperworkPet care

UX BOOTCAMP

32

Exercise 1: Topic Maps + Interviews

You are going to do a user interview about grocery shopping in order to better

understand users’ behavior + habits + desires

• Prepare a topic map covering all subjects you want to know [20 minutes]

Be prepared to share!

UX BOOTCAMP

33

Exercise 2: Conducting Interviews

Let’s interview!

• 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!

34

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

Identifying Trends with Affinity Diagrams

• Once you have all of your data, it’s time to analyze

• Goal is to extract common trends / themes

• Post-Its are your friends

UX BOOTCAMP

35

Exercise 3: Affinity Diagram

The affinity diagram process lets a group move beyond its habitual thinking and

preconceived categories. This technique accesses the great knowledge and

understanding residing untapped in our intuition.

• 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

UX BOOTCAMP36

37

Personas

• An example, generally fictional, of a person within your

user base

• Created by conducting user research + summarizing

trends into one or more archetypes

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]

http://www.christinanghiem.com/images/persona-01.jpg

UX BOOTCAMP

38

Data to be Included

Goals + Needs

ScenariosDescribe what they would do

+ why independent of an interface

BehaviorsNeeds Biographical InfoLike name, age, gender,

location, income, etc.

Personality TraitsOptional, but these traits

should be based in research

UX BOOTCAMP39

http://www.christinanghiem.com/images/persona-01.jpg

UX BOOTCAMP40

https://fakecrow.com/wp-content/uploads/2014/04/FakeCrow_Persona_Template2.jpg

UX BOOTCAMP

41

Persona Template

Bio + Demographics Behaviors

Stories + Scenarios Goals + Needs

UX BOOTCAMP

42

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

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’s CHALLENGES?

What really counts? What are their major preoccupations? What are their worries and aspirations?

What do they hear in the media and

advertising? What do their

friends and family say?

What do their bosses, and

other influencers

say?

What is their home

environment like? What is their work

environment like? Who are their friends

and coworkers?

Why do they need this? What needs does this already address? What do they need

to learn to use this?

What obstacles do they need to overcome? What fears are blocking them?

What frustrations are causing friction?

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’s CHALLENGES?

UX BOOTCAMP

45

Exercise 4: Empathy Maps

Scenario: You’re hosting a holiday dinner at your house for 12 people.

• Treat your table as a team

• Draw an empathy map on your table or wall

• Begin filling out your empathy map based on insights from your interviewing

exercise and conversations with your team.

• You’ve got 30 minutes for this exercise.

47

Challenges with 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

http://iceaventuras.blogs.sapo.pt/quando-por-estupidez-perdes-um-dia-19493This is why you shouldn’t post photos of your babies on the internet.

Wireframes Creating + Testing

49

What’s a Wireframe?

• Focus on Structure.

• Visualize Ideas.

• Define Project Scope.

• Clarify Hierarchy.

• Identify Content Needs.

• Promote Discussion.

• Reduce Problems Early.

http://www.designedbyknight.com/wp-content/uploads/2014/01/reservation_annotation.jpgthemetaq.com/articles/wireframe-is-worth-a-thousand-spreadsheets-wireframing-101

UX BOOTCAMP

50

Wireframes are fun for Everyone!

Useful to understand patterns and visual hierarchy while creating

awesome products

Designers

Inform the requirements of what they’re building

Developers

As a tool to make sure their needs and goals are met.

Clients

http://technical.ly/philly/wp-content/uploads/sites/2/2015/10/GDI_Summit_2014-074-e1444137795534.jpg http://greatives.eu/themes/osmosis/wp-content/uploads/2014/10/Young-creative-designer-man-at-phone-working-at-office.jpg http://goblackcentral.com/wp-content/uploads/2013/01/business-owner.jpg

UX BOOTCAMP

51

Use + Flexibility

Wireframes can be [and should be] used EVERY DAY. But specifically, when you’re

having trouble agreeing with your stakeholder, when your design is more than two

pages deep, etc.

Once the wireframe has been approved, does the comp need to match pixel perfect?

The answer is:

IT DEPENDS!

UX BOOTCAMP

52

Exercise 5: Introduction to Wireframes

Using the reference on the next

slide, sketch what you see.

We’ll complete this exercise in

5 minutes.

Here are some examples of

varying fidelity.

UX BOOTCAMP

55

Exercise 6: Design a Grocery App

Put your research data, empathy maps and wireframe skills to use!

Create a home screen for a grocery shopping app. You’ve got 30 minutes.

Think about:

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

UX BOOTCAMP

56

Exercise 6.1: Design a Grocery App

Create a shopping list screen for a grocery shopping app. You’ve got 30 minutes.

Think about:

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

UX BOOTCAMP

57

Exercise 7: User Testing

Find a partner to test your wireframe.

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

59

Congratulations

You just completed your first user experience design sprint!

http://www.canogaparknc.org/wp-content/uploads/2016/07/sun_fw.jpg


Tools + Software A big old list of ‘em

UX BOOTCAMP

61

For 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

UX BOOTCAMP

62

For Research + Testing

• Wufoo

• TypeForm

• Bagel Hint

• Verify App

• Usabilla

• Morae

• UX Recorder

• Google Hangouts

• PollDaddy

• Qualtrics

• 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

UX BOOTCAMP

63

For Organizing Information

• Mind Node

• Lucid Chart

• MindMeister

• Coggle.it

• Optimal Sort

• Concept Codify

• WebSort

• Simple Card Sort

• Xsort

• XMind

• Mindjet

• Freemind

UX BOOTCAMP

64

For Diagrams + Sitemaps

• Sketch

• Illustrator

• Photoshop

• Gliffy

• Lovely Charts

• Creately

• Google Drawings

• Draw.io

UX BOOTCAMP

65

For Analytics + Metrics

• FullStory

• 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

Other Resources People + events you should know

UX BOOTCAMP

67

Recommended Online Reading

• Hints from the Lazy Bear

• 52 Weeks of UX

• UX Apprentice

• Usability First Glossary

• UX Beginner

• UX Booth

• UX Magazine

• UX Matters

• UX Zeitgeist

• Smashing Magazine

• UIE • A List Apart • Think Brownstone • Dear Design Student • Boxes and Arrows

UX BOOTCAMP

68

Recommended 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

• How to Make Sense of Any Mess: Information Architecture for Everybody

UX BOOTCAMP

69

People you Should Know

• Jakob Nielson

• Jared Spool

• Alan Cooper

• Dana Chisnell

• Nate Bolt

• Peter Morville

• Stephen Anderson

• Steve Krug

• Luke Wroblewski

UX BOOTCAMP

70

Companies of Note

• Nielsen Norman Group

• Adaptive Path

• IDEO

• Smart Design

• Frog Design

• Cooper Design

UX BOOTCAMP

71

Local Organizations

• Ladies that UX [non-ladies are welcome!]

• IXDA

• amUX

• UXPA

• Atlanta Web Design Group

• CHI Atlanta

UX BOOTCAMP

72

Conferences

• Talk UX

• GIANT

• Interaction [by IXDA]

• SIGCHI

• IA Summit

• Gel Conference

• Enterprise UX

• #dareconf

• UI21 [by UIE]

Questions? Ask me anything

Thanks y

’all!