Welcome to my portfolio. Here you will find some examples of my work including websites, motion graphics, Flash experiments and interactive television applications.

Repudo iPhone App

May 11th, 2011

Client: Repudo B.V.
Format: iPhone application

Repudo Menu Repudo Map

Summary: Repudo is a mobile application that lets users drop digital multimedia objects at real physical locations, either for a specific friend or as a suprise for anyone who comes by to pick it up. For example someone drops a photo or video at central station. You have to go there to pick it up before you can view its contents. Once it’s picked up, it’s gone from the map and you can choose to keep it or pass it on at another location.

Of course, digital objects can be more than photos and videos – Sony Music and EMI have both recently used Repudo to drop songs for music fans and other possibilities could include branded games, gifts and coupons. The Repudo technology was first used for the Heineken UEFA Tour campaign. After the campaign, the focus was to launch Repudo as a standalone product in the Apple App Store.

Role: My task was to optimize the user experience and integrate additional functionality to help make it into a fun, compelling product. I developed the wireframes over several iterations and refined the interface design using interactive prototypes to test out the ergonomics and navigation. These UI designs were a basis for the art director and visual designer who created the hand-drawn artwork, bringing out the fun, personal aspects of the application. In addition to the iPhone application, I developed the interaction design for the Repudo website and branded modules which will soon be added to the app.

App store reviews: Average rating 4.5 stars.

  • Top: UI is prachtig: leuk, vernieuwend, duidelijk en lekker speels, net zoals het hele concept eigenlijk!
  • Weer een vernieuwende kijk op het gebied van communicatie. Deze eerste versie heeft me erg nieuwsgierig gemaakt wat er allemaal nog mogelijk is met Repudo in volgende releases. App werkt overigens erg makkelijk en soepel.
  • Wow: Great design after update !!
  • Werkt nu goed. Interface werkt veel sneller en intuïtiever, goed werk!

Nominated for Best App at the Dutch Startup AwardsClient feedback: Awesome! Good work buddy!

Press: The Next Web: Nominaties Dutch Startup Award bekend, Marketing Facts: 1 miljoen investering voor Repudo, NU.nl: Miljoen dollar voor Nederlandse locatiedienst Repudo, iPhoneclub: Repudo: nieuwe track en concertkaartjes van Anouk liggen op straat

Link: http://www.repudo.com

Awards & Nominations, Web & Mobile UX

Interpolis Preventie

May 11th, 2011

Client: Interpolis
Format: Website

Interpolis Preventie - To Do List

Summary: Interpolis, one of the largest insurance companies in The Netherlands, approached us to develop an interactive concept to help engage their customers about the importance of risk prevention and communicate their key message “Insurance is not the only solution”.

Together with the creative director and copywriter we created a concept based around risk-prevention tips. Already existing content consisted of mostly lengthly articles of advice, clustered into the insurance policy categories such as fire, theft and water damage, etc. We took this content and broke it down into a smaller, actionable “tips”, structured into events and activities, such as going on holiday, cooking and moving house – subjects that customers can more readily relate to.

Role: As well as contributing to the creative concept, I developed the detailed interaction design and helped with the visual design. The project was developed using Agile methodology and my responsibility included itemizing user stories and maintaining the product backlog.

Link: http://www.interpolis.nl/particulier/watals/u_schade_wilt_voorkomen/

Web & Mobile UX

Audi A1 Microsite

May 10th, 2011

Client: Audi Nederland
Format: Website

Audi A1 landing page

Summary: This microsite serves as a landing page for bannering and email campaigns to promote the new Audi A1.

Role: Interaction design

Link: http://www.audionlinespecial.nl/a1/

Web & Mobile UX

WordPress 3 SEO Book

May 1st, 2011

WordPress 3.0 Search Engine OptimizationI worked on this book as Technical Reviewer, having previously collaborated with Packt Publishing on WordPress and Flash 10.x Cookbook and Papervision 3D Essentials.

The book is extremely thorough and covers SEO in an incredible amount of detail that makes it valuable for any web design, regardless of whether they are using WordPress.

In covers how to develop a SEO strategy and goes into detail about the possible tactics. The inner workings of Googles Pagerank are clearly explained and strategies for link building, optimizing content and code, and social network techniques are all covered exhaustively.

Advice is given on avoiding potential pitfalls such as black hat techniques and how to identify dubious third-party services.

My role as technical reviewer was to check the code samples and correctness of the technical information as well advising on the scope of the content. The book is available now from Packt or from Amazon.

Web & Mobile UX

Heineken UEFA Trophy Tour iPhone App

February 5th, 2011

Client: Heineken
Format: iPhone App & Facebook game

Summary: As a sponsor of the UEFA Champions League, Heineken approached us with a brief to engage fans by allowing them to take part in the official 2011 Trophy Tour, from the hand-over ceremony in Switzerland to the first tour event in Kuala Lumpur.

After brainstorming the concept together with the project team, I set to work with my marker pens to explore the ideas in a series of sketches which helped us present the concept to the client for their approval.

Heineken Concept Sketches

Then using Adobe Fireworks and Metaspark’s excellent iPhone UI toolkit, I was able to quickly put together a click-through prototype in which the details of the interaction could be worked out and handed over to the visual designer.

Heineken - Facebook ConnectHeineken InboxHeineken iPhone App PrototypeHeineken - Found Repudo

Finally, I laid out the individual steps in a flow to help communicate the final concept with the rest of the team responsible for the development of the iPhone app and branded Facebook page.

Link: http://www.facebook.com/heineken

Web & Mobile UX

Dynamic Zone Website

July 6th, 2010

Dynamic Zone Website

Summary: In a pause between client work, I found some time to design and build a new website for my employer, Dynamic Zone. The most important goal was to present our creative work to potential clients so I included the portfolio immediately on the home page. Having watched how users tend to immediately start playing with their mouse scroll-wheel when coming to a site, I took advantage of this to implement a playful scrolling navigation for the portfolio.

I implemented a Twitter feed as an easy way for clients to keep up to date with what we’re busy doing. Previous attempts at news sections and blogs had failed because in the midst of client projects, we found it difficult to find time to update our own site. A simple Twitter feed that filters employee’s tweets containing a #DZ hashtag makes it quick and easy to post comments, interesting links and connect with our clients.

I built the site using pure ActionScript 3.0 using Flash Builder 4 and created a solid framework using SWFAddress and XML loaders to populate the content, again making it as easy as possible to keep the site up to date and expand on it in the future. Flash was chosen for it’s ability to realise a rich experience in a limited time and alternative content is provided in HTML for devices without Flash support.

The site is only a first step and I’m working on creating more content and experiences to demonstrate how we can help solve problems for our clients communication and branding.

Role: Concept, visual design, branding, Flash development

Tools: Adobe Fireworks, Flash Professional, Flash Builder, SWFAddress, Google Maps API

Link: http://www.dynamiczone.nl

Flash & ActionScript, Visual Design, Web & Mobile UX

WordPress and Flash 10.x Cookbook

May 6th, 2010

Wordpress and Flash 10.x CookbookAfter working with Packt Publishing on their Papervision 3D Essentials book, I was very happy to be invited to work as technical reviewer on their latest book WordPress and Flash 10.x. It follows the familiar “cookbook” format, with recipes for combining rich Flash features with the WordPress blogging platform.

The authors Peter Spannagle and Sarah Soward have made it easy for beginners to get started with a run-down of Flash-based plugins that can be embedded in a WordPress-driven site, and goes on to introduce how to create custom Flash components and use them to add richness and multimedia. The book also includes an introduction to Flash timeline animation and explains how to create custom themes for WordPress.

My role as technical reviewer was to check the code samples and correctness of the technical information as well advising on the scope of the content. The book is available now from Packt or from Amazon.

Flash & ActionScript, Web & Mobile UX

MTV & Nickelodeon On Demand Channels

February 26th, 2010

Client: MTV Networks
Platforms: UPC Netherlands & Cablecom Switzerland
Format: Interactive On Demand Channels



Comedy Central Splash ScreenComedy Central Main Menu

Summary: These portals provide UPC viewers with on demand access to MTV and Nickelodeon television series. The viewer can enter the portals either by pressing the red button while watching the linear channels, or via the main UPC On Demand menu. The screens are designed to express the MTV and Nickelodeon brands and present available content in a dynamic, easy to navigate menu structure which supports both free and paid TV shows.

Role: Visual design (Photoshop), set-top-box application build (Mistral eTV-Studio)

Press: Piet Boon: Vanmorgen zijn ook MTV en Nickelodeon On Demand begonnen bij UPC, Broadcast Magazine: UPC breidt Channel on Demand verder uit

Interactive TV, Visual Design

ROC Friesepoort

January 30th, 2010

Client: ROC Friesepoort
Format: Flash site, game & map tool


Summary: This site was produced as part of a campaign to recruit students for the ROC Friesepoort schools. Students can signup for an open day or play a game in which they discover which courses match their interests. The school locations which offer the courses are then shown on an interactive map in which the student can find out more about the schools and courses they offer.

Role: I came up with the radar game and map concepts after brainstorming around the central campaign message “dichtbij” which means “close by”. I first created some Flash prototypes to see what was possible using the Google Maps API before developing the interaction design, visual design, sounds and Flash animatics. The final Flash application was created with the help of Actionscript/PHP developer Roy Garnaat who implemented an elegant PureMVC-based framework for the site.

Tools: Adobe Flash, Fireworks, Photoshop, Illustrator, Ableton Live

Client feedback: “I worked with Patrick on an interactive website for ROC Friese Poort (education). Patrick translated the proposition excellently into an effective interactive concept for our target students (14-16 yrs old). He is open to difficult questions and knows how to translate that into improvements of the concept. The world needs more interaction designers like Patrick, who are able to translate strategy into effective and distinctive artwork. Great work, great results!” July 6, 2010

Link: http://dichtbij.rocfriesepoort.nl

Flash & ActionScript, Visual Design, Web & Mobile UX

ROCvA Cinema Commercial

January 30th, 2010

Client: ROC van Amsterdam
Format: Cinema commercial

Summary: This commercial was produced as part of a multimedia recruitment campaign to attract students to the ROC which is the largest college in the Amsterdam region. The ad is being shown in cinemas within the college’s catchment area, allowing potential students to be well targeted in the weeks leading up to the open days.

Role: I animated the commercial using Adobe After Effects, making use of 3D layers in Photoshop CS4 Extended to animate the podium element which I modelled using Autodesk Maya. I also created the background music, sound effects and treated the voiceover to produce an audio mix suitable for the cinema.

Tools: Adobe After Effects, Photoshop Extended, Autodesk Maya, Ableton Live

Motion Design & 3D