My name is Matthew, I'm a freelance designer, photographer, and amateur video maker and this is a story about my work, starting at the end, or ending at the start. If you like it, get in touch. Check out my photos at 500px or follow me on Facebook or Twitter.
Every day of your life, you encounter something that's open source. Viewing this site via Firefox or Chrome? Those are open source. Have an Android phone? That's based on open source. PHP, MySQL, Linux...these are all huge open source projects which underpin most of the modern world, online and offline.
Facebook was always a huge consumer of open source software, but in the last few years it's been trying to increase the amount that it gives back to the world. This isn't just some abstract concept that ultimately amounts to a few incomprehensible extensions for a language, the vast majority of the internal software stack that Facebook engineers use is now available for the wide world (some of my favourites are Flow, XHP, and React).
In the middle of 2014, I was looking for a new role (and moving back to Dublin!) when I bumped into my former boss who was now leading Open Source advocacy efforts at Facebook. I jumped at the chance to be a part of this incredible endeavour, which spans backend database technologies, through animation libraries for iOS and Android, to actual physical hardware schematics. Facebook is now one of the biggest contributors of open source software in the tech world, and it's such a rewarding and impactive thing to take part in. Since then I've been building out both our code.facebook.com news and project listing site, as well as helping every single open source project launched out with design assistance.
For the most part, this took the form of logos for each project. This was a very rewarding challenge - having to create a coherent brand in the space of hours (with a few options), and make sure it was cohesive with the rest of our projects. I developed a fairly simple design language to tie together all Android and iOS projects, and to make it much faster to roll out new logos as needed. I also reworked our Github Pages websites for new projects to ensure more consistency across these (and again, a speedier rollout). I also happily adopted the role of general design goto within the team, producing a series of infographics for the end of 2014 which recapped the statistics from an incredible year of open source progress (the Barack Obama Wikipedia statistic is my personal favourite).
Maybe I should keep business and personal separate, but my memories of my father are so vividly visual, I had to include my tribute to him in this space.
A handful of the prints I've made at the Facebook Dublin 'Analog Outpost'. You can find my full "Print and Miscellanea Portfolio" here
IV. Call and Response
While working at Facebook has been good for expanding my skills, there wasn't a whole of time to work on my first love, design. So I volunteered to create something new, interesting, and responsive to stretch my legs a bit. The work was for The Hudson in Belfast, Northern Ireland, and involved two bits - a unique website for a bar that is particularly proud of it's craft beer selection, and an attempt to create a really vibrant community throughout the site.
Step one was to completely rebuild their forum from the ground up. I'd set this up for them in the past, but this time I went over it with a fine-toothed comb, paying attention to each pixel of layout, the feel of every animation, and the spacing of every letter.
I also wanted to make sure this site would be brilliantly responsive, because I love sites that have no fuss about mobile "versions", and all the associated redirects, different login systems, and user disappointment. And instead of being just another forum hanging off the side of an essentially unrelated website, it'd become a 'community engine' driving the entire thing.
So I rebuilt it, using my current favourite tools: Django, SASS, Bourbon, and Underscore.js. I really love my work on this site, the responsive aspects are wonderful, and that close attention really paid off in the little details.
The main site is still to come, but we're planning on having some interesting ideas like an interactive beer list - providing some history and extra info on each brewery - and weaving all the new community bits and pieces into it.
An extension redesign of the brand for a series of live barista and coffee related conferences.
The Fine Art of the "Tidy Up"
Some of my favourite redesigns have been barely that, a recent example is a very subtle change to the Chapstick brand. If something has a good idea at it's core, there's sometimes no need to burn things to the ground in an effort to modernize (I'm looking at you American Airlines). And there are some clients who don't want that either.
So, here's a look at short project where I did just that, and took an existing brand (that I had created myself a long few years ago) and tweaked it. This company has thousands of thermostats and other bits of HVAC equipment in homes around the UK, so it made more sense to tweak a good foundation into something really tidy.
Interlude: Learning to Write
Writing wasn't an aspiration for me, I was going to be a designer, or an architect, or a kid with Lego. But things have a funny way of falling together, and two-and-a-bit years after starting at Facebook, it's what I found myself doing.
And, turns out, I think I'm pretty good at it. Or, at least, the particular style of writing that is needed for developer documentation. It turns out that barely anyone knew what was needed for this, including both myself and all of the developers that were reading the guides.
But that's the really great, rewarding part of being a 'pioneer' of a particular focus at a company like Facebook - figuring out what is wrong, what needs to happen, and getting it done. Problem solving is a joy. You go on to discover skills that you didn't know you really had.
The work the documentation team has done over 2013 and 2014 has been remarkable, and I'm very proud of my contributions to it. If you want to read some of my work, you can check out the Graph API Quickstart as well as the more advanced tutorial, and the guide to Platform Versions.
III. I Left My Heart in...
This video was my love-letter to Dublin, Ireland, when we decided to have a long-distance relationship.
I'm telling this all out of order, let's rewind a bit.
While working at Facebook, I spent a lot of time being rather upset by the poor state of the developer documentation for the Platform. It haunted me. How could our primary mechanism for teaching people how to use this product that we were pushing so heavily, be so inadequate? It'd be a bit like buying an awesome cabinet from Ikea only to find that there were no instructions for putting it together.
I fairly went on about this, let me tell you, so much so that someone along the way decided that they'd just let me do it myself. So I spent a good few months helping out on various rewrites and content polishes, until then someone decided that maybe they'd just get a team to do this themselves. And they invited me to be a part of that. In California.
Then began the long goodbye, packing up a life into little color coded boxes, and sending it a few thousand miles across the planet, and then being there to greet it several emotional weeks later. But before I got there, I made this little love letter to the city I left behind, and our long-distance relationship is still going strong.
I think I'm strange, because I sometimes find it more exciting to take on design work for something relatively non-rock star, like say for instance a "leading specialist in heat transfer and industrial HVAC equipment". I think, possibly it forces you to work within greater than usual constraints and that can lead to some real stark simplicity.
I actually built this site back in 2010, but the logo redesign came a few years later, and I think it's one of my favourites logos (of my own that is). It is about a hair's breadth away from falling into total cliche, and I might be in danger of falling in love with those cliches, but I do like how many ideas fit into it whilst still working as a simple symbol. Oh, and the whole thing is totally inspired by me riding the DC Metro a few weeks before hand and falling in love with its information design.
II. You Know What's Cool?
Working at Facebook is cool. It's really cool. I'm writing this right on my fourth year anniversary (Faceversary!) of joining, and the thrill and magic of working here has not subsided one bit. But what have I done for the company? Well, I worked the first bit in Platform Operations, following that up with a stint in Developer Support Engineering. Working with external developers, and working internally for their benefit. That panned out in a lot of really different and interesting ways, and I even ended up becoming a fully vetted Facebook Engineer by going through the six week bootcamp. I've written APIs, I've fixed bugs, and I've worked on a fair bit of UI engineering too.
This is Facebook though, and listing job titles isn't even half the story.
The Dublin office wasn't really staffing designers, so anyone with a bit of Photoshop knowledge became the go-to for any little or small bits of design work that were locally focused - posters for Hackathons, team logos for hoodies and t-shirts, even a logo for the office pub!
I. Jack Your Bodytonic
One thing my boss at Bodytonic always yelled at us was "mobile first", and so we come to the first time I built a mobile website. I can say that I've improved a lot in technique and complexity since this, but for an m-site that began production in 2009, and launched in 2010, it was pretty great. It wasn't responsive, because media-query was still somewhere in pre-W3C ether, but it was as close as you could get - navigation that would degrade visually in a graceful way, ensuring that no functionality was left out of either platform, and a reduced amount of images to better load on a 3G connection.
At the same time, I worked on a full revamp of the desktop site. We wanted to provide services within a relatively poorly served community (underground electronic music), with lots of original content, but plenty of opportunities for user-generated content too (uploaded mixes, a pre-Pinterest content bookmarking tool and a busy forum).
When I called Bodytonic a "make it yourself" startup earlier, I really meant it. I was, at one point or another: head designer, head developer, editor, writer, interviewer, video producer, audio editor.
We made a lot of mistakes, but we had some great ideas too. This is one of these projects that I'd love to go back to with the benefit of a few years extra experience and completely nail it.
You've seen those energy efficiency rating labels before, right? Well, then you know where this one comes from. What came from it though? Well, this was sometime in 2009, and I was really grasping the importance of information hierarchy in functional design. The really fun projects let you go mad with creativity, but when you're designing for a client, you need to reign that in sometimes, and know that someone's business is riding on what you do. So you need to get the information clear, and quickly understood. That's all to say - the thing that makes me post this little flyer for a HVAC product and remember it, is that it kind of let me do both.
So we're starting this story at the end, but also in the middle - think Memento. This beginning is the first of any of my work that has managed to survive the rigors of time and space; the rest has mostly fallen into a singularity of lost hard drives (some of it deservedly so).
At the time, I was working in Dublin for the great Bodytonic, a company that in today's world might be called a "startup", but back then we just called it a "build it yourself" thing. Offices above 18th century pubs, working off a laptop that you needed to crank before it'd boot up, that kind of thing.
One of the many things Bodytonic did was to run a little 'tell your friends' music festival in Croatia - Airbound. Thus, a microsite was born. I won't go on about it too much, because it was a quick job, and there isn't much to brag about, but I did try some interesting things like overlaying "stickers" on the edges of Flash video content, and trying to move away from the idea of a nav menu to a navigation "sentence", although this screenshot shows you the result of acceding to demand and adding one anyway.
Mostly I just wanted to take this opportunity to say hi! If you started at the top, this will be really confusing, like you're Benjamin Button or something.
16 years distant from wailing and screaming my way onto the planet, I was at school. We had a placement program (we didn't call them internships) where you'd write off to a company and ask if you could bother their employees for a couple of weeks. I got a placement with a branding company called Manleys in Belfast, Northern Ireland. I can't tell you much about that because it was so long ago, but what I do remember is that I haven't had a computer without a copy of Photoshop on it since then. What you see above is the calamitous result of that decision. I hope you like it.