intro to ux with huge

73
DCWW Intro to User Experience July 9, 2013 hugeinc.com [email protected] 45 Main St. #220 Brooklyn, NY 11201 +1 718 625 4843

Upload: kristin-wehmueller

Post on 11-Nov-2014

1.180 views

Category:

Technology


2 download

DESCRIPTION

DCWW Code(Her) workshop July 9, 2013 by Amber Cartwright and D. Anthony Verdin from Huge, Inc.

TRANSCRIPT

Page 1: Intro to UX with Huge

DCWW Intro to User Experience July 9, 2013

hugeinc.com [email protected] 45 Main St. #220 Brooklyn, NY 11201 +1 718 625 4843

Page 2: Intro to UX with Huge

Agenda:

1. Introductions 2. About Huge

3. Our process 4. Good & bad

usability 5. Case study

6. Questions

Page 3: Intro to UX with Huge

Introductions.

Amber Cartwright, User Experience Lead D.Anthony Verdin, User Experience Lead

Page 4: Intro to UX with Huge

About Huge.

Page 5: Intro to UX with Huge

Huge.

We help transform brands

and grow businesses.

Page 6: Intro to UX with Huge

We believe.

Great user experiences are

what drive business performance

and marketing.

Page 7: Intro to UX with Huge

AdAge A-List for 2012 Top ten agencies as ranked by AdAge, across all marketing disciplines.

Third-largest mobile agency According to AdAge for 2012.

Social media agency of the year 2011 and 2012 by OMMA / MediaPost.

Most innovative agency for 2012 by Digiday and One of Five for 2011 by Mashable.

Page 8: Intro to UX with Huge

Founded in 1999 Full-service digital agency within Interpublic Group

600 employees

How we’re structured.

Los Angeles.

Rio de Janeiro.

London.

Brooklyn. San Francisco.

Portland.

Washington, DC. Atlanta.

Page 9: Intro to UX with Huge

Our culture:

Make something you love.

Hire the best people.

Work on incredible projects.

Have fun.

Page 10: Intro to UX with Huge
Page 11: Intro to UX with Huge

newsweek  

Page 12: Intro to UX with Huge

Pizza Hut:

Strategic insight.

Creative/UX design.

Business analysis.

Project requirements.

Wireframing.

Project & account management.

Measurement & analytics.

Social & digital media.

SEO Optimization.

Front-end web & portal development.

Page 13: Intro to UX with Huge

Our process.

Page 14: Intro to UX with Huge

UX is at the core

of everything we do at Huge.

We all put the user first

regardless of department.

Page 15: Intro to UX with Huge

80+ interaction & product

designers globally.

Page 16: Intro to UX with Huge

We are:

strategists + designers + coders

Page 17: Intro to UX with Huge

Business & brand needs.

Audience needs.

Tech & Org Considerations.

Page 18: Intro to UX with Huge

Process overview.

1. Discover 2. Plan 3. Create & iterate

5. Measure & evolve

4. Implement

•  Stakeholder Interviews

•  Consumer Research & Insights

•  Brand & Content Audit

•  Competitive & Market

•  Landscape Analysis

•  Platform & Technology Assessment

•  Goal Prioritization

•  User Personas & Journeys

•  Creative Brief

•  Communications Strategy

•  Road Map

•  Asset Matrix

•  Measurement Plan

•  Creative Concepts

•  Campaign Architecture

•  Wireframes

•  Digital Experience Design

•  Prototyping & User Testing

•  Creative Assets

•  Style Guidelines

•  Functional Specs & Annotations

•  Development & Infrastructure set-up

•  Testing & Analytics

•  Implementation

•  Deployment Management

•  Tracking Analysis

•  Media optimization

•  Measurement of Success

•  Future Enhancements Plan & Research

Page 19: Intro to UX with Huge

It’s really all about collaboration.

Page 20: Intro to UX with Huge

Ideas, ideas, and more ideas.

Page 21: Intro to UX with Huge

A lot of companies

don’t realize their brand

is their online experience.

Page 22: Intro to UX with Huge

Here’s the best part:

In many cases, user goals

and business needs align.

Page 23: Intro to UX with Huge

I want to pay.

Why do you make it so hard

for me to give you

my money?

Page 24: Intro to UX with Huge

I need help but

I don’t feel like calling you

and waiting on hold forever.

Why can’t I just find

the answer myself?

Page 25: Intro to UX with Huge

I do business

with you all the time.

Why does it feel like you

don’t know me at all?

Page 26: Intro to UX with Huge

Good & bad

usability.

Page 27: Intro to UX with Huge

A good user experience is…

Page 28: Intro to UX with Huge

Good UX is:

1. Understandable

2. Actionable

3. Engaging

4. Efficient

Page 29: Intro to UX with Huge

Good UX is:

1. Understandable

2. Actionable

3. Engaging

4. Efficient

Page 30: Intro to UX with Huge

Good UX is:

1. Understandable

2. Actionable

3. Engaging

4. Efficient

Page 31: Intro to UX with Huge

Good UX is:

1. Understandable

2. Actionable

3. Engaging

4. Efficient

Page 32: Intro to UX with Huge

It’s easily learned.

Page 33: Intro to UX with Huge

Vine is a perfect example.

Page 34: Intro to UX with Huge

Vine is a perfect example.

Page 35: Intro to UX with Huge

A new behavior is learned after a

single use.

Page 36: Intro to UX with Huge

Porsche European delivery.

Understandable

Actionable

Engaging

Efficient

Page 37: Intro to UX with Huge

Actions are hard to find and navigate.

Understandable

Actionable

Engaging

Efficient

Page 38: Intro to UX with Huge

Nothing entices users to play with it.

Understandable

Actionable

Engaging

Efficient

Page 39: Intro to UX with Huge

It’s takes lots of time to figure out.

Understandable

Actionable

Engaging

Efficient

Page 40: Intro to UX with Huge

Physical-world experiences

can be judged against the

same criteria.

Page 41: Intro to UX with Huge

Santa Cruz utility boxes.

Understandable

Actionable

Engaging

Efficient

Page 42: Intro to UX with Huge

Illustrating the utility box’s use marks

a huge improvement.

Understandable

Actionable

Engaging

Efficient

Page 43: Intro to UX with Huge

Simplifying generally improves

communication to users.

Page 44: Intro to UX with Huge

But simple doesn’t mean it can’t be

complex, but streamlines needs.

Page 45: Intro to UX with Huge

A personal favorite.

Page 46: Intro to UX with Huge

Your turn.

Explore the space and find

objects that represent both good

and bad usability.

Page 47: Intro to UX with Huge

Send your pics to

[email protected].

Page 48: Intro to UX with Huge

Case Study.

Page 49: Intro to UX with Huge

In order to better understand

some of the steps in our process,

we are going to dive deeper into

one site’s experience.

Page 50: Intro to UX with Huge

We are going to explore three steps of

our Discovery phase.

1.  Define business & user goals

2.  Feature prioritization

3.  Concept sketching

Page 51: Intro to UX with Huge

Our case study: freshdirect

Page 52: Intro to UX with Huge

User goals:

The goals and needs that people

have. This doesn’t necessarily need

to be tied to an online experience.

Page 53: Intro to UX with Huge

Our user might say…

“I’m a busy mom, I want buying groceries to be fast and convenient.” “Sales and discount are a priority for me.” “I won’t order vegetables without seeing them, but I will get my staples online.”

Page 54: Intro to UX with Huge

That translates to these user goals.

“I’m a busy mom, I want buying groceries to be fast and convenient.”

Make the experience simple and personalized. “Sales and discount are a priority for me.”

Keep offers prominent and available. “I won’t order vegetables without seeing them, but I will get my staples online.”

Make repeat buys easy.

Page 55: Intro to UX with Huge

Business goals:

Help boost the brand and

increase profitability.

Page 56: Intro to UX with Huge

The business might say…

“I want to get people to the products they want faster.” “I want people to think ‘freshdirect’ when they think groceries.” “I want our customers to order anytime & anywhere they want.”

Page 57: Intro to UX with Huge

This translates to these business goals.

“I want to get people to the products they want faster.”

Decrease the number of steps it takes to find a product on the site. “I want people to think ‘freshdirect’ when they think groceries.”

Increase brand awareness through marketing and elevated experiences. “I want our customers to order anytime & anywhere they want.”

Create a branded experience across devices.

Page 58: Intro to UX with Huge

Activity 1: Goals

Review the freshdirect site for 10

minutes in your groups. Define what

you think the three primary business

and user goals are from the site.

Page 59: Intro to UX with Huge

Review goals.

Page 60: Intro to UX with Huge

Next, let’s take a look at a single

page and assess it’s experience.

Page 61: Intro to UX with Huge

Is this page meeting your goals?

Page 62: Intro to UX with Huge

Is this page meeting your goals?

“Sales and discount are a priority for me.”

Page 63: Intro to UX with Huge

Are deals prominent enough?

Page 64: Intro to UX with Huge

Activity 2: Feature prioritization

With your user & biz goals in mind,

Take 10 minutes in your group to list

out the top 5 features on the page.

Page 65: Intro to UX with Huge

Review top 5 features.

Page 66: Intro to UX with Huge

Now let’s review one module on the

product page and redo it.

Page 67: Intro to UX with Huge
Page 68: Intro to UX with Huge

Now we’re going to sketch. Here are

some things to think about.

•  Bring your priorities to the front •  Remove features in the module

•  Add something new

•  Change the interaction

•  Change the language

•  Don’t worry about what the sketch looks like

Page 69: Intro to UX with Huge

Activity 3: Sketch

Again, keeping your goals as

priorities, take 15 minutes to sketch 2

other versions of this module

individually. Choose one favorite

from the group to present.

Page 70: Intro to UX with Huge

Review favorite sketch.

Page 71: Intro to UX with Huge

You have learned some of the basics

in UX today. We hope you had fun

and thanks!

Page 72: Intro to UX with Huge

Questions…

Page 73: Intro to UX with Huge

hugeinc.com [email protected] 45 Main St. #220 Brooklyn, NY 11201 +1 718 625 4843