Designing for Success with Client Involvement

Web Design Isn’t Geing Easier Thanks to RWD

DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT

VP OF DESIGN, HAPPY COG@CCASHDOLLAR

@CCASHDOLLAR DESIGNING FOR SUCCESS WITH CLIENT INVOLVEMENT WHARTON WEB CONFERENCE 2014


(What RWD Feels Like.)


Q: Who has been or is currently involved in designing RWD web experiences?


Q: What are the common hurdles you’ve stumbled over?


Repeat aster me:

It’s ok to not know everything. It’s ok to say “I don’t know right now but I’ll find out.”


CommonChallenges


Q: How do we best demonstrate and validate design intent?


Q: How to crast an extensible, maintainable design system?


Q: How to navigate the design approval process?


Your design solution is onlyas strong as your abili to communicate its merits.


Always be closingeducating.


Look at your client relationship.


Understand your stakeholders and their roles.George Bluth Sr. President Project Owner, Design Sign-off,

Stakeholder Interview

Michael Bluth Project Manager Daily Contact

George “GOB” Bluth, Jr. Sales Stakeholder Interview

Lucille Bluth Creative Director Design Sign-off, Stakeholder Inteview


RACI

esponsibleccountableonsultednformed


Pair up...


...and create a common language.

“


You need to hear a word seven times to absorb it.”

—Señora Foxall, 9th Grade Spanish Teacher, 1992


Strictly Adhere

Be a Radical Departure

In relationship to the current aesthetic, the new design should...

Language: Design Characteristics

1 2 3 4 5 6 7 8 9 10


Strictly Adhere




1 2 3 4 5 6 7 8 9 10

Your Score


Strictly Adhere




1 2 3 4 5 6 7 8 9 10

Client Score


Strictly Adhere




1 2 3 4 5 6 7 8 9 10Gap in Understanding

Your Score Client Score


Weak and Forgeable

Memorable and Compelling

Hogwarts School of Witchcrast and Wizardry

Language: Design Benchmarking

1 2 3 4 5


Weak and Forgeable



1 2 3 4 5

Your Score



Weak and Forgeable



1 2 3 4 5

Your ScoreClient Score



Weak and Forgeable



1 2 3 4 5

Your ScoreClient Score

Discuss why.



Feature Importance Viabili

Data visualization with information & graphics

Language: Priori & Feasibili

4 2Rank 1–5





4 2





4 2Later Phase?


Language: Check the Standard Deviation


Document as much as necessary.


Feedback maers. Coach clients on how to provide it.


If the client goes against the strategy...

“


You should initiate a direction conversation with the client regarding why he is contradicting agree-upon standards, and capture the rationale in writing.”

—David Sherwin, Success By Design


Look at your design process.


Get beer, faster, stronger.


hp://charmingbrit.deviantart.com/art/My-Sword-My-Bow-My-Axe-342455709

Find the right balance in your tactics across discipline.

http://charmingbrit.deviantart.com/art/My-Sword-My-Bow-My-Axe-342455709

http://charmingbrit.deviantart.com/art/My-Sword-My-Bow-My-Axe-342455709

Wireframes.


A Faster Horse?


HTML Wireframes; validate thinking.Get approval.


Minimum effective doseartifact

Graphic Design.


Questions to determine tactics:Is the brand established or evolving?

Who owns it?

Is it entirely new?

Who needs to approve it? Do they understand abstraction?


Time The curse of increasing fideli

The Designer As Curatordesignmind.frogdesign.com/blog/the-designer-as-curator.html

Time cost of explaining design ideas

Artifact Fideli


Time

Artifact Fideli


Time cost of demonstrating design-thinking

The curse of increasing fideli


Time

Artifact Fideli

In RWD, taking too much time to make a decision is a risk.



Time

Artifact Fideli


Find the highest amount of consent with the least amount of time spent.


Formulate the process that matches your situation.


Mood Boards


Mood Boards

Helps hone in on emotionGood for stakeholders who are indecisive about brand/identiGood for new brands or brands in flux

Poor at solving anything related to web layout, functionali, UXFamiliari is expected


Sketches


Sketches

Easy to create and easy to iterateGood for geing “big picture” consensus

Poor for stakeholders outside of the project teamDetail is depended on fideli


Sle Boards


Mimics web conventionsMixes brand/identi with UI paerns and contentGood for small teams with web-comfortable stakeholeldersWorks for new or changing brands

Can be misconstruedDoesn’t diagnose experience or functionali

Sle Boards


Full Compositions


Full Compositions

Works for stakeholders of all levelsMost accurate representation outside of codeHints to functionali

Time consumingAssumes the view you design is the most important view


Combine to Crast a Powerful Design Process.


Be Confident &


Look at your final deliverables.


Avoid the big reveal...


..And start thinking “systematic” about design

“


Design depends largely on constraints. Here is one of the few effective keys to the design problem — his willingness and enthusiasm for working within these constraints. Constraints of price, of size, of strength, of balance, of surface, of time and so forth.”

—Charles Eames

Harvard Business Schoolhbs.edu

Sle Guidefor Harvard Business School

This is also called Atomic modular design

paern labpaernlab.io


Gain control by leing go.


Make the rules and set them free.


Everything *Is* Awesome.


Again, Repeat aster me:

We are the trusted consultants and arbiter of best practices. We are educators and designers.


KEY TAKE-AWAYSEducation is a part of being a designer

Don’t be dogmatic about your process and deliverables

RWD is a team effort; work together to build for now and the future


COLOPHONThe peface is Breakers by Kostic Type Foundry. hp://www.myfonts.com/foundry/Kostic/

Icons adapted from a set entitled Lil Pages by Lil Squid on Creative Market: hps://creativemarket.com/lilsquid

RESOURCESThe Designer As Curator by David Sherwin hp://designmind.frogdesign.com/blog/the-designer-as-curator.html

Zurb Foundation hp://foundation.zurb.com/

Paern Lab hp://paernlab.io

HBS Online Sle Guide Paern Lab hp://www.hbs.edu/marketing/web-development/

“Gut Check” Design Exercise hp://goodkickoffmeetings.com/2010/04/the-20-second-gut-test/

http://www.myfonts.com/foundry/Kostic/




https://creativemarket.com/lilsquid

https://creativemarket.com/lilsquid

http://designmind.frogdesign.com/blog/the-designer-as-curator.html




http://foundation.zurb.com/




http://www.hbs.edu/marketing/web-development/




http://goodkickoffmeetings.com/2010/04/the-20-second-gut-test/






Designing for Success with Client Involvement

Design

Transcript of Designing for Success with Client Involvement