I’m a creative front-end web app developer with over twenty years’ experience working for digital agencies and publishing houses in London and Brighton.

About

I’ve worked on projects for the BBC, NBCUniversal, Legal & General, Diageo, EDF, Sony, Volvo, BT, Saatchi & Saatchi and the House of Windsor. I build beautiful, feature-rich web apps, and love using new browser technologies to surprise and delight end users.

Contact

Email
rich_ma_lingATrichplastow.com
LinkedIn
richardplastow
GitHub
richplastow

Skills

Frameworks
Excellent with React, Next.js, Gatsby, Vue and Node. Some Express and WordPress.
Libraries
Experienced with Redux, Three.js, React Three Fiber, React Spring and many more
Dev and CI/CD
NPM, Git, Webpack, Rollup, Babel, JSDoc, ESLint, Jest, Cypress, Storybook and Sentry
Languages
Fluent in JavaScript, TypeScript, Rust, HTML and CSS. Some PHP, GraphQL and Bash
Software
VS Code, Blender, SketchUp, Adobe Animate, XD, Photoshop, InDesign and Illustrator
Degree
BA (Hons) Graphic Communication with Painting and Photography
Other skills
Professional experience in Agile and Scrum, UX design, photography and retouching, illustration and icon design, sub-editing and proofreading, motion graphics and 3D

Web apps

Content management admin dashboard for streaming TV, in TypeScript and Next.js
Smart TV app for NBCUniversal’s reality TV channel hayu, using Node and React
‘Group Protection’, an insurance sales tool prototype for Legal & General, built in Vue
‘Bar Sim Game’, an award winning multi-user Three.js financial simulation for Diageo
Animated 3D guide with video and minigames for EDF, using TypeScript and Angular
‘Cell Survivor’, an educational game for AIDS Alliance, built in CoffeeScript and Phaser
‘Looptopia’, a 3D landscape where users create music collaboratively, built in Meteor
‘Dream Vacation’ for US travel agent RCI, using Node and a Mongo database
Suite of multilingual data-capture iPad apps for Winsor & Newton, with PHP backend
In-store touchscreen catalogue for footwear brand Kurt Geiger, built in ActionScript
‘Smarter Living’, a lifestyle and pension calculator for Zurich Insurance, using jQuery
‘Preview’, a magazine and Flash-driven e-zine with embedded video for Blockbuster
‘Body Shape Challenge’, a browser game for New Look shortlisted for an APA award

Websites

Advanced multi-tenant streaming TV site for Easel TV, using TypeScript and Gatsby
A custom book-creation site with WooCommerce and automatic print-on-demand
Game of Thrones themed shareable random quote generator, for Tesco and Blinkbox
‘Broo’, a custom WordPress theme with custom plugins, based on Bootstrap
Promotional microsite with HTML5 animations for the Ford B-Max launch campaign
Custom web design and build for fashion label Mark Fast, using a bespoke PHP CMS
Site with custom event-listing for London music venue Green Note, using Joomla

Design

Ideation, design and build of an award winning exhibition stand for VisitBrighton
A set of Three.js motion graphics for Responsible Travel documentary ‘Crowded Out’
Concept art for Loco Dojo, a multiplayer virtual reality game voiced by Brian Blessed
Brand redesign of GVA, the UK’s largest independent commercial estate agent
Visual identity and brand guidelines for MSK, Japan’s largest photovoltaics specialist
Design of award-winning customer magazines for Britannia, Land Rover and Volvo
Template design for a major brand refresh of Radio Times at BBC Worldwide
Won an internal award for brand development of Skytours at Thomson Holidays

Clients

Case Study

Bar Sim Game

Client
Diageo
Launched
Awards
Won the Immersive/Learning Simulation Award at DevLearn DemoFest 2018
Skills

This multi-user HTML5 serious game combines a custom 3D framework with an advanced business simulation, to provide a fun and social learning tool for Diageo staff.

Bar Sim Game was designed to reinforce learning during a two-day training course. It’s played by four teams of three people, where each team has a laptop and controls the marketing budget of a simulated bar. The goal is to maximise end-of-year profit, with help from a facilitator who can monitor their progress in real time.

An outline for the game mechanic and learning objectives had been agreed before I came on board. I produced a detailed functional spec and wireframes, wrote all of the code, and worked with the client’s art director on graphic design and photography.

I created a custom framework on top of Three.js, which allowed us to create the 3D bar scene very quickly, and add real photos of Diageo’s staff drinking at the bar! I also built a custom business simulation, which models bar staff and customer behavior, footfall and stock levels, to realistically calculate sales and profit.

Developed during this project

Flatland
For high performance animated 3D scenes, with optional physics, shadows and focus
Simulation
Each minute is simulated, using a repeatable sequence of seeded random numbers
Dumpsta
An ASCII interface helps visualise and balance the game’s simulation dynamically
Zipgrade
Automated deployment to staging and production servers, using GitHub webhooks
ES-Switch
Switch between source ES6, concatenated ES6, transpiled ES5 and minified ES5
Case Study

Group Protection

Client
Legal & General
Completed
Skills

Legal & General needed a simple way to sell complex life assurance. I used Vue to rapidly develop an MVP, working closely with a small, diverse team of financial experts.

Using Agile and rapid development techniques, this prototype passed through multiple iterations, but took just six days to build. It provided a minimal viable product which Legal & General could use for initial user-testing and focus groups.

Features

Sliders
Uses advanced customised RangeSlider components for intuitive visual feedback
Excel import
Transforms L&G’s spreadsheet data into JavaScript data using a custom CSV Parser
Accurate
Financial calculations are run on Decimal.js objects, not native JavaScript numbers
Extensible
The codebase is self contained and well commented, for a straightforward handoff
Case Study

Cell Survivor

Client
AIDS Alliance
Launched
Links
Watch the making-of video or just play it online
Skills

Cell Survivor is a retro-style online game. It’s fun to play but also carries a serious message, and has helped to raise awareness of HIV among young people around the world.

International charity AIDS Alliance needed an impactful, social media savvy way of reaching teenage boys, as part of their campaign for World AIDS Day.

I was given complete creative freedom but limited time and budget. I devised a simple but unique game mechanic, inspired by the body’s immune-defence system, and went on to design and build a game which balances education and entertainment.

In Cell Survivor you play a cell nucleus which can defend itself from HIV and other infections using condoms and antiretroviral pills. Each level introduces a new defensive technique, applicable in the game and also the real world.

Project lifecycle

Pitch
I put together the pitch, including PSD mockups and target audience analysis
Mechanic
A unique circular take on ‘Breakout’, inspired by receptors on a white blood cell wall
Artwork
I used Photoshop to create all sprites and graphic elements from scratch
Brand
Re-imagined the client’s brand as a 1980s arcade title, like Konami or Atari
Balance
Weighted each level to keep it challenging without alienating inexperienced players
Maintenance
I run and maintain the ‘high scores’ server, and test the game on a monthly basis

Maximum reach

Responsive
Icons position themselves depending on landscape or portrait orientation
Multilingual
Uses Google Translate to switch between 100 languages, from Albanian to Zulu
Browser
Tested on IE11, Edge 13+, Firefox 12+, Chrome 15+, Opera 15+, Safari 6+
Platform
Tested on Windows XP+, macOS 10.6+, Android 4.4+, iOS 4+
Case Study

Looptopia

Client
Loop.Coop
Launched
Skills

Launched at Brighton Digital Festival, Looptopia combines a range of new technologies including WebGL, WebSockets and Web Audio to deliver otherworldly musical experiences.

Looptopia is a strange and beautiful web app where you can sculpt music visually, jam in real time with other users, and immerse yourself in a vast 3D soundscape.

This project provided a unique opportunity to explore cutting edge web technologies on the server and in the browser. The Meteor framework allows thousands of users to collaborate on a shared collection of documents, with live push-updates to clientside HTML when data changes. X3D uses an HTML-like syntax to represent a 3D scene. By hooking X3D up to Meteor, I was able to create a reactive multi user environment which can scale without losing performance.

App architecture

Server
The backend is written in JavaScript, running on a Node server
Database
Data is stored as JSON objects in Mongo, a high-performance NoSQL database
Meteor
Much code actually runs on server and client, with communication via WebSockets
Packages
Looptopia uses Iron Router, X3DOM, Moment and many more NPM packages
X3DOM
A JavaScript implementation of X3D, the W3C’s successor to VRML

Special features

Interactive
Elements in the 3D scene react to user activity by animating and playing music
Collaborate
Users can modify the 3D world, and modifications are immediately seen by all users
Generative
The 3D landscape evolves according to a semi-random algorithm
Archived
All modifications are permanently recorded, for ‘undo’ history and audit trail
Case Study

Dream Vacation

Client
RCI
Launched
Skills

A web app I built with Express, Mongo and jQuery which was the centerpiece of a ten week promotional campaign. 150,000 users registered and designed their dream holidays.

To celebrate their 40th anniversary, US travel agent RCI ran a competition over ten weeks and gave away 40 holidays. Users were encouraged to invite thier friends to enter the competition using in-app Facebook, Twitter, and Email integrations. The app tracked each invitation, and rewarded users when one of thier invitees registered.

I was provided with wireframes, artwork and a functional spec. I built and deployed the app, tuned its performance during the campaign, and compiled analytics results.

App architecture

Server
The backend’s written in JavaScript, running on a Node HTTPS server on a CentOS box
Database
Data is stored as JSON objects in Mongo, a high-performance NoSQL database
Router
Advanced server-side routing and request handling is provided by Express
Templating
The app uses Mustache, a template syntax for injecting content into static HTML

External APIs

Facebook
Facebook’s Graph API is used to send invitation messages to users’ Facebook friends
Twitter
Users can tweet an invitation on their Twitter feed at the click of a button
Email
The app uses the Nodemailer package to send invitations to users’ email contacts
Promotion
A service called HelloWorld records competition entries over a secure connection
Feedback
Comments and customer satifaction scores are collected from an OpinionLab popup
Analytics
App usage is tracked with micro-conversion tracking tags and Google Analytics