Ben Salinas' presentation from the UXPA Boston 2014 Conference

1. Make It Real
Designing With Data
Ben Salinas
ben@goinvo.com
@bensalinas
#MakeItReal
Thursday, May 15, 14

2. Integrating real data in
your designs is critical to
determine its success
Today’s Topic:
Thursday, May 15, 14

3. Why Design With Real Data?
How to Design With Real Data?
Thursday, May 15, 14

4. Does this design “work”?
Most of our job as designers:
Thursday, May 15, 14

5. Buying a Broom
Thursday, May 15, 14

6. Thursday, May 15, 14

7. Maybe you realize that visual design
influences usability...
Thursday, May 15, 14

8. And maybe you want to make sure the
content is representative
Thursday, May 15, 14

9. Does this design work?
Thursday, May 15, 14

10. But when making a decision, the details are
what matters.
Thursday, May 15, 14

11. Data and Content
are the User Experience
Why Design With Real Data?
Thursday, May 15, 14

12. Why Design With Real Data?
= Fake Data
= Fake Design
= Fake Feedback
= Wrong Decisions
Thursday, May 15, 14

13. Real data will enter the
equation eventually.
Why Design With Real Data?
Thursday, May 15, 14

14. Our jobs as designers:
Organize data
into information
to enable users to gain knowledge
Thursday, May 15, 14

15. Understand The Data
In order to tell its story, we need to
Thursday, May 15, 14

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. 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. 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. Real data has a story.
Dow Jones Industrial Average 1974 - 2014
Thursday, May 15, 14

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. It is impossible to
evaluate the success of
a design if it does not
use real data.
Thursday, May 15, 14

22. Does this technique work?
Thursday, May 15, 14

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. But, we need more than just some real data.
Everything has to be realistic.
Thursday, May 15, 14

25. Thursday, May 15, 14

26. Thursday, May 15, 14

27. Thursday, May 15, 14

28. Thursday, May 15, 14

29. Thursday, May 15, 14

30. Thursday, May 15, 14

31. Is this data representative?
Thursday, May 15, 14

32. Incorporating Data in
Your Designs
Thursday, May 15, 14

33. Rapid “Prototyping” Tools are Flourishing
Thursday, May 15, 14

34. They allow designers to build
interactive prototypes
Thursday, May 15, 14

35. They allow designers to build
interactive prototypes
Thursday, May 15, 14

36. flashy demos of static designs
They allow designers to build
interactive prototypes
Thursday, May 15, 14

37. http://indigo.infragistics.com/prototype/rove#f=Search
Which flight will you pick?
Thursday, May 15, 14

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. Except... it isn’t really interactive. Or
real.
www.bit.ly/1ncfECO
Thursday, May 15, 14

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. Task
1. Gathering/Crafting Data
2. Understanding the Data
3. Designing with the Data
Time
~15%
~35%
~50%
Thursday, May 15, 14

42. A Simple Project Selection Screen
Thursday, May 15, 14

43. Crazy Foam
3 days ago6 Concepts
Locking in 12 days
Name
Number of
Concepts
Deadline Last Updated
Image
Thursday, May 15, 14

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. 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. Same Data - Different Design
Thursday, May 15, 14

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. Let’s adapt a technique from
Forecast.io to work across many cities
Thursday, May 15, 14

49. Gather weather forecasts for many cities
Process and cleanse the data
Make a visualization for each city
Thursday, May 15, 14

50. Chartwell Font
Thursday, May 15, 14

51. Does this technique work?
What should we change?
Thursday, May 15, 14

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. 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. Make It Real
Designing With Data
Ben Salinas
ben@goinvo.com
@bensalinas
#MakeItReal
A Special Thanks to my colleagues at
Thursday, May 15, 14