how to trim your design and keep it healthy

➔ www.steria.no

trim your designKEEP IT HEALTHYFrom a large corporation viewpoint, this session looks atthe steps towards creating a consistent and efficient design

and

How to

➔ www.steria.noHow to trim your design and keep it healthy

@jflusund@jflusund

The steps towards creating a consistent and efficient design

Flickr - Ruth Hartnup

DESIGNre-usable

DESIGN IS MORE CONSISTENT AND

re-usable

intuitive

We are not designing pages, we are designing systems of components.

-Stephen Hay, from Brad Frost´s blog post on Atomic design June 10, 2013.

Flickr - Ruth Hartnup

THE MAINchallenge...THE MAINchallenge...

TO KEEP THE DESIGN SYSTEM HEALTHY,

DUPLICATE DESIGNSDUPLICATE CODE HARMING PERFORMANCEINCONSISTENT USER INTERFACE

used and maintained

The main challenge:

Creating the design system

DEVELOP

MOTIVATE

Be clear on challenges and benefits

Flickr - John Jordan

Content:

Needs matrixCommon goals

Challenges

Activities:

interview stakeholdersDeveloper meetupsDesigner meetups

TIMEAWARENESS

CORRECT USECONNECTIONSIDENTIFYING

challenges

TIMEAWARENESS

CORRECT USECONNECTIONSIDENTIFYING

challenges

TIMEAWARENESS

CORRECT USECONNECTIONSIDENTIFYING

challenges

TIMEAWARENESS

CORRECT USECONNECTIONSIDENTIFYING

challenges

TIMEAWARENESS

CORRECT USECONNECTIONSIDENTIFYING

challenges

TIMEAWARENESS

CORRECT USECONNECTIONSIDENTIFYING

challenges

Needs & benefitsmatrix

Communication

Customers Creators Managers

Operationalefficiency

Usability &Performance

TTM

healthy design faster is the sweetspot

OPERATIONALEFFICIENCY

creators

customersmanagersUSABILITY

PERFORMANCETTM

from LO-FI to launch

DESIGN IS MORE CONSISTENT AND

re-usable

intuitive+ improves performance

+ less cognitive load

If I have learnt anything from working in large distributed teams, it's that communication is key.

- Paul Robert Lloyd

Creating the design system

MOTIVATE

DEVELOP

adapt the content to fit your needs...

Content:

CSS conventionsDesign rationale

Vector archiveDesign Chunks

Activities:

Developer/designer pairingDesigner DaysDesign studioDesign Critique

Develop

DESIGN SYSTEM STRATEGY

code structure design strategy

Teacher designed by gb from the Noun Project

DESIGNER DAYS

.play

DESIGN STUDIODESIGN CRITIQUE

Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan.

-Eliel Saarinen

A beautiful design system is about finding the same balance of consistency and variety. Too systematic and the design becomes predictableand repetitive. Too much variation and the system is confusing and overwhelming.

-Allison Wagner

Integrating thedesign system.

MOTIVATE

DEVELOP

STICKmake it

Content:

Present new Design ChunksShow new Design resultsShare the Design System

Train new users

Activities:

PresentationsMeetups Designer DaysVideo conferences

Document and integrate the process of iterating on designs.

MOTIVATE

DEVELOP

STICK

REPEATABLEmake it

make it

Flickr - Lesley Fryer

Content:

Findings from revisionsChanges in trends and business

Usability findingsEmerging trends and needs

Activities:

Measure progression in design revisionsDesign ManagmentIdentify re-usable chunksIterate on design chunks

Flickr - Jasmin Hussain

ON DESIGN CHUNKSITERATEON DESIGN CHUNKSITERATE

OptimizeDevelop

Make it stick

Optimize based on feedback

MOTIVATE

DEVELOP

STICK

REPEATABLE

OPTIMIZEmake it

make it

5 10 7

Content:

ChallengesNeedsGoals

Activities:

Collect feedbackAdjust strategy and process Designer meetups focus groups with developers

The 5 steps towardscreating a consistentand healthy design

MOTIVATE

DEVELOP

STICK

REPEATABLE

OPTIMIZEmake it

make it

@jflusundwww.steria.no

Thanks!