Make It RealDesigning With Data
Ben Salinas [email protected]
@bensalinas#MakeItReal
Thursday, May 15, 14
Integrating real data in your designs is critical to determine its success
Today’s Topic:
Thursday, May 15, 14
Why Design With Real Data?
= Fake Data= Fake Design= Fake Feedback= Wrong Decisions
Thursday, May 15, 14
Our jobs as designers:Organize data into information to enable users to gain knowledge
Thursday, May 15, 14
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
Thursday, May 15, 14
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
Thursday, May 15, 14
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
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.
Thursday, May 15, 14
It is impossible to evaluate the success of a design if it does not
use real data.
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
Thursday, May 15, 14
flashy demos of static designs
They allow designers to build interactive prototypes
Thursday, May 15, 14
http://indigo.infragistics.com/prototype/rove#f=Search
Which flight will you pick?
Thursday, May 15, 14
Indigo Studio is great! Check out this interactive prototype. It has graphs!
http://indigo.infragistics.com/prototype/worldstats#f=iPad%2FHome&
Thursday, May 15, 14
Except... it isn’t really interactive. Or real.www.bit.ly/1ncfECO
Thursday, May 15, 14
All of these tools focus on moving images around.
Transitions influence the understanding of a design...
But the content matters more.
Thursday, May 15, 14
Task1. Gathering/Crafting Data2. Understanding the Data3. Designing with the Data
Time~15%~35%~50%
Thursday, May 15, 14
Crazy Foam
3 days ago6 Concepts Locking in 12 days
Name
Number of Concepts
Deadline Last Updated
Image
Thursday, May 15, 14
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
Thursday, May 15, 14
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.
Thursday, 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)
Thursday, May 15, 14
Gather weather forecasts for many citiesProcess and cleanse the dataMake a visualization for each city
Thursday, May 15, 14
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
Thursday, May 15, 14
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
Thursday, May 15, 14
Make It RealDesigning With Data
Ben Salinas [email protected]
@bensalinas#MakeItReal
A Special Thanks to my colleagues at Thursday, May 15, 14