Birdhouse
Twitter client for Android

Built together with Dion and Richard. We set out to create the 'Tweetbot alternative for Android', a Twitter client with a high degree of polish and an excellent user experience.

On a 16:9 7" tablet, there's already very little vertical space in widescreen mode, and even less so when you add in the top and bottom system bars. We reduced the number of bars, in order to maximise the used screen space.

Most tablet-oriented Twitter apps used a column-based approach, which I felt was difficult to use, and didn't translate well when the tablet was held in portrait mode. So I decided to base the navigation on the original Twitter for iPad app, which uses a stack of panels to make the navigation history easily understood. Using these more-narrow columns also allowed us to add in phone compatability, which uses the exact same layouts, but instead fills a screen. Although this means no navigation is visible on a narrow phone screen, we felt it was appropriate for an app aimed at power users.

On tablet mode, there's space for multiple columns

In order to add a splash of personality and colour, I decided to theme the profile pages. Inspired by iTunes 11 and the built-in Palette library, I made the profile headers use the user-provided banners to provide an extra personal touch. This also helped lessen the visual complexity of the header, as it previously contained a more separate banner and background.

In order to finetune the algorithm used to pick the neccesary colours, I ported the Palette library over to PHP as well as JavaScript, so I could more effectively iterate. A browser-based solution has the advantage of being both faster to evaluate changes, as well as offering more real estate, so you can easily see how your changes work on a variety of input images.

Browse profile headers

Shopping app redesigned, taking into account the 'new' (2012) Android design guidelines.

In 2012, I got the assignment to redesign a popular Android app. For this project, I decided to work on 'Appie', the app by one of the largest Dutch supermarket chains. At this point, the 'Holo' design guidelines were just released, and the app was still using the pre-Android 4.0 design style. In order to provide a modern design, I followed the new guidelines, while still adding some personality in the form of textures.

The old app relied on the menu button for switching between modes, this was replaced with an actionbar with a spinner, adding visibility to the previously mystery meat menu interaction. And the dashboard-based design was replaced with a design that put the shopping list up front and center.

Scanner within range

When you open the app, the camera immediately is enabled. This way you can immediately add items to the shopping list shown above.

Suggestions

While typing, the app gives suggestions on what you might be trying to add. Instead of adding another list to the UI, the auto complete bar is used, providing users with a familiar and easy-to-reach option for picking groceries.

Contrast

When you start scrolling, you still want to be able to see what you're doing. That's why the input gets a background when you've moving up your list.

Wallpaper included

Not everyone will want to have their shopping app using the camera all the time, that's why the camera background can be disabled, and replaced with a weekly-changing background to keep things fresh.

Now you're cooking

When you scan a recipe card in-store on in the magazine, the app immediately opens up the recipe page, where you can easily add items to your shopping list.

If you add a recipe, you can choose the portion count you want to cook. You can do the math... but you don't have to.

Recipe for success

During preparation the text is shown in a comfortable large size, so you can easily read it. The app also makes sure the screen stays on while cooking, so you don't need to worry about pressing buttons with greasy fingers.

‹ ›

Game to promote an organisation which funds playgrounds for kids.

Background

In the second year of IT & Media Design we were tasked with creating a (hypothetical) web application to promote a charity. Our group was assigned the 'Jantje Beton' charity, which aims to provide kids with more space to play. We created the playground builder prototype as a prototype to get kids themselves involved with the creation of new playgrounds.

Application

The game works in a similar way to how building in RollerCoaster Tycoon and The Sims worked. In 2011 Flash was still very common for online games, but we were tasked with creating an HTML-based application. This meant not many libraries were available, so the game was written from scratch in JavaScript. Behind the scenes it makes use of jQuery and the Canvas element in order to allow for user-placeable elements.

Build your playground

OpenRCT2 & OpenLoco

2016 – present

I've been involved in the open-source game reverse engineering projects OpenLoco and OpenRCT2. I converted x86 assembly into C and C++ code. For OpenRCT2, I introduced automated testing for the ride drawing code. I was also responsible for adding Android and macOS support to OpenRCT2 and OpenLoco respectively.

Open Source
Reverse Engineering
x86

JouwWeb.nl

2014

During my internship I worked on converting the desktop-first website builder to various mobile-compatible designs. I contacted active users to gather information about why they were attempting to use a website builder on mobile, in order to find what features were important. The registration flow, dashboard and website configurator were all prototyped on a fork of the real codebase. Afterwards, I organised usability tests, and updated the prototypes based on the feedback.

Usability Testing
User Research
Responsive Design
Mobile
Prototyping
JavaScript
Zend Framework
PHP

One More Thing

2014 – 2017

Introduced Composer, automated release deployment and helped with move from physical hardware to virtual servers. Worked on converting 10+ years of legacy forum content to CommonMark, and created yearly interactive 'keynote bingo' cards.

PHP
WordPress
DevOps