Make It Real
Designing With Data
Ben Salinas
ben@goinvo.com
@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?
How to Design With Real Data?
Thursday, May 15, 14
Does this design “work”?
Most of our job as designers:
Thursday, May 15, 14
Buying a Broom
Thursday, May 15, 14
Thursday, May 15, 14
Maybe you realize that visual design
influences usability...
Thursday, May 15, 14
And maybe you want to make sure the
content is representative
Thursday, May 15, 14
Does this design work?
Thursday, May 15, 14
But when making a decision, the details are
what matters.
Thursday, May 15, 14
Data and Content
are the User Experience
Why Design With Real Data?
Thursday, May 15, 14
Why Design With Real Data?
= Fake Data
= Fake Design
= Fake Feedback
= Wrong Decisions
Thursday, May 15, 14
Real data will enter the
equation eventually.
Why Design With Real Data?
Thursday, May 15, 14
Our jobs as designers:
Organize data
into information
to enable users to gain knowledge
Thursday, May 15, 14
Understand The Data
In order to tell its story, we need to
Thursday, May 15, 14
Firstname Lastname
Firstname Lastname
Firstname Lastname
Firstname Lastname
Firstname Lastname
Firstname Lastname
Real Dat...
Jennifer Patel
Ben Salinas
Dirk Knemeyer
Eric Benoit
Emily Twaddell
Juhan Sonin
Jonathan Follett
Adam Pere
Sarah Kaiser
Se...
Source: http://www.digikey.com/en-US/articles/techzone/2011/jun/water-heaters-find-key-role
Water Heater Usage by Hour and ...
Real data has a story.
Dow Jones Industrial Average 1974 - 2014
Thursday, May 15, 14
Blood Pressure
Glucose
HDL
LDL
Triglycerides
Sleep
Happiness
Weight
Alcohol, Drugs
Environment
Medications
Conditions
Exer...
It is impossible to
evaluate the success of
a design if it does not
use real data.
Thursday, May 15, 14
Does this technique work?
Thursday, May 15, 14
Pre-Diabetes
Blood Pressure
Glucose
HDL
LDL
Triglycerides
Sleep
Happiness
Weight
Alcohol, Drugs
Environment
Medications
Co...
But, we need more than just some real data.
Everything has to be realistic.
Thursday, May 15, 14
Thursday, May 15, 14
Thursday, May 15, 14
Thursday, May 15, 14
Thursday, May 15, 14
Thursday, May 15, 14
Thursday, May 15, 14
Is this data representative?
Thursday, May 15, 14
Incorporating Data in
Your Designs
Thursday, May 15, 14
Rapid “Prototyping” Tools are Flourishing
Thursday, May 15, 14
They allow designers to build
interactive prototypes
Thursday, May 15, 14
They allow designers to build
interactive prototypes
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/worl...
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 ma...
Task
1. Gathering/Crafting Data
2. Understanding the Data
3. Designing with the Data
Time
~15%
~35%
~50%
Thursday, May 15,...
A Simple Project Selection Screen
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 IsNew
3 Concepts Animal Wine AnimalWine_01.png 3 days ago Locking in 15 days l
6...
Crafting Data
• Name + Image need to align
• Deadline - a few will have upcoming
deadlines. A few will have ended. There
p...
Same Data - Different Design
Thursday, May 15, 14
InDesign DataMerge
1. Export as .indd or .png to include in a
comp
2. Export individual elements as .png to
include as con...
Let’s adapt a technique from
Forecast.io to work across many cities
Thursday, May 15, 14
Gather weather forecasts for many cities
Process and cleanse the data
Make a visualization for each city
Thursday, May 15,...
Chartwell Font
Thursday, May 15, 14
Does this technique work?
What should we change?
Thursday, May 15, 14
ScreenScraper Chrome Extension:
Grab structured data from a website
Kimono:
Turn a website into an API and do basic crawli...
Why Design with Real Data?
Data is the User Experience
Fake data = fake design
results in fake feedback
Your design is goi...
Make It Real
Designing With Data
Ben Salinas
ben@goinvo.com
@bensalinas
#MakeItReal
A Special Thanks to my colleagues at
T...
Upcoming SlideShare
Loading in …5
×

Make it Real: Designing with Data

1,424 views

Published on

Ben Salinas' presentation from the UXPA Boston 2014 Conference

Published in: Design, Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,424
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Make it Real: Designing with Data

  1. 1. Make It Real Designing With Data Ben Salinas ben@goinvo.com @bensalinas #MakeItReal Thursday, May 15, 14
  2. 2. Integrating real data in your designs is critical to determine its success Today’s Topic: Thursday, May 15, 14
  3. 3. Why Design With Real Data? How to Design With Real Data? Thursday, May 15, 14
  4. 4. Does this design “work”? Most of our job as designers: Thursday, May 15, 14
  5. 5. Buying a Broom Thursday, May 15, 14
  6. 6. Thursday, May 15, 14
  7. 7. Maybe you realize that visual design influences usability... Thursday, May 15, 14
  8. 8. And maybe you want to make sure the content is representative Thursday, May 15, 14
  9. 9. Does this design work? Thursday, May 15, 14
  10. 10. But when making a decision, the details are what matters. Thursday, May 15, 14
  11. 11. Data and Content are the User Experience Why Design With Real Data? Thursday, May 15, 14
  12. 12. Why Design With Real Data? = Fake Data = Fake Design = Fake Feedback = Wrong Decisions Thursday, May 15, 14
  13. 13. Real data will enter the equation eventually. Why Design With Real Data? Thursday, May 15, 14
  14. 14. Our jobs as designers: Organize data into information to enable users to gain knowledge Thursday, May 15, 14
  15. 15. Understand The Data In order to tell its story, we need to Thursday, May 15, 14
  16. 16. 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 Biset Katrina Penruddocked-Longoria Juhan Sonin Thursday, May 15, 14
  17. 17. Jennifer Patel Ben Salinas Dirk Knemeyer Eric Benoit Emily Twaddell Juhan Sonin Jonathan Follett Adam Pere Sarah Kaiser Sein Woo Xingjie “Roger” Zhu Michael 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
  18. 18. 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 cyclical Thursday, May 15, 14
  19. 19. Real data has a story. Dow Jones Industrial Average 1974 - 2014 Thursday, May 15, 14
  20. 20. 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
  21. 21. It is impossible to evaluate the success of a design if it does not use real data. Thursday, May 15, 14
  22. 22. Does this technique work? Thursday, May 15, 14
  23. 23. Pre-Diabetes Blood Pressure Glucose HDL LDL Triglycerides Sleep Happiness Weight Alcohol, Drugs Environment Medications Conditions Exercise Nutrition Waist Circumference Vaccinations Hypertension Blood 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
  24. 24. But, we need more than just some real data. Everything has to be realistic. Thursday, May 15, 14
  25. 25. Thursday, May 15, 14
  26. 26. Thursday, May 15, 14
  27. 27. Thursday, May 15, 14
  28. 28. Thursday, May 15, 14
  29. 29. Thursday, May 15, 14
  30. 30. Thursday, May 15, 14
  31. 31. Is this data representative? Thursday, May 15, 14
  32. 32. Incorporating Data in Your Designs Thursday, May 15, 14
  33. 33. Rapid “Prototyping” Tools are Flourishing Thursday, May 15, 14
  34. 34. They allow designers to build interactive prototypes Thursday, May 15, 14
  35. 35. They allow designers to build interactive prototypes Thursday, May 15, 14
  36. 36. flashy demos of static designs They allow designers to build interactive prototypes Thursday, May 15, 14
  37. 37. http://indigo.infragistics.com/prototype/rove#f=Search Which flight will you pick? Thursday, May 15, 14
  38. 38. 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
  39. 39. Except... it isn’t really interactive. Or real. www.bit.ly/1ncfECO Thursday, May 15, 14
  40. 40. 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
  41. 41. Task 1. Gathering/Crafting Data 2. Understanding the Data 3. Designing with the Data Time ~15% ~35% ~50% Thursday, May 15, 14
  42. 42. A Simple Project Selection Screen Thursday, May 15, 14
  43. 43. Crazy Foam 3 days ago6 Concepts Locking in 12 days Name Number of Concepts Deadline Last Updated Image Thursday, May 15, 14
  44. 44. Num Project Concept @Image Updated Status IsNew 3 Concepts Animal Wine AnimalWine_01.png 3 days ago Locking in 15 days l 6 Concepts Crazy Foam CrazyFoam_01.png Aug 18, 2012 Locking in 12 days l 1 Concept Dentyne Fire Gum Dentyne_01.jpg Oct 12, 2012 Locking in 2 months l 1 Concept Five Gum Five_01.jpg Oct 12, 2012 Fielding l 4 Concepts Luchador Wine Luchador_01.png Oct 12, 2012 Results ready l 1 Concept Nestea Raspberry Nestea_01.png Oct 12, 2012 Results ready l 1 Concept R Wine RWine_01.png Oct 12, 2012 Locking in 1 month l 1 Concept Stride Stride_01.jpg Oct 12, 2012 Fielding l 7 Concepts Trident Splash Refresh TridentSplash_01.jpg Oct 12, 2012 Results ready l 1 Concept Trident Watermelon TridentWatermelon_01.jpg Oct 12, 2012 Fielding 3 Concepts Trident White TridentWhite_01.jpg Oct 12, 2012 Locking in 5 days 1 Concept Twist Gum Twist_01.jpg Oct 12, 2012 Locking in 2 days 1 Concept Wrigleys Wrigleys_01.jpg Oct 12, 2012 Locking in 1 month 4 Concepts Yellow Blue Wine YellowBlue_01.png Oct 12, 2012 Fielding Crafting Data Thursday, May 15, 14
  45. 45. 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
  46. 46. Same Data - Different Design Thursday, May 15, 14
  47. 47. InDesign DataMerge 1. Export as .indd or .png to include in a comp 2. Export individual elements as .png to include as content in prototypes Use Layers to create hover states or alternate views of the same content (i.e. deleted view) Thursday, May 15, 14
  48. 48. Let’s adapt a technique from Forecast.io to work across many cities Thursday, May 15, 14
  49. 49. Gather weather forecasts for many cities Process and cleanse the data Make a visualization for each city Thursday, May 15, 14
  50. 50. Chartwell Font Thursday, May 15, 14
  51. 51. Does this technique work? What should we change? Thursday, May 15, 14
  52. 52. 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
  53. 53. Why Design with Real Data? Data is the User Experience Fake data = fake design results in fake feedback Your design is going to live and breath real data... eventually Thursday, May 15, 14
  54. 54. Make It Real Designing With Data Ben Salinas ben@goinvo.com @bensalinas #MakeItReal A Special Thanks to my colleagues at Thursday, May 15, 14

×