ux bootcamp - august 2016

Jacklyn Cohen, UX Consultant @ UX Collective

UX BOOTCAMP

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

You can download them!

These Slides + Others

slideshare.net/jacklynburgan

UX BOOTCAMP

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.

“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

“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

“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

Erik Flowers uxisnotui.com

UX is the intangible design

of a strategy that brings us

to a solution.

“”

UX BOOTCAMP

“”

UX Process Waterfall, Lean + Agile

UX BOOTCAMP

Traditional UX Process // Waterfall

Information gathering

DiscoverReleasing the

product

DeployBuilding the product

DevelopCreating

requirements

Define^ What that says

Design

UX BOOTCAMP

Traditional UX Process // Waterfall

Information gathering

DiscoverReleasing the

product

DeployBuilding the product

DevelopCreating

requirements

Define^ What that says

Design

UX BOOTCAMP

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

Iterative UX Process // Lean

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

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.

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

Price Chopper InstacartPrice Chopper’s List Instacart’s List

UX BOOTCAMP

Aldi KrogerAldi’s List Kroger’s List

UX BOOTCAMP

Publix Shop RitePublix’s List Shop Rite’s List

UX BOOTCAMP

Whole Foods ZapposWhole Foods List Favor

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

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?

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

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

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

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

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

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!

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

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

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

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

Persona Template

Bio + Demographics Behaviors

Stories + Scenarios Goals + Needs

UX BOOTCAMP

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

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

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.

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

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

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

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

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

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

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

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?

Congratulations

You just completed your first user experience design sprint!

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

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

Tools + Software A big old list of ‘em

UX BOOTCAMP

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

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

For Organizing Information

• Mind Node

• Lucid Chart

• MindMeister

• Coggle.it

• Optimal Sort

• Concept Codify

• WebSort

• Simple Card Sort

• Xsort

• XMind

• Mindjet

• Freemind

UX BOOTCAMP

For Diagrams + Sitemaps

• Sketch

• Illustrator

• Photoshop

• Gliffy

• Lovely Charts

• Creately

• Google Drawings

• Draw.io

UX BOOTCAMP

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

ux bootcamp - august 2016

Design

sxsw ux bootcamp

mario segatto · ux/ui bootcamp neoland, madrid 2019 - 500...

ux bootcamp fall 2015 general assembly

july 2016 - university of pittsburgh · pdf filejuly 2016...

vbp bootcamp series session 2 - new york state ...vbp...

mtnz 30+ bootcamp · musical theatre nz 30+ bootcamp 23 –...

smckc august breakfast - influencer bootcamp with...

ux australia 28 august 2015

assembler bootcamp plus: instructions everyone can use ·...

ux bootcamp @ general assembly atlanta

voyager design...

faculty senate bootcamp and meeting agenda for august 20,...

brc buyers’ bootcamp basalt, co – august 9-11, 2016...

e-bootcamp bootcamp

next gen bootcamp 2019 - mtnz · 2019-06-13 · musical...

primer on ux design - gramener bootcamp mar'16

blogging bootcamp week 1 spring 2015 - glow blogs ·...

people for research user recruitment bootcamp @ ux cambridge...

drupalcon austin: ux bootcamp workshop

ux team of one bootcamp -...