It is my passion for the creation and science of interactive media. From my studies I have gained experience in
concept development, web development and user research. My ambition is to apply my knowledge of web application
development in projects that really help people.
Currently I'm specializing in accessibility on the job at Rabobank to make websites and web applications more
accessible for people with disabilities.
I enjoy performing and persue perfection, even though I fully know I'll never reach it. This habit emerges often during my work, where I really want to make a difference and do better. It also finds its way in how I play games or sports. To me, the thrill of improving at Smash Bros or running my lap just a bit faster is something magical.
Through Semantica, I worked on Rabobank's front-end components as part of a Scrum team. Alongside expanding the growing component library, I took a leading role in improving the design system's accessibility.
Tools: Lit, Stencil, JavaScript, TypeScript, SCSS, Azure DevOps, Scrum
My role was to turn the UX designers' vision for the DRH (Dutch Defence visual identity) design system into a technical implementation and put it into practice across projects. I moved between teams and worked closely with all five Mobile Solutions teams.
Tools: Angular, TypeScript, JavaScript, HTML5, Sass, Redux, Karma, MobileIron, Cypress, REST, CI/CD, Cordova, Azure DevOps, Scrum, Agile
Result: Design system components used across several internal and external mobile applications for the Ministry of Defence.
Through Semantica, I worked as a front-end developer in a Mobile Solutions Scrum team at the Ministry of Defence. I was responsible for several applications and took a leading role in creating an Angular design system. The shared design system made it easier to build applications with a consistent look and feel across the organisation.
Tools: Angular, Cordova, JavaScript, TypeScript, SCSS, Azure DevOps, Xcode, Scrum
Result: Design system components used across several internal and external mobile applications for the Ministry of Defence.
At ING Iris, I worked on front-end development with Polymer, JavaScript and jQuery.
Tools: Polymer, JavaScript, jQuery, Sass, GitLab, Scrum
Through Semantica, I worked on ING's Community platform as part of a Scrum team. I handled the front-end implementation and its integration with the external Lithium platform. I also built a new Polymer-based ING front end, making the community platform available within the organisation.
Tools: Polymer, JavaScript, jQuery, Sass, GitLab, FreeMarker, Lithium, Bitbucket, Scrum
Result: Expanded and further developed the ING Community platform.
Through Semantica, I worked with a Scrum team at G2G Online on a range of web projects. I handled front-end implementation for several G2G websites, making sure each could also be managed effectively in Craft CMS.
Tools: JavaScript, jQuery, Sass, Grunt, Twig, Craft CMS, Bitbucket, Scrum
Result: Delivered enhancements to several websites, meeting the client's needs.
At Semantica, I developed the front end of an app for Stichting Heppie as part of a Scrum team. The app gave children and their parents or guardians a private space to communicate. It included permissions for posting and responding to messages, and ran on both Android and iOS using JavaScript, AngularJS and Ionic. When Angular and Ionic 2 were released, the app was migrated to the new versions. I worked on the conversion, which involved rebuilding most of the app.
Tools: Ionic (1 and 2), AngularJS/Angular, Sass, Scrum, Jira, Bitbucket
Result: A new app that lets children communicate safely with Stichting Heppie.
Through Semantica, I joined a six-person Scrum team at Pangaea working on the Deen Supermarkets webshop. I handled front-end features including product presentation, responsive layouts and checkout.
Tools: React, JavaScript, HTML, CSS, jQuery, Razor, Scrum
Result: Delivered a new DEEN webshop that met the client's needs.
For Semantica, I built a neural network in Python to assess incoming enquiries. I trained it with supervised learning on a dataset of suitable and unsuitable enquiries.
Tools: Jupyter, Python, TensorFlow
Result: A neural network for filtering incoming enquiries.
For Semantica, I built Groeit.com, an information site for the Groeit training programme I completed. The website was generated with Jekyll.
Tools: HTML, CSS/Sass, JavaScript, Jekyll
Result: A one-page website for Groeit.
For Semantica, I implemented change requests for Biglift's visual planning tool. The board gives employees a straightforward way to plan leave and travel, and connects to backend systems containing ship and cargo information.
I was responsible for designing and developing software updates, working with the team lead and the client.
Tools: JavaScript, AngularJS, jQuery, REST, Gulp, Karma, Jira, Stash, Bamboo
Result: Improved functionality and new features for end users.
For Semantica, I worked with a back-end developer on the new web application. To simplify development, I built several AngularJS directives.
Tools: JavaScript, AngularJS, jQuery, REST, Grunt
Result: A web application that lets administrators configure Semantica DMS.
For Semantica's 2016 corporate website, semantica.nl, I conceived, designed and built the homepage animation. It uses modern HTML and CSS techniques and is fully responsive.
Tools: JavaScript, jQuery, CSS, SVG
Result: An interactive, infographic-style scrolling experience that presents information to website visitors.
ArbitrageOnline.nl is a platform for amateur sports clubs to assign referees. It initially focused on football clubs, with plans to expand to sports such as field hockey and handball.
Through Semantica, I worked on a mobile app that lets referees sign up for amateur matches and keep track of their assignments. The cross-platform app was built with Ionic, AngularJS and Cordova. I also designed the REST API with the platform's developers.
Tools: JavaScript, Cordova, AngularJS, Ionic, jQuery, REST
Result: A mobile app for Android and iOS, available through the app stores.
I maintained the www.richardvandoorn.nl website, making requested updates via FTP using FileZilla. Changes ranged from a new header to updates to the shoe collection.
Find the second-hand item you want without constantly refreshing marketplace searches. AanbodAlarm lets you save searches on Vinted and Marktplaats, set a maximum price and receive alerts when new matching listings appear.
Demo: AanbodAlarm.
Tools: JavaScript, Netlify Functions, Netlify Blobs
Turn a GPX file into a cycling route through the Dutch junction network. Knooppunt brings route data together with the dozen typeface used in my Garmin watch faces.
Demo: Knooppunt.
Tools: Javascript
A scrolling playground of moving geometric forms, created as an experiment in using AI to build an interactive single-page experience.
Demo: Geometric Paradise.
Tools: Javascript, CoPilot
A Garmin watch face that brings together doZen's minimal clock design and raCer's progress arcs. It also uses doZen's bold typeface.
Can you find the right colour, subject and moment? Each day, Colour Compass sets a new photo challenge. Upload a picture that fits and earn a stamp to share with friends. Compare your scores and see who found the best match.
Demo: Colour Compass.
Tools: Javascript, Illustrator, Photoshop
Inspired by the puzzle game Chants of Sennaar, this clock turns its glyph-based number system into a way to tell time. Four symbols, arranged in a square, represent a four-digit number; the same system displays a 24-hour clock. So 12:34 appears as the glyphs for 1234.
Demo: Clock of Sennaar.
Tools: Javascript, Illustrator, Photoshop
Kodama Camp's WordPress site was costly and cumbersome to maintain, so I offered to help. I built a new site with Jekyll, Netlify and Netlify CMS, making it easier to update while keeping running costs low. I also ran workshops to help the team understand and maintain the site themselves.
Website: https://kodamacamp.nl.
Small easter egg: Try https://kodamacamp.nl/?confetti.
Tools: Netlify, Jekyll, jQuery
What if a marble race was not just about speed, but also about changing colour? Rainball is a Unity game concept for 2 to 8 players, rolling through a 3D marble run. The goal: become the right colour by collecting coloured marbles or bumping into other players.
Tools: Unity, C#, Illustrator, Photoshop
Prototype: No prototype is available yet.
Race against your own goal!
When I used a step counter every day, its reminders motivated me to move, but the hourly notifications also got on my nerves. That mix of motivation and frustration inspired raCer: a Garmin watch face that turns your daily step goal into a race.
I find raCer clearest with all numbers and icons switched off. The bars show your progress at a glance, keeping the watch face calm and functional.
Download raCer: https://apps.garmin.com/en-US/apps/3ac7d410-5ad9-45cf-aa2d-bd3c08e69fc6
Tools: Monkey C, Photoshop
No ticking seconds or minutes: doZen tells the time at a more relaxed pace, using its own dozenal notation.
Examples:
Variant: toZen
A variation that removes the dots and always rounds the time forward.
Download doZen: https://apps.garmin.com/en-US/apps/96cab36a-7822-4e1d-8593-4649298c7431
Tools: Monkey C, Photoshop
Which games am I playing, replaying, or saving for later? Gamelist is my personal video game library, with cover art, platforms, statuses and ratings all in one place. Games are grouped by status, and you can search by title or filter for games marked 100% complete.
The collection is managed in Notion and served through a custom API. An authenticated add-and-edit page lets me update existing entries or add new games, while completed games earn a gold 100% trophy on their cover.
Tools: JavaScript, jQuery, CSS, Notion API, Express, Netlify Functions, Netlify Identity
Explore the game list.
As a fan of tabletop games like Dungeons & Dragons, I started creating my own role-playing system in 2013: Late Legends. Since then, I have been building its rules, characters and everything else needed to tell stories together.
My goal is to make a system that is easy to pick up, yet deep enough to keep discovering new characters and stories.
Late Legends began as a handbook and grew into a digital game that you can play entirely on the website. It works on mobile and includes useful tools such as calculators, generators and reference pages.
More info: https://coendekker.nl/latelegends.
I had always wanted to make a game. RPG Maker VX Ace lets you create an old-school role-playing game without complex code. Moonfall grew into an adventure with more than two hours of gameplay.
Music can shape how we experience a scene, but can a soundtrack also change how fast a car seems to be moving? For my graduation research, I studied how different film soundtracks affect perceived driving speed.
I recorded footage of a car travelling at 40, 60 and 80 km/h, then paired it with three soundtracks: one frightening, one happy and one sad. In total, 96 people took part. Each participant watched three clips paired with soundtracks; each clip and soundtrack was used only once. A control group watched three clips without music, and everyone estimated the speed in each video.
The results showed that music generally made the car seem faster, especially at 40 km/h. The frightening and happy soundtracks also pulled estimates towards the middle: faster speeds seemed slower, while slower speeds seemed faster.
For the full research report, read the paper:
The impact of movie soundtracks on the estimation of driving speeds
Can a neural network interpret a Rorschach inkblot the way a person does? I trained a network to recognise black-and-white images from their pixel values, then used PCA to reduce the data before testing it on greyscale Rorschach plates. Its results differed sharply from human responses: it did not arrive at the same interpretations.
Read the paper: Performing the Rorschach test with a neural network
For the Media Technology master's programme, I worked with fellow students on a semester project that explored a theme and turned our findings into an exhibition. Our theme was Integrity, and my group's subtheme was Fact. We used those two ideas as the starting point for our research.
Project:
We explored how science establishes facts and truth, looking at echo chambers, the Turing test and filter bubbles. We then considered what people tend to follow and believe: the news. Could the news serve as a form of fact, or as a kind of personal, everyday "truth"? This led us to robot journalism: news written by an algorithm. Our proposition was: The new journalist is an algorithm, that is a fact.
Exhibition piece:
For the exhibition, we built a Black Box where visitors took a quiz about robot journalism. Buttons on a chair provided input, and visitors listened to the quiz through headphones. The Black Box had an input and an output; the visitor became both. The exhibition ran for two weeks, three days per week. We received a grade of 8 for the project.
As an elective at Leiden University, I took Statistical Computing with R, combining statistics with programming. Over seven weeks, I built my R skills through a series of assignments using RStudio. For the final assignment, I created a presentation with two other students.
View the presentation
During the first term, I took Affective Computing at Delft University of Technology. For the project, I worked with three other students and consulted Hayley Hung, who had researched the game Werewolf. We began with this research question:
Can nonverbal features in video be used to identify social bonds between deceivers in a group conversation?
We played seven Werewolf games with participants (see figures 1 and 2), recording both audio and video. We analysed movement in the footage using four categories: head, outside-head, body and outside-body (see figure 3). A Max patch processed each video (figure 4).
We used Excel and R to explore when deceivers spoke and how this related to one another's movements. We grouped the results into four combinations: CC (player speaks, other player's movement), CW (player speaks, deceiver's movement), WW (deceiver speaks, another deceiver's movement) and WC (deceiver speaks, player's movement). Figures 6, 7 and 8 show the results for each category.
We concluded the project with a paper. Read the paper.
For Image & Vision: Embodied Vision, I made a short film exploring how movies create illusions. Films can make people disappear, bring ghosts to life and much more, usually with the help of special effects. We went back to the basics and tried to perform two tricks without effects or editing. At the end of the video, we reveal how we did them.
Magic Tricks - Floating Pine Cone & Magic Trophy
Alongside the video, I wrote an essay about digital imaging and motion capture. The rise and influence of digital imaging by motion capture in movies and video games
I started the Media Technology programme in September 2013. For the Web Technology course in the fourth term, I researched mesh networking with two other students, exploring what it is and how it can be used. We presented our findings in a paper and a presentation.
Download the mesh networking paper
View the Prezi presentation
For the Cool Science course, I worked with a fellow student on a short project about a counterintuitive puzzle: the Three-door Problem, better known as the Monty Hall Problem. We created an infographic to explain the puzzle visually and simply, using Adobe Illustrator. The infographic is shown below.
What if you could store a human brain inside a fish? For New Media New Technologies, we developed Homo Sapiens 3.0, a speculative project exhibited at Quartair in The Hague.
The project explores a philosophical question: as we map brain activity with increasing precision, could we one day copy, compress and store a mind as a virtual brain?
The video shows the material presented at the exhibition.
Homo Sapiens 3.0 - Hilbert’s Story
For the Artificial Intelligence course, we programmed a Parrot drone. We explored how it could fly intuitively, recognise faces and respond to them. Using OpenFrameworks libraries, we built a prototype and presented it at DEAF 2014 in Rotterdam.
The project is documented in a short paper: Read the paper
Below are two videos: a DEAF 2014 summary and a demonstration.
For the New Media New Technologies course, I developed a project called Wall Street using OpenFrameworks.
The project explores how quickly information can be exchanged and displayed. It uses real-time stock market data to visualise buildings in a virtual city. We first planned to use NASDAQ data to create a skyline projected onto a wall, with the buildings changing height as the data changed. The result would be a bar chart that continuously updates. We later developed a web app so Wall Street could run on its own and be controlled by another device. Screenshots are shown below.
For the New Media, New Technology course, we edited The Avengers into a silent film. With no dialogue or sound effects, but accompanied by characteristic piano music, the modern superhero movie takes on a retro feel. The final edit runs for 47 minutes and 32 seconds.
For the Sound Space Interaction course, I created an installation in Max MSP. The idea was to make a game where players guide helicopters to a safe landing. The player becomes the "Chopper Dropper", surrounded by four speakers that create a 3D soundscape of helicopter noises.
Sitting in the middle of the four speakers, you steer the helicopters with the arrow keys and press space to land them. But you are only giving instructions: depending on the level, the pilots may not listen very well.
During development, we added 3D audio, the Doppler effect, synthesised sounds instead of samples, acceleration, a level builder, level-up and game-over sounds, and more accurate helicopter movement.
I enjoyed working on this project and learned a lot about Max MSP. An overview of the result is below:
Can a lamp follow your movements? For the Hardware & Physical Computing course, I built a lamp with two fellow students. Its columns of LEDs were controlled by an Arduino.
An ultrasonic sensor measures the distance to the user and switches on an LED column accordingly. A stepper motor rotates the sensor so it can scan the entire lamp. We soldered the LEDs ourselves, used two Arduino boards and wrote the control code.
For the Research Seminar: Artificial Intelligence course, I worked with a fellow student on a presentation about artificial intelligence in video games.
We were assigned the paper Nareyek A., AI in Computer Games. We chose to focus on the A* algorithm from the paper and research other topics independently, creating a presentation that surveyed several areas of AI in video games. A selection of slides is shown below.
For the Human-Computer Interaction course, I developed an app prototype with a fellow student. We chose to create a snack-themed app using Titanium Studio, and called it SnackTrack.
We wanted the app to explore this question:
How does tracking your own snack consumption affect your snack choices over time?
We focused primarily on building the demo, so we narrowed the research question to a shorter time frame. The app takes a light-hearted look at snack habits using a health bar inspired by video game life bars. Users can see how their habits are going, with recommendations based on their entries intended to encourage healthier snack choices. Wireframes and prototype screenshots are shown below.
Semantica DMS is a document management system that helps organisations keep their document workflows under control.
As part of my graduation project, I designed and built a prototype mobile app and discussed it with clients. The app was written in JavaScript using the Titanium framework. It used information from the Semantica DMS backend to notify users about new documents. I visited clients to demonstrate the app and gather feedback; they described the communication as professional and pleasant.
Tools
Javascript, Cordova, Titanium, REST
Result
A mobile app for Android and iOS that kept Semantica DMS users informed about new and updated documents, including scans and emails.
During CMD's 3D minor, I learned to work with 3D Studio Max alongside two fellow students. Our assignment was to create a leader, a short intro for CMD-related videos. We came up with a box filled with objects from the programme; they fly out and eventually form the letters CMD.
We modelled and animated the objects in 3D Studio Max, then finished the video in After Effects.
Watch the video: https://www.youtube.com/watch?v=uKvy-KtHQDo
During this term, another student and I created a brand experience for a drink of our choice. We chose Orangina, which was available in the Netherlands but had little advertising presence.
Using Dan Saffer's "Design for Interaction" method, we created an experience spanning a mobile website, landing page, product samples, a Facebook profile and a commercial.
Our campaign line was: "Bring summer back with Orangina!"
During this term, I worked with two other students on a plan for Cup-your-Cake to develop our online marketing skills.
We came up with the concept "Your story, your cupcake" and documented our findings in an online marketing communications plan. It covered an online community concept, suitable marketing tools and estimated costs.
The assignment was to come up with and build an app independently. I created Zo Dus, an app where students moving out for the first time could find practical advice from students who had already been living on their own.
The app served both students still living at home, who could browse advice, and students living independently, who could post tips. I built it with HTML5, jQuery, WebSQL and CSS3. The prototype used the YouTube API for demo videos and included login functionality and categories such as study, favourites and a Top 25.
During the first two terms of 2011-2012, I interned at Sabel Online in Bilthoven and The Hague, researching usability testing.
I compared different methods and researched software for conducting studies online. Based on that research, I created test setups and evaluated them in a pilot. I then developed a remote user research method for running usability tests over the internet. Together with Sabel Online, I also developed an online prototype for testing websites using assigned tasks.
This half-year internship gave me valuable insight into professional life and usability testing.
For this module, I designed and built an interactive exhibition piece as an individual project.
I wanted to explore how a soundtrack affects the way we experience a film or series. I built a small viewing booth with a projection on the wall. Wearing headphones, visitors watched the same clip three times, each with a different soundtrack, then noted the emotions each version brought out. Their responses showed how differently music can shape a scene.
Description coming soon.
During this minor, I learned the basics of photography through lessons and assignments. I especially developed the way I look at a subject, paying closer attention to light and composition.
At the end of the term, we had to print all our assignments. The process involved more than I expected, and I learned a lot from it.
An interactive communication prototype for the Netherlands War Graves Foundation. The assignment was to engage a younger audience with the organisation. Together with three other students, I developed OGS-Layar Les.
A lesson built around a digital scavenger hunt at one of the Foundation's cemeteries. Using a smartphone and Layar, visitors could explore photos, text, videos and activities along the route.
For the Computer Science minor, I worked with four other students on a Java database application for Sportivo, based on a class diagram.
The app had different user roles, including managers and participants. Managers could create activities with the right categories and details, and participants could sign up for them.
In a group of five, we developed a Flash application for Museon in The Hague. Our assignment was to explain the Doppler effect to a young audience. We learned to work with Adobe Flash and researched how to make the application engaging and accessible for its audience.
The first term of CMD at The Hague University of Applied Sciences. I worked in a group of five on a website for the university. The assignment introduced us to the school and gave us an early look at the work of communication and multimedia designers.
We worked with a client, carried out research, developed content and designed a website.