responsive design & prototyping -- an agency model (part 1/3)

THE DIGITAS BOSTON TEAM!

Responsive Design & Prototyping !An Agency Model!"

Responsive Design & Prototyping – Part 1 !!

Have a Question? !!Tweet: #UXDigitas"

Way Beyond Your !Mother’s Wireframes…"

“At Digitas, we’ve traditionally looked at UX !through an advertising and marketing communications !

lens, as opposed to an application-based, !software development (or other*) lens…”"

How about a “Next Generation !Digital Experience” lens?"

*!

A good experience is more than Art & Copy…"

A good experience is more than Art & Copy…"

A good experience is more than Art & Copy…"

A good experience is more than Art & Copy…"

So what does this mean?"

In the Agency, we’ve had trouble getting through…"

Who the hell are we? "

Where did we come from? "

What do we do? "

When should we be engaged? "

Who are we actually? "

What to expect from us in future?"

How we really think"

History & evolution of UX"

Our approach to the work"

When to bring us in"

Names & faces"

New UX strategies tools & tactics"

User Experience — also regularly described as…"

Those Assholes!TA-s!

And various other things…!

Information Architecture!IA!

Interaction Design!ID!

User Interface Design!UI!

Is it a labeling issue? "

No. Its something more…"

What does this mean?"

Sometimes we !need to look back…"

To look forward…"

When Art met Copy, there was… a Breakthrough!"

Output:"Advertising, Marketing Communications"

But wait! Then we had… a Paradigm Shift"

Output:"Advertising, Marketing Communications for the Web"

"

Skip Intro >!

Home New Models Old Models Pricing & O"ers Owners!

Strategy Specialties Art C

opy M

OPs/CRM Search Metrics

Te

chnol

ogy

C

ho

ice

(IA)

Pl

an

ning

Now we have…"

Output:"Marketing Communications, Product Development, Software Development, Process

Optimization, Customer Care, Social Dialogue — across all channels"

We now work together in a !far more complex"

Digital Design Ecosystem"

"

As User Experience Designers…"

…all happening right now"

…always on"

…all integrated"

…always overlapping"

""

But wait… hang on a minute — "now it’s completely different!"

"

And the challenge is that it’s…"

What does this mean for #User Experience Designers?!

“We can’t apply an old model to this new paradigm, and hope to achieve the

same, or greater success”"

"

Some examples #of new approaches…!

Rapid Prototyping !Moving Beyond Wireframes!"

Research > Strategy > Wireframes > Comps > Code"

The case FOR wireframes"

On rollover, show dropdown menu!

The case AGAINST wireframes"

The Pros & Cons of Wireframes"

! " Page layout & structure!! " Content modules!! " Lead to functional specs!! " Help creative

development!! " Easy to make!

$" Static – not interactive!$" Not intuitive – di%cult to

understand!$" Hard to show user paths!$" Version control!$" Hard to test!$" Require a lot of “vision”!

Flat wireframes are outdated in today’s more complex and interactive landscape!

User experience decisions are sometimes made by people without a full understanding of the issues !

Work gets judged on visual design while interactivity and functionality is overlooked !

Wireframes just aren’t enough."We need something better."

Prototyping Software"

At Digitas Boston we use Axure!

Other options include Flash, PowerPoint, iRise, InDesign, etc.!

Rapid Prototyping’s Advantages"

Flat Wireframes!

Tell!

Static!

Artifact!

Dense!

Prototypes!

Show!

Interactive!

Living

Document!

Intuitive!

So let’s stop TELLING and start SHOWING!"

Getting the most out of prototyping"

•"Be interactive from the start!•" Focus on flows!•" Fake it when data is involved!•"Accept limitations!•"Talk to your tech team!•"Add color to show interactive areas!•"A little bling goes a long way!