![Page 1: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/1.jpg)
data-driven designRanjitha Kumar
symposium on frontiers of big data
computer science departmentuniversity of illinois @ urbana-champaign
![Page 2: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/2.jpg)
Experience digital design constantly
Better UX is a competitive advantage
Pay premiums for higher-quality, personalized products
the era of design
Design in Tech Report, KPBC John Maeda, 2016
![Page 3: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/3.jpg)
Tens of billions of dollars spent annually
Decisions based on intuition and HiPPOs
![Page 4: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/4.jpg)
money doesn’t guarantee results
![Page 5: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/5.jpg)
design data is everywhere
![Page 6: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/6.jpg)
design mining: using knowledge discovery and data mining techniques to build
data-driven design tools
![Page 7: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/7.jpg)
the design processIdeation
Creation
Evaluation Iteration
Need-finding
Final Design
![Page 8: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/8.jpg)
scaffold the design process
find inspiration & relevant examples
understand successful patterns and trends
generate new designs
evaluate alternatives
![Page 9: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/9.jpg)
build domain specific systems for capturing data, modeling semantics
web pages mobile apps fashion outfits
![Page 10: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/10.jpg)
design mining the web
![Page 11: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/11.jpg)
Webzeitgeist: Design Mining the Web Kumar et al., CHI `13
webzeitgeist
http://creativecommons.org<a><span id="home-button"></span></a><div id="logo"> <span> Creative Commons </span></div><ul class="nav"> <li class="dropdown"> <span> <a href="#about">Menu</a> <span> <a href="#menu">Menu</a> </span> <span> <a href="#about">About</a> </span> <li class="dropdown"> <a href='#contact"> Contact Us </a>
html
cforms.js//Collapse FunctionsString.prototype.tri function() { return this.replace}
creativecommons.css
topbar #home-button{ position: relative; float: left; display: block; height: 40px; width: 150px;}
cc-logo.png
resourcesdocument object model
#logo
imgbody
span
ul
topbar span { float: left; display: block; height: 40px; width: 150px; cursor: pointer; z-index: 1; top: 0;
}
screenshotvisual segmentation
avgColor: #EF0gistFeatures: aspectRatio: 1.2treeLevel: 3area: 60230numberOfChildren: 5numberOfSiblings: 2numberOfImages: 5freqColor: #EEEnumberOfWords: 32perccentEdgePixels: 0.23leftSidedness : 0.321rightSidedness : 0.2212
derived features
Webzeitgeist: Design Mining the Web Kumar et al., CHI `13
![Page 12: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/12.jpg)
desktop
LOGIN (41147)HEADER (311460) NAV (453952) MENU (523844) SIDEBAR (62302) TWITTER (147632)
header login nav menu sidebar twitter
mobile
![Page 13: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/13.jpg)
design search
![Page 14: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/14.jpg)
![Page 15: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/15.jpg)
![Page 16: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/16.jpg)
track design changes & trends
![Page 17: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/17.jpg)
correlate design with performance
![Page 18: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/18.jpg)
automatic retargeting
Bricolage: Example-Based Retargeting for Web Design
Kumar et al., CHI `11
![Page 19: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/19.jpg)
automatic retargetingcontent style
Bricolage: Example-Based Retargeting for Web Design
Kumar et al., CHI `11
![Page 20: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/20.jpg)
Bricolage: Example-Based Retargeting for Web Design
Kumar et al., CHI `11
![Page 21: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/21.jpg)
![Page 22: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/22.jpg)
![Page 23: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/23.jpg)
interaction mining for mobile apps
![Page 24: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/24.jpg)
erica
ui hierarchy
screenshot
user interaction
app + user
connect views with interactions
extract element properties
x: 0.9y: 0.81resource-id: location_buttonclicked: true
user interaction trace
…
with Biplab Deka and Zifeng (Forrest) Huang UIST 2016
![Page 25: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/25.jpg)
with Biplab Deka and Zifeng (Forrest) Huang UIST 2016
![Page 26: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/26.jpg)
flow patternsadding
Gallery VaultYummly
“create”, “add”Evernote
with Biplab Deka and Zifeng (Forrest) Huang UIST 2016
![Page 27: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/27.jpg)
Beep’nGo
YouCam PerfectGoogle Drive
onboarding
“Tutorial”, “Skip”, “Get Started”
Android ViewPager
flow patterns
with Biplab Deka and Zifeng (Forrest) Huang UIST 2016
![Page 28: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/28.jpg)
with Biplab Deka and Zifeng (Forrest) Huang UIST 2016
23 flow classes, >3000 examples
we identified and indexed more than 3000 flow examples, and released the largest online search engine of user flows in Android apps.
![Page 29: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/29.jpg)
testing and generating ui layoutsScreenshot
XML
usability issues reverse engineeringwith Biplab Deka and Zifeng (Forrest) Huang
UIST 2016
![Page 30: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/30.jpg)
style mining for fashion outfits
![Page 31: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/31.jpg)
mining polyvoreHappy Valentine’s DayHappy Valentine’s Day! Have a nice time with your boyfriends, and don’t forget about people who are alone (like me). The next few days will be in tones of romance, couples, blush colors. Have a nice weekend! Send warm hugs and love. #valentinesday #personalstyle #sweaterweather
Red cardigan,Long sleeve tops,Mango tops
Short sleeve shirts,White t shirt,Lightweight shirt,Mango shirt
Stack heel shoes,Oxford shoes
Retro sunglasses,Heart sunglasses,Hippie glasses
with Kristen Vaccaro and Karrie Karahalios UIST 2016
![Page 32: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/32.jpg)
mining polyvoreHappy Valentine’s DayHappy Valentine’s Day! Have a nice time with your boyfriends, and don’t forget about people who are alone (like me). The next few days will be in tones of romance, couples, blush colors. Have a nice weekend! Send warm hugs and love. #valentinesday #personalstyle #sweaterweather
Red cardigan,Long sleeve tops,Mango tops
Short sleeve shirts,White t shirt,Lightweight shirt,Mango shirt
Stack heel shoes,Oxford shoes
Retro sunglasses,Heart sunglasses,Hippie glasses
with Kristen Vaccaro and Karrie Karahalios UIST 2016
happy, love, hugs blush, valentines
boyfriends, warm couples, romance
alone, weekend valentinesday personalstyle
sweaterweather
STYLE
red, short, sleeve shirts, white, tshirt
mango, oxford lightweight, stack tops, heel, shoes
sunglasses, heart cardigan, long
ELEMENT
![Page 33: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/33.jpg)
polylingual topic models
with Kristen Vaccaro and Karrie Karahalios UIST 2016
![Page 34: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/34.jpg)
polylingual topic models
STYLEprom, occasion, special, party, holiday, bridesmaid
ELEMENTdress, shoe, cocktail, evening, mini, heel, costume
1
STYLEparty, summer, night, sexy, vintage, fitting, botanical
ELEMENTdress, mini, sleeveless, cocktail, skater, flare, out, lace, floral
2
topic distribution
STYLEbiker, motorcycle, vintage, summer, college, varsity, military
ELEMENTjacket, black, leather, shirt, zip, denim, sleeve, faux
2
STYLEsummer, vintage, beach, american, relaxed, retro, unisex
ELEMENTshort, denim, highwaisted, shirt, top, cutoff, form, distressed
1
topic distribution
with Kristen Vaccaro and Karrie Karahalios UIST 2016
![Page 35: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/35.jpg)
style quiz
with Kristen Vaccaro and Karrie Karahalios UIST 2016
beachsummerswimmingbathingsexyretrogetawayfishing
triangle bathing suit swimsuit swimone-piece whiteslimming leatherwedge platform ankle-strap peep-toe sandalred knot silkhead-wrap headband polka-dotdolce&gabbana cat-eye roundsunglasses white
user input top styleselements
![Page 36: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/36.jpg)
style quiz
with Kristen Vaccaro and Karrie Karahalios UIST 2016
urban outfitterssummer topscotton shirts wrapskirt high low navytie-dye purplesummer billabongbeach bag hippieretro bagpackprint day pack boho jewelry bohemian ropebracelet leathercord
bohobohemiansummervintageholidaypartywetsexy
user input top styleselements
![Page 37: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/37.jpg)
style quiz
with Kristen Vaccaro and Karrie Karahalios UIST 2016
partysexyweddingnightspecialoccasionrealrealseason
t-shirt purple shirt cap sexy balconette mesh strappy lingerie short pleated skirt man bag pink loius vuitton purse white shoe leather t-strap platform pump pointed-toe high-heel
user input top styleselements
![Page 38: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/38.jpg)
automated personal stylist
with Kristen Vaccaro and Karrie Karahalios UIST 2016
“
”
I’m in town for New York Fashion Week and I’d like to find something flashy, maybe a little funky, to wear to the shows. You know everyone’s out, watching the different groups, the runway-to-street crowd, the blogger-style crowd… Me, I’m more of a streetstyle, streetchic person. Just edgy enough, you know?
nyfwfunkfunkystreetfashionrunway2streetrunwayedgyflashystreetstylestreetchicbloggerstyle
user input top itemsstyle
![Page 39: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/39.jpg)
automated personal stylist
with Kristen Vaccaro and Karrie Karahalios UIST 2016
“
”
I need some clothes for a yoga retreat I’m doing next month. We’ll be up in the mountains in Colorado, enjoying the calming natural beauty. It is so beautiful up there in nature… and we’ll be running, doing yoga all day, sweating and finding zen...
yogaactivewearfitnesszencalmingcalm naturenaturalbeautyrunningathleticjoggingcoloradoretreatsweat
user input top itemsstyle
![Page 40: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/40.jpg)
automated personal stylist
with Kristen Vaccaro and Karrie Karahalios UIST 2016
“
”
I need an outfit for a beach wedding that I'm going to early this summer. I'm so excited -- it's going to be warm and exotic and tropical... I want my outfit to look effortless, breezy, flowy, like I’m floating over the sand! Oh, and obviously no white! For a tropical spot, I think my outfit should be bright and colorful.
beachweddingsummertropicalexoticeffortlessbreezyglowingradiantfloatingflowywarmbrightcolorful
user input top itemsstyle
![Page 41: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/41.jpg)
considerations
![Page 42: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/42.jpg)
big data?
40 Moutfits
10 Minterior designs
![Page 43: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/43.jpg)
big data?
40 Moutfits
10 Minterior designs
27 bnwords
1,000 bnphotos
![Page 44: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/44.jpg)
data streams in design
![Page 45: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/45.jpg)
Text, Images, Video, Audio
data streams in design
![Page 46: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/46.jpg)
Text, Images, Video, Audio
Human Interaction
data streams in design
![Page 47: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/47.jpg)
Text, Images, Video, Audio
Human Interaction
Structure
data streams in design
#logo
imgbody
span
ul
topbar span { float: left; display: block; height: 40px; width: 150px; cursor: pointer; z-index: 1; top: 0;
}
![Page 48: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/48.jpg)
Text, Images, Video, Audio
Human Interaction
Structure
Network Connectivity
data streams in design
![Page 49: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/49.jpg)
Text, Images, Video, Audio
Human Interaction
Structure
Network Connectivity
History
data streams in design
![Page 50: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/50.jpg)
Text, Images, Video, Audio
Human Interaction
Structure
Network Connectivity
History
Performance
data streams in design
conversion
bounce rate
time on site
pages per user
…
![Page 51: Ranjitha Kumar symposium on frontiers of big data](https://reader034.vdocuments.us/reader034/viewer/2022051716/58a1a7401a28abab478b97bc/html5/thumbnails/51.jpg)
ranjithakumar.net