2014

The student blogs landing page and the WordPress theme.

2013

Imperial College London news
Imperial College London alumni email

2011

Imperial College London campus map

2010

Student blogs

2010 update of the Imperial College London student blogs -- a desk with 'living' students and lots of hidden gimmicks, powered by Box2D. See a making-of video here. HTML/CSS/JS/AS3, C4D/PS/AI/PE/AE. [Offline]

Imperial College London student blogs 2010

Undergraduate prospectus landing page

The landing page of Imperial's undergraduate prospectus. Art direction by Beth Elzer. Winner of UCDA awards. AS3/JS/CSS, AI/PS. [Offline]

Imperial College London undergraduate prospectus

2009

Image crop tool

A simple tool that allows image cropping in the browser. Implemented into tiny MCE to support web editors in everyday tasks, offering context-sensitive image sizes and easy cropping and embedding. AS3/JS/PHP.

2008

Student blogs

The landing page of Imperial's first student blogs -- a zip line with talking polaroids. Winner of EduStyle and UCDA awards. AS2/JS/CSS, AI/PS/PE/AE. [Offline]

Imperial College London Student Blogs 2008

2007

Victor's World

Online representation of photographer Victor Gonzales, featuring a drag-and-drop CMS to 'plant' the picture garden. Part of my M.A. 2007 final project. Published in Webdesign Index Vol 9 (2011). HTML/JS/CSS/PHP/AS2, C4D/AI/PS/PE/AE.

Victor's World screenshot
Jan Kerp screenshot

2006

SCSS pairs game

Pairs game for the online catalogue of tuning gear vendor SCSS. Screenshot shows start screen. AS2/PHP, C4D/AI/PS. [Offline]

SCSS pairs

2003 - 2006

More stuff

There is lots of more work to show and I will add it later to this page. Really.

Some old stuff

UX an IA work

Some bits and bobs of my UX work. Again, there is more, but most of it is awaiting publication or still un-scanned on paper prototypes or in sketch books.

2014

BackPat application wireframes

Wireframes for the 4 applications of BackPat. Far left: Text selection. Left: Multiple selection in a list. Right: The Pat-into-place technique to move the browser bar to the thumb. Far right: Map and image zoom. Short paper. Long paper.

4 applications of BackPat

2013/2014

Finger sliding on touchscreens while walking

Visualisation of finger sliding when touching the screen of a 4.7 inch phone in various locations while walking. From left to right: Left index finger, left thumb, right thumb, right index finger. Note: Users are not used to touching the screen with the right index finger and therefore tend to slide on the display during the touch process. Paper out soon.

Finger sliding

2011

Building of the One Hand Wonder interface

1 + 2: Visualisation of recorded horizontal user swipe data for left- and right-handed users. A: An early sketch of a thumb-optimised interface. B: An annotated paper prototype. C + D: The final interface at start-up and launched. Read the paper.

The development of the One Hand Wonder

Skills

  • Mobile interaction design
  • Mobile interaction techniques
  • Qualitative and quantitative HCI research
  • Academic writing
  • Machine Learning
  • Statistical analysis
  • Java (Android SDK)
  • JavaScript (Core JavaScript, jQuery, NodeJS, Polymer)
  • HTML4/5
  • CSS (2,3, SCSS)
  • AS3
  • PHP (basic)
  • SPSS
  • Photoshop
  • Illustrator
  • Premiere (basic)
  • After Effects (basic)
  • Cinema 4D (basic)
  • Arduino
  • Pen & paper