effective visuals & prototypes, what makes a project move forward

48
@faz HI, I’M FAZ

Upload: faz-besharatian

Post on 19-Feb-2017

43 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

HI, I’M FAZ

Page 2: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

EFFECTIVE VISUALS & PROTOTYPESWhat Makes a Project Move Forward

Page 3: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

OBJECTIVES

Understand the importance of being pragmatic when it comes to prototyping.

Define what makes for a persuasive visual when communicating with clients or target audience.

Become more adapt at identifying what is the critical question worth asking.

Page 4: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

BUT 1ST, A QUICK CHECK…

Page 5: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

WHAT IS A PROTOTYPE?

1

Page 6: Effective Visuals & Prototypes, What Makes a Project Move Forward

CREATING A WORKING MODEL OF A PRODUCT OR FEATURE

Page 7: Effective Visuals & Prototypes, What Makes a Project Move Forward

COMMUNICATING AN IDEA INTERACTIVELY

Page 8: Effective Visuals & Prototypes, What Makes a Project Move Forward

SHOWING RATHER THAN TELLING

Page 9: Effective Visuals & Prototypes, What Makes a Project Move Forward

THERE IS RICH ANALOG HISTORY

Page 10: Effective Visuals & Prototypes, What Makes a Project Move Forward

IT IS AN ITERATIVE PROCESS

Page 11: Effective Visuals & Prototypes, What Makes a Project Move Forward

IT FITS THE LARGER CONTEXT

Page 12: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

ASK

What is the problem that the prototype is trying to address?

What are we unsure about?

Page 13: Effective Visuals & Prototypes, What Makes a Project Move Forward

SUSAN WOJCICKI— CEO, YOUTUBE

“I love taking an idea... to a prototype and then to a product that millions of people use.”

Page 14: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

WHAT DOES IT MEAN TO BE EFFECTIVE?

2

Page 15: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

FAST DOES NOT ALWAYS EQUAL EFFICIENT.

BEING EFFECTIVE IS SIMPLY OMITTING/POSTPONING STYLE CHOICES.

YOUR TOOLS CAN TRAP YOU.

It’s not…

Page 16: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

YOU MUST BE CONVINCING. SO KNOW YOUR AUDIENCE.

YOU MUST BE RELEVANT. BE TIMELY.

YOU MUST BE NOTICED. SPEAK UP!

It is…

Page 17: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

HIERARCHY OF USER NEEDS

FUNCTIONAL

RELIABLE

USABLE

PLEASURABLE

Page 18: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

HIERARCHY OF USER NEEDS

FUNCTIONAL

RELIABLE

USABLE

PLEASURABLE

Page 19: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

AARON WALTER

“Certainly we all want to eat edible foods with nutritional value, but we also crave flavor.”

Page 20: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

“Why do we settle for usable when we can make interfaces both usable and pleasurable?”

AARON WALTER

Page 21: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

Your team or clients aren’t that different from users. They too need to have an emotional attachment to the work or product.

Page 22: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

What will get them to move the project forward?

What insight can we unlocked?

How do we leap forward?

ASK

Page 23: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

SELLING BIG IDEAS THROUGH VISUALIZATION

Page 24: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

FINDING THE INSIGHT THAT BRINGS EVERYONE TOGETHER

It’s about…

Page 25: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

A FEW EXAMPLES…

SCENARIOS

Page 26: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

Your startup is building b2b tools within telco industry.

You’ve had a kick-off with the client already, but they feel the need to chat more to discuss the steps of the process for their team members.

You want to redirect the efforts while creating confidence.

It’s 7:30 am and your meeting is at 9!

SITUATION

Page 27: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

DRIVING CONVERSATIONS

Evolves to this later

Page 28: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

Your non-profit client, focused on education in developing countries, is trying to modernize their product and teaching approach.

You have legacy content and software as a major constraint.

There is hunger for vision on the project.

You need to inspire change.

SITUATION

Page 29: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

PAINTING THE WAY FORWARD

Page 30: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

Your travel industry client has a new venture subsidiary in mind and wants to create a more social offering.

There is little understanding of content management and publishing process.

You want to elevate the content creation discussion and establish the need for them to build relationships with their customers.

SITUATION

Page 31: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

MAP OUT THE JOURNEY AND TOUCH POINTSPriyaAge: 32Location: MumbaiOccupation: ArchitectFamily: SingleComputer Skills: Above Average

Key Motivators:

big vacation per year

to keep up

conscious on the larger items

Priya

Sameer thinks he may have seen something about

SameerAge: 29

Family: SingleComputer Skills: Expert

Key Motivators:

Faz BesharatianAdvenature Experience Map 16 August 2012

Advenature General User Flow

Here we have 2 personas, each with their own motivational factors, but similar in demographic. Both may take on the same number of challenges. Both may book trips at the same frequency. But they do not use the site in the same way.

Priya:Her pattern of interaction is more in-depth. She is more engaged with activities prior to the trip or event. She tends to research more. She maintains the connections she makes.She is sometimes harder to please, but she may be much more loyal.

Sameer:His pattern of interaction is more scattered. He does enough to get the job done but is less concerned with preparation. He has more experience with the outdoors and is focused on the quality and intensity of the activity. He tends to engage the website minimally. But he is efficient in his usage.

The height of the graphs represent the value and weight of interaction for the user. Not all items listed are directly related to online activities.

Attends speaker event

1st Rafting Trip

Camping Trip2nd Rafting Trip

Kilimanjaro Adventure Challenge

Repelling

Joins Advenature

Joins Trekking GroupJoins Rafting Group

Plans Rafting TripAsks Expert

Finds Local Event Plans Rafting Trip

Organizes Friends for Trip

Post Photos

Shares Album

Plans Hiking TripAnswers Questions

Connects with Other Raftersfor the same tour

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Jan Feb Mar Apr

Suggests a TripAsks Questions

Plans Repelling TripBuys Gear

Moderates Discussion

Creates a Camping Group

Creates Local Group Invites More People

Post PhotosShares Album

Discusses Next TripPlans Next Event

Post Photos

Shares AlbumAnswers Questions

Joins Advenature

Connects with Friends

Joins Climbing GroupCreates Discussions

Answers Questions

Finds Outbound Trip

Invites Friends

Plans Trip

Asks Expert

Completes Profile

Kilimanjaro Adventure Challenge

Jun Jul Aug Sep Oct Nov

Suggests a TripAsks Questions

Plans Repelling Trip

Creates Local Group Invites More People

Post Photos

Shares AlbumAnswers Questions

Finds Outbound Trip

Invites Friends

Plans Trip

Asks Expert

Page 32: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

MAP OUT THE JOURNEY AND TOUCH POINTS

Attends speaker event

1st Rafting Trip

Camping Trip2nd Rafting Trip

Joins Advenature

Joins Trekking GroupJoins Rafting Group

Plans Rafting TripAsks Expert

Finds Local Event Plans Rafting Trip

Organizes Friends for Trip

Post Photos

Shares Album

Plans Hiking TripAnswers Questions

Connects with Other Raftersfor the same tour

Moderates Discussion

Creates a Camping Group

Page 33: Effective Visuals & Prototypes, What Makes a Project Move Forward

MAP OUT THE JOURNEY AND TOUCH POINTS

Page 34: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

The grand-mother of all associations is redoing their massive, content rich website.

You have many teams with varying workflows and competing objectives.

There are vendors and internal teams, each with varying skill sets and value to the organization.

Your executives want everyone to play nice!

SITUATION

Page 35: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

PROCESS AND WORKFLOW CHALLENGE

Page 36: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

Content

Creators

Commissioned Keyed In 1st Edit Top EditAssets Gathered Design Reviewed Fact Checked Copy Edited Legal Reviewed QAed Published Promoted

Subject ExpertsReportersFreelancers

Scenario 1: Article follows through all typical steps to get published.

Scenario 2: Some steps are skipped for a video based article based on existing, relevant reviews.

Scenario 3: A publisher rushes an article through due to timely nature of story.

Content Editors

Producers Channel Producers

Designers Art DirectorsDesign Leads

Content/CopyEditors

Copy Editors Legal Editors

Producers/Content Editors

Channel Producers

ProducersMarketersPartners

Authors - %20 of usersData entry and minimal privileges.

(AARP staff within any biz unit)

Calendering: Editorial calendars which are housed in QuickBase currently maybe incorporated into a different system, depending on where the content brief and contracts are housed.

Reporting: CMS’s internal reporting may be used as a feedback loop to track progress, volume and other relevant data needed to manage editorial calendar.

DAM: Digital Asset Management will be at enterprise level. The ties between the 2 systems will determine the possible inclusion of additional steps in the CMS work flow.

Editors - %60 of usersData entry, content edit, page layout and general content manipulation.

(Producers, Designers, i.e. Elizabeth, Laura, Paul, Merideth, etc.)

Publishers - %10 of usersData entry, content edit, page layout and authority to publish.

(Managing Editor, Channel Producer, i.e Carolyn)

Administrators - %5 of usersData entry, content edit, page layout, general content manipulation, and publishing. CMS admins can do everything short of development.

(CMS design/dev, ie. Rachel)

A E E EEEEP P P

MA E P

VISUALIZE & COMMUNICATE THE PROCESS

Eventually created this

Page 37: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

FEW MORE THOUGHTS…

TIPS

Page 38: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

2ND STAGE: MERGE WITH THE OLD & TEST (FEW WEEKS IN)

Page 39: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

3RD STAGE: EVOLUTIONARY STEPS (CONTINUE TESTING)

Page 40: Effective Visuals & Prototypes, What Makes a Project Move Forward

AYSE BIRSEL

“To say that something is designed means it has intentions that go beyond its function. Otherwise it’s just planning.”

Page 41: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

DON’T LIMIT YOURSELF TO TESTING. YOU NEED TO BE CONVINCING TOO.

Page 42: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

PICTURES ARE THE QUICKEST WAY TO ADD POLISH TO YOUR PROTOTYPES

Page 43: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

DON’T USE LORUM IPSUM. DON’T PHONE-IN THE PHOTO EITHER.

USE REAL IMAGES.

Page 44: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

DON’T USE LORUM IPSUM. DON’T PHONE-IN THE PHOTO EITHER.

WHAT’S THE STORY IN THE IMAGE?

Page 46: Effective Visuals & Prototypes, What Makes a Project Move Forward
Page 47: Effective Visuals & Prototypes, What Makes a Project Move Forward

JEFF VEEN — VP PRODUCT, ADOBE

“The thing that I found work the best… Start with the end product and work your way back.”

Page 48: Effective Visuals & Prototypes, What Makes a Project Move Forward

@faz

THANKS FOR LISTENING

This presentation will be posted here: [link]

@faz