Netflix-O-Matic is our very first project to go public. Woo! Strictly speaking, the project began very informally in December last year, but really came to a head just yesterday, when Frankie Roberto, Dan Williams and I built the front end for it. In a day. That was satisfying, and the form part in our name, which is so important otherwise you’re just waving your hands about.
I’ve planted a flag in the sand with Good, Form & Spectacle. It’s declaring my territory of interest in the world of cultural heritage. To me, that’s a helpful constraint and context for work-making (libraries, museums, archives), but also a juicy remit (save world, support open data, promote open access, help the humans, etc). It might be slightly odd to call Netflix-O-Matic a cultural heritage project, but let me explain why I think it is.
- Netflix is a repository of objects that happen to be movies
- Each movie has a bunch of metadata about it (directors, actors, genres etc)
- Movies are collected together in genres and their variants (Slapstick Comedies; Feel-Good Slapstick Comedies). (Alexis Madrigal wrote an interesting article in The Atlantic Monthly about How Netflix Reverse-Engineered Hollywood, well worth a read. His work in December actually spurred my interest in making something with Netflix genres.)
This sounds a bit like a library. It’s a library.
It’s a bit hard to find new movies to watch using the default Netflix UI, or at least it is for me. None of this entertaining ‘micro genres’ are exposed, and it’s tricksy to engage when you just sort of feel like watching something slapstick-y but you don’t know what yet. When you feel like that, you need to ‘wander the stacks,’ and wait until something pops out at you. That’s the feeling that Netflix-O-Matic is trying to respond to. A search box isn’t great when you feel like that. This toy is about trying to remove that particular ‘I don’t know what I want’ cognitive load entirely, and get people moving in the content as quickly as possible.
I enjoy designing bone simple, clicky clicky, lie back-type interfaces, particularly to look around giant datasets. I mean, we can all read a spreadsheet, I guess, but I like to throw in some randomness, and intentionally make it so people might not remember how they got to where they are.
In the case of the fantastic Netflix genres, I knew pretty early on that I wanted to play with the idea of compounding and splitting them in the UI. Often with faceted search, you’re just drilling, drilling, drilling, and it’s difficult to move sideways, across a search. In this UI, you can either split out into a component of a genre, or drill into the full genre listing. The UI isn’t perfect, but hopefully functional.
Click on a single element, in this case, Australian:
Or the whole genre, Australian Dramas Based on Contemporary Literature:
To help people use the split / sideways movement effectively, we spent quite a bit of time yesterday (mostly Frankie) configuring some regular expressions, or regex. That makes it so you can click on some phrases that make more sense to us than single words. Some examples are kung fu or hopeless romantics or hong kong or based on books or the old classic featuring a strong female lead. Both Frankie and I felt that we could have made the regex file about ten times as detailed, but, we wanted to release the thing in a single day and be done with it.
You can sort of get the gist of some of the others here, in the regex code:
def words name.scan(/(?: (?:from\sthe\s[\d]+s) | (?:\sby\s[^\s]+\s[^\s]+) | (?:for\sages\s[\d]+\sto\s[\d]+) | (?:about\s(?:Trucks,\sTrains\s&\sPlanes|[^\s]+\s\&\s[^\s]+|[^\s]+)) | (?:(?:(?:directed|created)\sby|starring)\s[^\s]+(?:\s[^\s]+)*) | (?:[^\s]+\s\&\s[^\s]+) | (?:on\sBlu\-ray) | (?:set\sin\s(?:the\s)?[^\s]+(?:\s(?:Times|Era|Ages|America))?) | (?:Kids'\sTV) | (?:(?:North|East|South|West|Southeast)\s[^\s]+) | (?:Kung\sFu) | (?:Hidden\s[^\s]+) | (?:Best\s[^\s]+) | (?:for\sHopeless\sRomantics) | (?:Road\sTrip) | (?:Golden\sGlobe) | (?:[Ff]eaturing\s(?:a\s)?(?:[Ss]trong\s)?(?:[Ff]emale\s)?[^\s]+) | (?:Film\sFestival) | (?:[\d]+th\s[^\s]+) | (?:Hong\sKong) | (?:Fairy\sTales?) | (?:based\son\s (?:a\s)? (?:[Rr]eal\s)? [^\s]+ (?:\s(?:[Bb]books|[Ll]iterature|[Gg]ame))? (?:\sby\s[^\s]+(?:\s[A-Z][^\s]+)*)? ) | (?:[^\s]+) )/x) end
Making exploratory interfaces without a search box is useful for me because it helps me think through how to explore. If we'd wanted to take more time, to really embellish this toy we'd probably add one... I can definitely see some kind of auto-complete being useful. It's a useful exercise to think through what Dan called the mental model of the UI without a search too. It makes exploring the data feel a bit more organic, or kaleidoscopic or something. It definitely also helps you come across stuff you'd never search for, and I really enjoy that sensation. You're guided instead by words that appeal to you (in this case), and they expose the filigree in the system without you having to do much work.
Skills / Tools
I'd guess that, over the course of about ten months, the total time my collaborators and I would have work would probably only be about two weeks total effort. It's a bit of a guess, but I don't think it's much more than that. Frankie, Dan and I built the front end in a day, yesterday, which was great fun. That moment when you start seeing actual data in your designs is always a thrill.
If you had to describe the team - me, Frankie, Dan, Nick and Paul - it's a mötley crüe of UX design, ops, web crawling, DBA-ish, programmer-y something something. We mostly did research, scraping, emailing across the USA, planning, designs, data munging, Heroku/Ruby/Postgres setup, front-end development, tweaking, and a bit of publicity at the end. I also made use of a handy responsive CSS library called Skeleton and implemented it yesterday in about 15 minutes.
Working in Public / R&D
Even before this firm existed, I knew I wanted to be public about the behind-the-scenes noodling we're doing, and why we're doing it. Netflix-O-Matic is an example of the sort of simple toy I love to build. It's also useful because it helps me think about things like kaleidoscopic interfaces. I am not quite sure what that means just yet. Hence the toy.