make it real: designing with data

Make It RealDesigning With Data

Ben Salinas [email protected]

@bensalinas#MakeItReal

Thursday, May 15, 14

mailto:[email protected]


Integrating real data in your designs is critical to determine its success

Today’s Topic:


Why Design With Real Data?

How to Design With Real Data?


Does this design “work”?Most of our job as designers:


Buying a Broom


Maybe you realize that visual design influences usability...


And maybe you want to make sure the content is representative


Does this design work?Thursday, May 15, 14

But when making a decision, the details are what matters.


Data and Content are the User Experience




= Fake Data= Fake Design= Fake Feedback= Wrong Decisions


Real data will enter the equation eventually.



Our jobs as designers:Organize data into information to enable users to gain knowledge


Understand The DataIn order to tell its story, we need to


Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname

Real Data has a min and max.Design with outliers in mind

Andrei Herasimchuk Dirk Knemeyer Kriengsak Niratpattanasai Tiff BisetKatrina Penruddocked-Longoria Juhan Sonin


Jennifer PatelBen SalinasDirk KnemeyerEric BenoitEmily TwaddellJuhan SoninJonathan FollettAdam PereSarah KaiserSein WooXingjie “Roger” ZhuMichael Bester

Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname Firstname Lastname

Real Data has an average and a distribution

0%

5.00%

10.00%

15.00%

20.00%

25.00%

30.00%

0 2 4 6 8 10 12 14

Distribution of US Surnames

Letters in Surname


Source: http://www.digikey.com/en-US/articles/techzone/2011/jun/water-heaters-find-key-role

Water Heater Usage by Hour and Month

Real Data is cyclicalThursday, May 15, 14

http://www.digikey.com/en-US/articles/techzone/2011/jun/water-heaters-find-key-role

http://www.digikey.com/en-US/articles/techzone/2011/jun/water-heaters-find-key-role

Real data has a story.

Dow Jones Industrial Average 1974 - 2014


Blood Pressure

Glucose

HDL

LDL

Triglycerides

Sleep

Happiness

Weight

Alcohol, Drugs

Environment

Medications

Conditions

Exercise

Nutrition

Waist Circumference

Vaccinations

76

Real data has a story.


It is impossible to evaluate the success of a design if it does not

use real data.


Does this technique work?Thursday, May 15, 14

Pre-Diabetes

Blood PressureGlucose

HDL

LDL

Triglycerides

Sleep

Happiness

Weight

Alcohol, Drugs

Environment

Medications

Conditions

Exercise

Nutrition

Waist Circumference

Vaccinations

HypertensionBlood Pressure

Glucose

HDL

LDL

Triglycerides

Sleep

Happiness

Weight

Alcohol, Drugs

Environment

Medications

Conditions

Exercise

Nutrition

Waist Circumference

Vaccinations

Not all fake data looks fake


But, we need more than just some real data.

Everything has to be realistic.


Is this data representative?Thursday, May 15, 14

Incorporating Data in Your Designs


Rapid “Prototyping” Tools are Flourishing


They allow designers to build interactive prototypes


flashy demos of static designs

They allow designers to build interactive prototypes


http://indigo.infragistics.com/prototype/rove#f=Search

Which flight will you pick?


http://indigo.infragistics.com/prototype/rove#f=Search

Indigo Studio is great! Check out this interactive prototype. It has graphs!

http://indigo.infragistics.com/prototype/worldstats#f=iPad%2FHome&




Except... it isn’t really interactive. Or real.www.bit.ly/1ncfECO


http://www.bit.ly/1ncfECO

http://www.bit.ly/1ncfECO

All of these tools focus on moving images around.

Transitions influence the understanding of a design...

But the content matters more.


Task1. Gathering/Crafting Data2. Understanding the Data3. Designing with the Data

Time~15%~35%~50%


A Simple Project Selection ScreenThursday, May 15, 14

Crazy Foam

3 days ago6 Concepts Locking in 12 days

Name

Number of Concepts

Deadline Last Updated

Image


Num Project Concept @Image Updated Status IsNew3 Concepts Animal Wine AnimalWine_01.png 3 days ago Locking in 15 days l6 Concepts Crazy Foam CrazyFoam_01.png Aug 18, 2012 Locking in 12 days l1 Concept Dentyne Fire Gum Dentyne_01.jpg Oct 12, 2012 Locking in 2 months l1 Concept Five Gum Five_01.jpg Oct 12, 2012 Fielding l4 Concepts Luchador Wine Luchador_01.png Oct 12, 2012 Results ready l1 Concept Nestea Raspberry Nestea_01.png Oct 12, 2012 Results ready l1 Concept R Wine RWine_01.png Oct 12, 2012 Locking in 1 month l1 Concept Stride Stride_01.jpg Oct 12, 2012 Fielding l7 Concepts Trident Splash Refresh TridentSplash_01.jpg Oct 12, 2012 Results ready l1 Concept Trident Watermelon TridentWatermelon_01.jpg Oct 12, 2012 Fielding3 Concepts Trident White TridentWhite_01.jpg Oct 12, 2012 Locking in 5 days1 Concept Twist Gum Twist_01.jpg Oct 12, 2012 Locking in 2 days1 Concept Wrigleys Wrigleys_01.jpg Oct 12, 2012 Locking in 1 month4 Concepts Yellow Blue Wine YellowBlue_01.png Oct 12, 2012 Fielding

Crafting Data


Crafting Data• Name + Image need to align• Deadline - a few will have upcoming

deadlines. A few will have ended. There probably won’t be any with far away deadlines

• Last Updated - Correlation between deadline and last updated

• Number of Concepts - Most projects will have 3-5 concepts.


Same Data - Different DesignThursday, May 15, 14

InDesign DataMerge1. Export as .indd or .png to include in a comp2. Export individual elements as .png to include as content in prototypesUse Layers to create hover states or alternate views of the same content (i.e. deleted view)


Let’s adapt a technique from Forecast.io to work across many cities


Gather weather forecasts for many citiesProcess and cleanse the dataMake a visualization for each city


Chartwell FontThursday, May 15, 14

Does this technique work? What should we change?


ScreenScraper Chrome Extension:Grab structured data from a website

Kimono:Turn a website into an API and do basic crawling

InDesign/Illustrator DataMerge: Drive a design via tabular data

SublimeText:Text Editor with “multi-edit capability”

Chartwell Font:Create charts just by typing numbers


Why Design with Real Data?

Data is the User ExperienceFake data = fake designresults in fake feedbackYour design is going to live and breath real data... eventually


Make It RealDesigning With Data

Ben Salinas [email protected]

@bensalinas#MakeItReal

A Special Thanks to my colleagues at Thursday, May 15, 14



make it real: designing with data

Design

fake data

month real data

data representative

gatheringcrafting data

data time

data ben salinas

real designing

fake design