I'm a roadie: I do whatever is necessary so the band can perform an awesome show. At heart that means I'm a UX designer, but a great roadie understands how to tune a guitar and build a kickass lighting installation, so I became an engineer as well. I've also dabbled in marketing, HR, ops, hiring & bizdev.
I've worked on software for dozens of clients over the years.
Here's some stuff I'm proudest of (FAQ):
Flyby conference (2012)
We organised a conference with Google Cloud. I designed and directed the event, collaborated with partners including the venue and catering, ensured talk slides were consistent, and created the website and marketing material. I list this because it's kind of a holistic product design: all of the presentation of the conference was my work.
The goal of the conference was to convene executives and give them a fast-paced, high level overview of why investing in the "cloud" (hopefully through Google) was a good idea. I came up with the name "Flyby" and, as often happens, the name inspired the visual style, where I attempted to communicate the high-level distance attendees would take away from the event.
For the website, I experimented with 3D CSS to create an animated, isometric world, then screencapped and used for brochures and posters. The clouds, cars, sheep and shadows are all generated procedurally using the same cube template and the colour scheme reflects the time of day.
A hundred people attended and people seemed to really like the weird experience and consistent style. Check out photos I took at the event.
tech HTML, Vanilla JS, CSS 3D
design Handcraft, procedural/generative
Prototyped the big vision of Spinn coffee. Team members 3d printed a shell based on an industrial design, someone else worked on an Android Wear app to embed into it as a touchscreen, and I created a HTML (Meteor)-based fully functional interactive prototype of the mobile app, including pitch for a design system of look and feel and transitions.
Orders in the app were sent to a server which communicated with the Android app on the Wear, allowing us to simulate the complete customer experience from ordering a coffee to having a cup come out of the machine. This was presented to seed investors and led to a first round being raised.
tech Meteor w/ Blaze, CSS transitions, MongoDB, DDP
design In-browser, Q42 Jumpstart
Created a first working version allowing customers to book a ride in a Model S between LA and Vegas. I acquired the client and then added a freelance development partner. We traveled to LA in one of their Teslas in a pilot run to get a sense of the customer experience, then set up for a week to work on it.
Built a HTML (Meteor)-based interactive prototype together with co-founders in a design sprint that also needed to be functional for launch at a party. They were able to immediately start taking bookings because we included Stripe payments and hooked up to backend systems.
tech Meteor w/ Blaze, CSS transitions, MongoDB, Stripe
design In-browser, Q42 Jumpstart
Designed and built an international JS-based site for Dutch agency Q42 (while working there). The goal was to express that we were cutting edge front end developers, so I could go a bit nuts. I decided on impress.js, a 3D CSS presentation library, which allowed for this spacey experience. This was a nice example of generative design, as the entire 3d configuration, including floating specks of dust, is randomly generated on each load. And it was back before good performance tools were available, so it was a lot of fun figuring out how many I could generate before the interaction got janky. We eventually replaced this experimental page with a more usable (!) English translation of the regular Dutch site, but I'm still glad I built it.
tech Vanilla JS, impress.js, CSS transitions
design Handcraft, procedural/generative
Handcraft web-based interactive prototyping app (2009-2014)
With a friend at Q42, invented a new product aimed at solving the problems of the interaction engineering role I started in 2008. On the first version I led visual design and UI while my cofounder handled most of the codebase. We launched to a beta group of 3000 before growing the product and userbase for several years.
A few years later I became the lead of a reboot of the product, which we rewrote from scratch on a new tech stack, part of which involved replacing the underlying custom XML language used for creating prototypes with a more lenient HTML-based one for which we wrote a custom tokenizer called HCML. Having a custom language parser empowered us to give much more robust feedback to users if they wrote syntax errors or invalid code.
I also implemented a new UX and visual design based around the ideas of Seduction Interaction Design, with a very ~2012 "skeuomorphism" style.
We stopped active development in 2014 with over 100k registered users but only hundreds of MAU and in the single digits paying customers. Lots of lessons learned!
tech .NET 2.x, XSLT, XQuery, XML, Java 7.x, Play Framework, App Engine, CoffeeScript, Backbone.js, CodeMirror
design Photoshop, in-browser
Product and UI design for a client building an IoT device that helps parents monitoring their child's temperature. The main screen displays a live graph and warns if temperature exceeds a certain threshold. Other screens (which I can't show here) allowed the user to alert doctors, dive into historical data and configure the app.
Screens were designed in Sketch to communicate with the co-founders, and I applied an attractive visual design because they wanted to present it to investors and potential customers for evaluation. After design was complete, I worked with an iOS engineer to build a prototype connected to a real device from which we learned a lot, including that the graph would never look as smooth as envisioned in Sketch.
For legal reasons the customer moved their operation to China and we weren't able to evaluate the product in the market.
tech Xcode, Swift
My hue (2017)
Assisted the existing product team with cleaning up the visual design and improving accesibility and usability of the My hue app, which Philips hue customers use to create a hue account and manage preferences (managing lights is done from within the native app).
I took care to ensure tabability of the complete app (which gets complicated with numerous popups and overlay panes), testing it to pass all a11y criteria in Chrome dev tools and doing usability testing to confirm the app behaved as expected (despite being remote from the dev team).
The app has now launched and users of the old version are being invited to begin using the new experience.
tech React, Flowtype, ES2015, Service Workers, Lighthouse
design In-browser, responsive design, accessibility
Led product, UI design and frontend development of a mobile web app that matches tutors with parents of kids who need tutoring. Work began with a single week "jumpstart" design sprint in which we defined the scope of the project with the client and worked out screens in Sketch. Then followed three months of development in which I worked alongside two others, first to design finalised screens (Sketch) and then to implement them.
The decision to use GraphQL was especially nice for a frontend position, as it allowed me to easily mock data dependencies and implement screens without having to wait on the backend API to become available. Towards the end of the project the client brought in an external branding agency to devise a brand strategy and give the app a "coat of paint", which is not shown here.
This product has not yet launched.
tech Meteor w/ React, Apollo GraphQL, MongoDB
Cube 42 puzzle game (2012)
Created a game to hand out to our agency clients during the holidays. Players were tasked with rotating the larger cube and removing smaller ones until the sum of all numbers on a face totaled 42. The game grew progressively harder, with the cap being set at the inability to generate new solvable puzzles with so few remaining smaller cubes. The 3D matrix rotation was done purely with CSS, but I'm not great at math so I reached out to a mathy colleague for help. Customers who played it loved it despite its idiosyncrasies. We gave the higest scoring players a free Spotify subscription.
tech Meteor w/ Blaze, CoffeeScript, CSS 3D
Talk about Tesloop & jumpstarts (2015)
While I was a Meteor meetup organiser/advocate I gave talks about how I was using it. One of the ways we used Meteor was as an interactive prototyping platform, which I talk about here in relation to Q42's jumpstarts sprint methodology. I also created a playlist of more of my talks.
Bonus: I learned to code because I built a videogame webzine in static HTML and then realised it needed a schedule-based publishing platform with role-based access and multiple users. We published fourteen issues in four years. Each issue had a completely redesigned cover. The first version of the site in 2002 used mostly "sliced up" Photoshop images to accomplish this, but once CSS became popular (2003-ish) I rewrote the frontend to be entirely CSS based, which enabled restyling entire issues with custom designs reflecting the theme. That turned out to be a lot of work each month...
tech HTML, CSS, PHP