Freelance creative developer and designer
Profile
I'm a BAFTA award winning interactive creative developer and designer with over
24 years online and digital experience.
I design and build fully responsive websites, business systems (Saas), single page apps (SPA/PWA), interactive games, iPhone/iPad (iOS) & Android apps, touch screen installations, Facebook apps, online
banners and motion graphics work.
I use HTML5 (inc canvas), CSS3 &
JavaScript, React, APIs, Laravel, SQL along with After Effects, Photoshop, Illustrator etc to create work for my clients. Thanks to my full stack skill set ranging right through idea-generation, concept development, UXD, design, data-visualisation, BI, SaaS, front-end dev & back-end dev, database management, I'm capable of delivering full end-to-end projects complete on my own or as part of a team.
Thanks to working on-site in top high-profile London full-service digital media agencies for over a decade, I am used to hitting the ground running and completing the projects to very tight deadlines at short notice with a 'can-do' attitude that exceeds expectations (so I'm told - see testimonials below!).
Fortunately I've had opportunities to work across a varied range of projects using my wide range of skills and my passion for all things digital. I have worked with hundreds of great people while London based and now I am based in York, UK. My opportunities so far have allowed me to explore a great range of work and be recognised with multiple press and award wins from the likes of:
BIMA
BAFTA
The Royal Television Society
Y Design Awards
EMMA Foundation
IVCA
& others
Thanks,
Mike Rigley
mike@mrmikey.co.uk
Clients
ACCA
Adobe
Airbus
Alexandra Palace
BBC / CBBC / BBC worldwide
Boots
BT
Cadbury
Cartoon Network
Channel4
Cisco
Coca-Cola
Dell computers
Dolca & Gabbana
DTi
Duracell
Electronic Arts
Ericsson
FedEx
Fiat
Fujitsu
Glaxosmithkline
Google
Greenpeace
Gucci
Hewlett Packard
History Channel
HSBC
Jameson
M&S
Master foods
Merseyrail
MET Police
Mitchells & Butlers
NHS
Nick Jr.
Nokia
Paramount
Proctor & Gamble
RNLI
Royal Institution
Sage
Santander
SEI Healthcare
Selfridges
Shell
Skoda
Sky
Sony
Ted Baker
Tesco
The Sunday Times
Transport for London
Turner
Viglen
Virgin media
Warner Bros
Wildfowl and Wetlands Trust
Awards
What if? web games (as part of gridclub.com)BAFTA Winner: Interactive Award in online learning
EMMA Winner: 0-18 Learning category
The Fimbles CD-ROM for BBC Worldwide
BIMA Winner: Best Training & Home Learning
BIMA Commended: Best use of CD/DVD/Kiosks
Right Start Award Winner: Gold Award
Design Week Awards Nominated: Interactive Media - Information
Inside-out website for channel 4 Learning
BAFTA Nominated: Interactive Factual category
IVCA Winner: Biz Net 2003 awards
IVCA Nominated: Biz Net 2002 awards
EMMA Nominated: 3-18 year old learning category
Puzzle maths website for channel 4 learning
Royal Television Society Winner: Multi-media & Interaction 2001
Duracell and DTP's Summer Athletics for Waste Creative
2009 Pixel Awards Sports Nominated
Elegance website for P&G
Y Design award 2007 winner - The so successful award
Campaign Digital Awards 2007 Nominated
Pelican Interactive Big Book CD-ROMs for Pearson Education
BETT Awards 2005 Nominated
Testimonials
"When you have Mike on your project you can rest assured it will be delivered on time, on budget, beyond your original expectations... Always delivered with good humour and a smile!! An absolute pleasure to work with."
Cheryl Brooke-Donovan
Tangent90
Projects: In-store promotional for Will.i.am, Brilliant Futures, Medical iPad app and many other touchscreen apps and iPad apps.
"We had a great experience working with Mike on a project with very tough requirements and a tight, non-movable deadline. There was real commitment and stamina in delivering the work, and it was a pleasure to work with him. Highly recommended."
Adam Knowles
Elvis Communications
Projects: We are the people,
Virgin Media
"Mike's a pleasure to work with. His pro-activeness, expertise and clear estimations allowed us to deliver the project on-time and on-budget."
Sophia Hrywnak
thisiszone
Projects: Fishermen's friend for Greenpeace
"Mike was an absolute pleasure to work with and a valued member to our team. Despite the short timelines he exceeded our expectations in the delivery of the project and we appreciate how quickly he was able to turn it around for us. I would highly recommend him and will definitely be using him again in the future. "
Amanda Piehl
Bedrock Healthcare Communications
Projects: confidential
"We hired Mike based on his reputation as an excellent games developer. Mike quickly established himself within the project, grasping the complexities and providing invaluable advice on enhancements. His ability to produce high quality work within tight timescales, combined with strong self-management and communication skills and easy-going nature, meant he more than lived up to his reputation. I wouldn't hesitate in hiring Mike again."
Dougie Pender
Yomego
Projects: Tesco Delivery Dash, Imagination Challenge
"Mike's in-depth technical expertise and willingness to go above and beyond the call of duty meant that we produced a great-looking tool on-time and on-budget."
Steven Levin
Display Digital
Projects: Boots skincare consultation
"I've called upon Mike's expertise on numerous marketing projects, which he has always over delivered on. He is a pleasure to work with and we consider him as part of team Montage."
Nav Saini, Technical Director
studio montage
Projects: Viglen HTML5 website, Viglen IT banners
"Mike, I could kiss you right now mate. Seriously amazing stuff."
Rida Hamidou, creative producer"
Lovers Design Studio
Project: HTML5 banner animations for Alexandra Palace
Selected projects
Christmas cracker games for Mitchells & Butlers
I seem to have an X'mas tradition of making some fun little "cracker pull" games for 3 popular restaurants in the Mitchells & Butlers' stable: Toby Carvery, Harvester, and Stonehouse.
Working for the 3rd Christmas in a row with the loverly people at One/Fifty Consultancy to bring a little X'mas cheer to all the customers in the form of a little cracker game that gives them a new restaurant voucher each week and also an unlimited amount of cheesy festive jokes!
As this is the third year running these games (and I love making analytics KPIs) we can get some insight in the user habits when playing the games. Each year the games surpass 2 million vouchers claimed which obviously make the user and the client very happy. I’m not as happy as I can see most people are there for the vouchers and no where near enough come purely for the X’mas jokes! …although I may have skewed the analytics on this one 😉
The games are embedded in the restaurants’ app from where the user gets to play against their friend to win the voucher …or just sneakily play it alone to make sure you get the bonus! I developed the game play, animation and also the backend API that saves which users have won that week to make sure no one gets too greedy.
The game also then jumps off to a holiday competition from Jet2 Holidays and also branded filters for Insta and TikTok.
ACCA Brand Tool Kit website
ACCA, the global body for accountants, have hundreds of designers working around the globe on various branded work. To help keep this brand consistent, I was tasked by Barley Partners, the brand guardians, to create an online space where the latest brand guidelines could be quickly updated and distributed to all the locally based designers in each region.
Barley are great to work along side and gave me a long-leash in the functionality and UXD of the CMS - as long as it was clean and up to their standards, everyone was happy - especially the final client, the brand manager of ACCA. Very happy clients is always the goal :)
The system is a versioning content resource management system (CRM), as such it keeps a track of each new upload item (digital brand guidelines, video assets etc) and versions each new update to existing items. Each user’s download is also tracked so the system can show users that are new to them and give ACCA a real-time overview of who is missing the latest update or hasn’t downloaded the files they should be using. This all helps keep the brand’s voice consistent on a global scale.
Thanks to the success of the initial system, the client commissioned a further phase of the project. This second part is to facilitate the automatic sending out of emails to sets of people on the main email list (the designers around the globe). So I built a bespoke email system that allows the client a simple but flexible CMS for building branded emails that can then be sent out to groups of people as needed. For instance, if the email is to inform video operators that there are some new assets they may want to use, we\’d only send this to the relevant people. As I quite enjoy tracking analytics to gain some business insight, I added the ability to see who had opened the email and the ability for the client to add tracking to any part of the email, normally a call to action button saying “download the new assets”.
Elite recycling solutions
Working once again with the talented people at Barley, I built a classic but modern corporate website for Elite recycling solutions, a major UK recycling firm. The site is kept visually interesting with various calm animations of headline text and images as the 'hero' of each page, along with boxouts and snippet style content and animated info-graphics, using dynamic data, in the page's content. Obviously all mobile-friendly and reactive to various screen sizes in a graceful and relevant way.
Most of the site is updated by the client via a bespoke CMS build. Which feeds everything from the latest news section, team latest team member's profiles, the dynamic animations, all the site's text content and each sections' keyword and page description for a little SEO help.
Core systems
Core systems was developed from a very exact client brief that had everything they needed to digitally run national civil engineering contracts without a hitch …well, more importantly, with a system that can handle the unknown hiccups that would inevitably crop up on such large projects.
I designed the front end to be clean, simple and most of all: user-friendly. My user experience design always puts the users first; this is a working tool and not a pretty marketing campaign. I built the front-end in a mixture of HTML5 and javascript for realtime interaction with the API backend, built by an off-shore company.
The system is very comprehensive, covering the whole scope from start to finish of the contract. From client database, proposal, baseline timetable and costs forecasts and digital contracts before the work started. Once the on-site work was underway the system tracked every aspect of the job digitally, it is important to have a perfect trail of documents for this type of work for transparency and audit reasons, as the end clients are often public or govt. bodies but also when managing projects with budgets into the millions, you need to be able to see where the cost has gone. Included were a daily work diary to log all workers’ hours on-site, a ‘change request’ system with various automatically generated impact assessments and dynamic graphs and tables clearly showing costs and time efforts.
The system has a real-time summary overview and can generate more in-depth weekly progress reports, giving the managers an invaluable oversight week on week, to help them spot and solve problems before they become large issues. The system also has to handle the raising of invoices and tracking of payment against each change request and timetabled payment, this was logged per instance but also I generated the culmative data into tables and graphs for user ease - designing a user-friendly system is about putting the correct information in front of the user just as much as it is making sure they can navigate the system with ease.
HTML5 online banner animation for Alexandra Palace
The creative director from Lovers (London) really wanted rich, textured, organic and layered animation - ideally suited to video. Unfourtunatly we didn't have video banners spots available, so I had to use all the tricks in the book to get the CD's lush vision squeezed into serveral formats at very small filesizes. It worked out well in the end and the files don't waste a single byte!
Fullstack development for a great organic food producer
I developed the brand new Mr Organic website. Fully responsive HTML5 built with superfast React.js. I created a bespoke Wordpress backend. The site stays alive thanks to the live instagram feed, and client updateable What's on section. The site includes several sections including recipes and news sections, where it was important that the client could update themselves. To aid the client with the updating process I also created over 30 tutorial videos to teach Mr Organic's people how to use the custom features of the CMS to update their site. I used aggressive browser caching, data caching and various other workarounds to get around the client's seriously slow hosting environment.
They sent me a basket of organic goodies. ...they didn't last long! Yummy.
Fullstack development for a healthcare provider
I was asked to build Respect Care's new website from the smooth designs by a great freelance digital art director & designer called Manu. Based on a Wordpress backend, with lots of custom bits, so the client can update whenever they liked. The front end is a highly responsive HTML5 site with smooth css3 animated transitions to add that little bit of softness to the experience.
Phone book application
To help streamline the the day to day business for its employees, Merseyrail tasked me with designing and building an Android app for phonebook look up. There were a few complications to be considered; namely phones don't always have data connections underground where a fair amount of employers are. I solved this problem by running a local couch database on the device. Each month (and first-run) the app checks if it has a data connection and if it does, it will sync with the latest contact data and update it's local database ready for off-line use again. I wrote the API for this and also the backend PHP to query Merseyrail's Active Directory/LDAP employee directory to make sure we had up to date information.
The client also needed bespoke lists of extra contact details beyond the bulk Active Directory numbers, list of station phone numbers, emergency numbers etc. For these I employed a bespoke database for quick access and fed this into the API so all the data came from the single source as far as the app was concerned.
The app utilises 2 factor authentication for added security of the senstive data; utilsing Google Authenticator API as well as generating QR codes for quick scanning. Administering the day-to-day contact details was done via Microsoft Active Directory. But the client needed a bespoke web-based admin interface to curate and update the bespoke lists of contacts. For this I designed and built a the CMS as a single page web app (using mostly HTML5, javascript/jQuery, php & mySQL) with a focus on an easy to use UI to help avoid training costs for the client.
Medical simulation single page web app
SEI Healthcare needed their specialist patient simulation project updating with a new look and content. Doctors go to the site and test their knowledge in specific disease areas through multi-patient quizzes, based on a multiple choice format. Hopefully the physicians learn a little along the way thanks to the heavy emphasis on feedback to answers, references and peer stat review charts.
A major requirement was also that it worked fluidly on mobiles, tablets and desktops (see second half of video walkthrough for the mobile site). The site needed to be a modern single page app that interacted with the API seamlessly.
From the client's designs I built the HTML front end using bootstrap, jQuery and javascript, along with a little php to write my own missing parts of the API. The site is live and public facing but requires a log in, which you can get for free but only if you have medical credentials (most of my work in this sector is top-secret and cannot be shown, so it is refreshing to be able to have this piece in my portfolio!).
HTML5 online banner animation
HTML5 animated banners are always fast paced, quick turn around jobs and this was no exception. I developed 60 smoothly animated Google doubleclick advertising banners for Homelyfe Insurance. There were 3 variations of 20 sizes, from little animated mobile banners to full-screen interstitial ads. All with a time deadline. As with almost all of the work I do, I worked remotely on this project with the client in London.
Single Page App
A quick (1 day) little single page app to convert the user's text to Morse code's dots and dashes. Built in React.js and CSS3 with responsive design help from Bootstrap for that 'works on mobile, tablet and desktop' type thing. All the useful social share channels (and Google+) too for extra share-a-bility.
Interactive multi-touch attractor toys
watch video of 'nodes'
watch video of 'flock'
The client came to me to concept, design and build several interactive 'attractor' apps for their latest line of very large multi-touch TVs. These TVs are located in hotel lobbies, trade shows, clubs etc. They play one of the attractor apps in demo mode until a passer-by's interest is piqued and they investigate and play with attractor.
Each interactive had to interesting enough in demo mode but also highly 'touchable' and playful when a user (or multiple users) came to play. The high-end TVs have an nice Android system on-board to run these interactives.
Humberhead peatlands website
Natural England tasked us (I worked along-side a great digital web designer lucy Rigley on this one) with designing and building a very responsive website for their Humberhead Peatlands National Nature Reserve.
We needed to make sure we organised and displayed the large amount of content that Natural England needed to get across to the users. The site needed to be content management system driven and responsive for mobiles, tablets and desktops without losing the content or context. This was a full service project; from IA, taxonomy, UX design, branding (they previously used Natural England's umbrella brand) to responsive web build (including bringing in the latest news, images and albums from Facebook) and finally web hosting and then even CMS training.
Train departure board screens
Merseyrail wanted to clearly display 3 groups of information all on the same screen. I started from scratch designing the UI to be to be both easy to scan and easy to drill-down into the live data. The boards/screens show:
• Arrivals and deptartures for the assigned station
• Merseyrail's real-time 'trains on time' status and the rolong average from the last 2 hours, along with the national average of these for comparison.
• The current state of both lines and the four major stations along those lines.
HTML/ajax/php talking to National Rail's DARWIN live train web-service, Merseyrail's own PPM and line status feeds.
HTML5 Website top banner
View 'Charity' banner
View 'Government' banner
View 'higherEducation' banner
View 'X-Ray' government
View backup GIFs
Most of my work is repeat work for happy clients and agencies. Studio Montage hired me once again to add to our previous work for Viglen.
This time we needed 'hero banners' to go at the top of each of the 4 sections of Viglen's sub-site. Using HTML5's canvas and good old fashioned javascript I developed the animated banners to get the message across.
I also pumped out the animated GIFs as a backup for the small minority without the latest HTML5 browsers.
Roster shift system
I designed and built a roster system for Merseyrail that handles their very complicated shift patterns and rota systems for all their stations and support workers. Admin users can easily add new rotas, build shift patterns, add new people to shifts from the LDAP employee lookup system and generate shift sheets for any future week.
Designed with the user at the forefront of the UI and built using HTML, javaScript, php and mySQL.
Flying finances
The Post Office had a need to train their new staff in all the complicated ins and outs of manning the Bureau de change. I was hired by the Nottingham agency SpinningClock to code a responsive HTML5 game. The game... er I mean learning tool makes use of HTML5's canvas, preloads each level as needed and enhances the experience with some nice smooth animation.
The rich media experience had to be just as useable as an iPhone app but in the iOS browser. The website obviously is perfectly fine for all modern browsers on pc and Mac too as well as Android mobiles and tablets - basically the Post Office wanted employees learning all the time, wherever they were ;)
Staff engagement touchscreens
Merseyrail had a lot of staff missing out on access to their intranet because they were not in the same place long enough to log onto their desktop machines. The solution was a set of 90+ touchscreens dotted around station break rooms and driver rest stops, that had all the best from the intranet and was a gateway to more in-depth info.
The screens show lots of 'quick bite' snippets of dynamic information; the current weather direct from the MET office, line running status, latest news etc. But also have meatier servings like an LDAP powered employee lookup, 'post-it' note message system for staff comms, latest Merseyrail news stories, job vacancies, commonly needed forms along with the usual high-frequency external links of Google, Network Rail, BBC news etc.
The frontend UI is built using HTML, CSS & javaScript with a PHP & mySQL backend. Fun-fact: I took a photo for each of the possible weather conditions for the weather 'tile', but it was hard to test properly as it only ever rains in Liverpool ;)
Maths tutoring website
I was tasked with bringing a very well established maths tutoring site up to date and into the mobile age. After an initial period of R&D, I designed and built a flexible and scalable UI with a full example tutorial ready for user testing and demoing to investors.
The tutorials are step by step and reactive; they will explain the same point in another way, with supporting animation, if the user didn't quite understand the first time. Technically it had to work on desktop, tablets and mobiles with an emphasis on the varied mobiles in use in schools around the globe. This spawned lots of problems in the design; trying to avoid just going for the lowest common denominator and keeping the highly engaging flow and animation to aid the understanding and retention of the lesson. The UI can work in both portrait and landscape and has a 'split' bar so the user can fine-tune the UI themselves, throughout the lessons, if they prefer the emphasis to be on the tutorial's animation and explanation or the accompanying (multi-lingual) text explanation. Flexible guided learning is key here.
iOS and Android video application
I produced a cross device mobile application for the nice people in the fashion and textiles dept. of The School of Arts and Digital Industries of The University of East London.
The app scales to fit any screen on iOS and android devices. We have lots of video and PDF content, which is browsable via the app, along with database of FAQs. I also created the CMS and database that powers this app and allows management of the videos, PDFs and FAQ items. The web service chooses the most relevant video size for the device, so we don't waste bandwidth.
The app was designed to be used offline too. Allowing the students to download the content they need, while they are on the Uni's wifi, for later use. So no more having to reply on decent wifi (now there is no excuse to not work on the tube too).
I also built the accompanying support website (no longer online).
Classroom makeover
Viglen are overhauling and updating their site to the latest HTML5 technology. I was tasked by the good people at Studio Montage to create an interactive classroom makeover app in HTML5, canvas and javascript. Which shows the users how to integrate the latest ICT into their classrooms.
We had a choice of 6 classrooms to fill with all sorts of posh products, all accessible via the animated menu. The user simply dragged and dropped their chosen products into the scene, scaling them as required.
Once the user is happy with their prefect classroom, they get to save it for future reference. Or they can print or email the room to their IT dept. to get the ball rolling with a big hint ;)
The website works on all flavours of browsers supporting HTML5.
Video emails
Novacroft needed 2 video emails. I worked along side a great copywriter; Tiphanie Mellor. Along with designing and building the emails, my main task was to design and animate the videos.
For the first video we needed the excitement of new year to spill over from the email while delivering the company's new year message. A second video was a lot calmer and conveyed the brand information while floating around in a spring meadow on a balmy spring day - a very relaxing job this turned out to be.
Google banners
Google wanted to shout about thier new drive cloud storage system, so I produced a set of simple and clean banners that quietly shouted their message with a little humour.
Flash banners
Another straight-forward and quick project for CBS. I coded a nice reveal effect for the text in these banners so even if you have seen them before or see 2 on the same page, they are a little different each time. I prefer to code all animation effects if possible as it makes little things like randomly scrolling backgrounds a lot quicker to implement and scroll smoother as a bonus.
2 sets of 5 banners, along with GIF backups and a few Facebook ads all in under 2 days - everything goes nice and smoothly when everyone knows what they are doing (thanks, once again to the pros Ignition Creative) which leaves a happy client who comes back for more.
Takeover video banners
It is a bit of a web advertising cliché; a snowboarder 'breaking' out of one side of the site overlay and landing on the other side, but it was fun to do still. I got to keep my After Effects skills sharp while producing the 4 'flavoured' sets of the banners for loads of sites each. Formats included full site takeovers and pop up video banners all complemented by various leaderboard, mpu and sky units, across 2 media serving platforms.
I still think snowboarding is silly as you get cold hands and fall over a lot. Strange hobby ;)
Information Design
I love the challenge of visualising massive data sets in an organic and user friendly way. Whether it be a small graphic to show loads of weather information in a single glance or creating dynamic environments that evolve as you navigate a massive database to find that useful set of data out of the 70,000+ items.
AS2 Flash banners
Another quick project, straight forward, nothing too complicated, just some nice animation. Another project with Ignition Creative where everything just goes to plan which keeps costs down and makes everyone happy.
Dynamic e-card
The RNLI needed their e-card system completely redoing so it could handle animated covers, inside cover images or text and a few other little dynamic tweaks. It was a short turnaround and worked perfectly first time. Happy client and nice to have another great charity on the portfolio.
Desktop app for Dulux
Dulux needed to bring the content, essence and success of their new brand exhibition in Athens to all employees and not just the ones lucky enough to be there in person. I was hired once again by the good people at DesignBridge London to produce the downloadable desktop application (runnable on both Macs & PCs) that easily showed all the in-depth content needed to deliver the brand concepts.
The project's UI was based around a 3D generated, room-by-room fly through. The viewer would navigate rooms either sequentially or via the jump navigation. Once you are in the 'room' then all the interactive points of interest animate on ready to take you to their content. Videos, poster images and pdfs are all viewable in the app or a print resolution version is ready to download.
USB credit card
The Ashes 2013 held an exclusive launch dinner inviting lots of big-wigs and cricket people along to Lords cricket ground. For my little part of this I built a dual platform invitation application which was sent out on a clever little usb credit card made by Goosewire. The lucky invitee puts the card into their computer and is greeted by Graeme Swann.
I also designed and built the mySQL database to capture the attendee's registration details sent from the desktop Flash application. I build several layers of error handling into the system that gracefully degraded if any problems cropped up. The dinner invitee was then sent to a little mini-site for further videos of Graeme and his chums.
AS2 takeover video banners
They have some quality old programmes on CBS drama and they rightly wanted to shout about it in a series of expandable video banners. I built 5 different sizes of expandable banners. Once expanded the user had 4 different videos to sit back and enjoy before (hopefully) clicking through to find out more.
In youTube Flash banner
Ewan McGregor and Naomi Watts don't make an appearance in this little banner I built for Ignition Creative, but then I only had 50k to play with. Even with 50kb (well, I was allowed to sneak an extra 1.5k without the media people complaining ;) I still managed to use my Flash animator skills to get 6 frames of lovely smooth fading and a video background! I'd had to employ all the little video tricks to get all the content, including the video and code crammed into 33k as the media component took up over 18k before we'd started.
Star Trek game
The Vulcans need to recolonise the planet, you are put at the helm in charge of selecting the perfect place for the construction and surveying that needs to be done on the planet's surface. Once again working with people at Harkable and this time with a great illustrator called Guy Warley, I used my Flash developer skills to create the Flash game application and good old fashioned animations (I'd almost forgot all about character walk cycles and smoke effects! It is a refreshing change to be utilised as a freelance Flash animator as well as a freelance Flash developer). A new mission was released each day of the month. My application build was nice and dynamic so handled every new day easily thanks to a nice back-end that talked nicely with the Flash game. The game supported 15 languages.
As play progressed over the days the landscape built up as the levels progressed - remember that mine we built on level 15, well it is now up and running and looks great. The user can drag around the map or just use the mini-map to click to scroll to that position. As the terrain develops my code takes into account the areas where you can and can't build or prospect anymore - there is no point trying to land your ship in the water or on the side of a mountain!
Computational Design
Whenever I get a spare moment I try and make a small program that helps explore an area of computational design. This is design (or art) that is created through the use of interactive/iterated algorithms. These vary from experimental interfaces to 10 minute toys. ...mostly just used to generate nice posters ;)
Multilingual iPad app for a Pharma company
Working alongside the chaps and chapesses at Tangent90 once again, I built an iPad application for an undisclosed pharma company (hence the really blurry thumbnails). I developed a front end iOS application to work with Tangent 90's document vending system. The user logs in, at which point the app goes and checks the server for the documents they have access to and then the iPad application downloads all these docs ready (so we can work offline just as well). The documents (pdfs, videos, sounds clip etc.) can be viewed on the app but can also be selected to be emailed the user for further reading on their desktop.
The app handles portrait and landscape happily, relaying out the content to suit and also scales the graphics to suit the retina iPad3 or the iPad1&2.
In-store promotional animation on plasma screens
I like being a freelance designer and developer as I get to work with lots of nice people, once again with the smart people at Tangent90 I built an AIR app that played out over a few plasma screens in the entrance of Selfridges London. The installation took pictures of everyone coming through the door, which then where cropped to a head and shoulders image (all this clever stuff done by Tangent90) which then found themselves 'dropping' into my mosaic of other customer's faces. The mosaic tiles are then colour tinted and make up a larger image of Will.i.am.
Depending which version is running at the time, we either play a promo HD video every few minutes or (my personal favourite) explode the mosaic's tiles and spin them around in 3D before putting them back in their correct places. For no reason beyond eye candy but, for once, that is what you need to attract the passers-by attention.
Michael Bublé Facebook app
What could be better for Christmas than a personal video from Michael Bublé? How about two videos!
I worked with Harkable on this video mapping Facebook app. The user gets to give Michael a present to unwrap; a photo of themselves or a friend. Then a 'good' ending or a 'bad' ending is chosen depending what reaction you would like from Mr Bublé. The good ending will make every Michael Bublé fan happy as he kisses your chosen photo which I (after brushing off my video motion tracking skills) magically motion tracked into the picture frame on the Flash video in real time.
A nice little twist, which is a testament to Bublé's humour, is that you can also have an 'unhappy' ending. I won't give it away but needless to say Michael is not happy with his photo present, but it a great way to tease a non-Bublé fan, ...if you can find one.
iPhone demo mock-up
I produced a quickly turned around Flash demo of an iPhone app for a client who had a great idea and needed a visually working run through of an iPhone program to present to potential investors to get them on board. I can't say much about the project as it is still under wraps (hence the blurry screen shots) but I can say the demo did it's job and helped win funding for the project which is now underway.
Facebook app
UK fishermen are not getting a fair price for their catch, Greenpeace, working with the agency Zone, decided to highlight this by allowing Facebook users to star in their own sea shanty. The experience is a pre rendered video with the user's name and profile pic seamlessly overlay onto the footage. The personalisation included a shop name, the user's profile pic blended into the pub scene and even a personalised tattoo motion tracked onto a moving arm.
touch screen application
Working with the agency Tangent90, I produced an application that ran on 3 large touch sensitive plasma screens to be shown at trade shows. The project was based around an infinite 'big wheel' carousel of content tiles that then clicked through to a video and some more copy. Users could save details of which content they had viewed for later review.
property development website
This luxury property site (Flash with simple html fall back) was crafted over 2 years with a 'high quality' ethos always in mind. The site runs off a CMS for most content and a bespoke XML doc for the more complicated portfolio sections.
Facebook app
Working once again with very nice people at Yomego design agency I created this Facebook app for Tesco. The player gets to play the part of unsung heroes that pack your online delivery by grabbing the items from a conveyor belt of products for 4 customers at the same time.
Each level gets faster and harder which would be OK if it wasn't for the random punctures and heavy traffic! Strangely addictive and I'm still not sure why, but then again I don't understand shopping either ;) Statistics time:
-100k plays in (just over) the first month
- the average user playing 16 times
- nearly 200 players playing the game for over 6 hours (100+ times)
- 1 player has played over 1200 times, that is nearly 3 days worth of game play!
With so many people playing such a 'sticky' game it is a good job we tested thoroughly before turning it out into the wild.
YouTube custom channel
Working once again with the nice people at MediaCom I created a custom YouTube front end to EA Sport's FIFA channel. The videos, thumbnails and copy were all served up from MediaCom's back-end via XML which also controlled the tabs. All-in-all leaving EA with an easy to update and flexible custom channel which they update constantly.
User generated image and video viewer
Working with the guys at yomego Scotland, I built a nice little user generated content viewer. All the user's competition entries can be filtered by location and then the app selects a random selection of entries from that location to display. Some are videos, some are images, some portrait and some landscape - the app handles them all.
Thanks to yomego's Facebook API, we also were able to use the app to view the user's Facebook photos.
The client needed to place the project on different sites at different sizes so it is nice and scalable to fit any size that gets thrown at it :)
AS3 animated banners
A lot of banner projects are straightforward enough, no boundary push and no bleeding edge, just simple and effective animation that helps the message get across. I produced a set of banners for FedEx, a few sizes each for 2 regions.
banners and projection animation concept
Two facets to the same project here. First is a set of banners for Fujitsu's 'cloud' computing solution. The second I had to dust off the old Photoshop skills and produce a mock up of a live projection animation.
menu animation and little line animations
Sometimes it is nice just to do some old skool animation. For the Cabana website I dusted off my After Effect skills and made a 3D animated menu in the style of window shutters. I put this into a little Flash wrapper and made a menu for the homepage of the site.
Dotted around the site are little animated drawings. I just couldn't help myself with these anims though and ended up animating a lot of them with code so they were different each time the user came back. I don't like the punters getting bored!
DVD trailer viewer
I've made 5-6 versions over the years of this project to show off Warner Bros' back catalogue of children's DVDs. Each time adding a little here and there, sometimes adding a game or a little piece of interaction. The latest version got a conveyor belt and robotic arm and user controlled mood lighting, ...I can't quite remember why now.
Graduate careers path chooser
Airbus only wants the best and most suited graduates for their training programs and jobs. Working with Digital Mosaic's designs, I built this career path chooser which took the applicant on a journey of 5-6 questions and then suggested the best area of the Airbus group to apply to.
An XML based decision maker and some slick 3D tilting and panning makes this project stand out from the usual recruitment tool.
mini game website
Drayton Manor have a new ride opening - the Ben 10 Ultimate mission ride - and they wanted to tell the target audience about it, well any of the audience that are over 1.2m tall. So I was hired by my friends waste creative to make a mini-site in the Ben10 flavour with the usual info about Drayton Manor and a nice little 'being on a roller-coaster while shooting at baddies' game. Can you guess what the new roller-coaster ride is like? ;)
interactive web experience
Once the user has followed a link from a placed YouTube video, they are granted access to Mi5's computer system giving users the chance to become a 'spook'.
I helped design the UI and the mini-tools. I built it in a slick manner with sliding and semi-opaque windows so the user felt they were peeking into classified documents in order to find out who they could trust.
Christmas quiz
'Chris Moose' quiz (say it in a Scottish accent to get the pun ;) was a quick little quiz I coded for the Scottish agency JamHot. The questions are from a big XML set of varying degree of difficulty and all the text was updateable by the client at any time again via XML. Chris Moose has a lot to say so I got the chance to dust off the animation skills for Chris when he is giving feedback and talking. The quiz also has a PHP/mySQL high score system, which I built to complete the package.
Ben 10 Ultimate Alien mini-site
Working once again with Waste Creative I coded this little mini-site in super quick time time ready for all 15 languages and 100,000's of fans wanting to know about the latest in the Ben 10 line - the 'ultimate alien'.
The site has videos, games, Ben10 facts, favourite alien voting results and even loads of masks you can download and print out :)
trade show presentation
HSBC wanted a presentation tool to introduce the speakers of a major conference. The tool had to scale and work with 56" plasmas as well as touch screens and had to be updateable on the day by the people presenting it. So I built a presentation that scaled perfectly and was easily updateable via XML at any time, it was just what they needed.
Facebook application
To highlight F-Secure's anti personal identity theft program, I created a Facebook app that showed a video of John dropping his credit card on the floor for anyone to play with. The video then zooms into the card and the details warp into the Facebook user's own name to highlight they may need F-Secure's product too.
product hero viewer
I created an hero product viewer for the main pages of kittydolittle.com. The viewer takes any number of products and lays them out in space to fit nicely and then shows each product at once with some nice animation. Simple and effective.
high-def video CD-ROM
I was tasked by Random42, a specialist biological 3D rendering outfit in Soho, to show off their new high-definition molecular animations. Luckily I didn't have to understand any of it.
Button's furry tales story website
Scottish agency Chunk tasked me with building 3 Flash games for inclusion in Cadbury's new online children's book and activity website.
I created an animal piano game where we get to play follow the leader and copy a well know song or the player can just freestyle. The next mini game was a jigsaw game. But not just any jigsaw game, this one has advanced snapping to groups to aid the building process - just like you would with a real jigsaw. The last game was a nice and simple 'painting by numbers' type game where you colour in the supplied line drawing - no worrying about going outside the lines here :)
we are the people we've been waiting
We are the people movie is about the state of education in Britain. The site is a massive 2D parallax of 'paths' which the user follows around. I coded the movie's site to a short turn around. It has quite a few talking heads with people like Richard Branson and Henry Winkler ('the fonz' oh yeah).
Virgin Media - See what you're missing
Virgin media wanted to point out to everyone that they are better than Sky. They wanted to show, in an engaging way, all the breadth of content and cool stuff they have like video on demand and pausing live TV.
Virgin wanted it to be better than the 3D video fly through that Sky have (which amused me as I made the Sky one a year earlier!). This was a short turnaround project, just under 3 weeks, as Virgin had a two stage launch plan. But thanks to the great people at Spike/Elvis and the freelance creative art direction from Jim, we managed to do near enough everything they wanted for stage two but by the stage one deadline.
Happy clients come back again :)
GI Joe game banners
I coded 2 in banner games for the launch of GI Joe the movie. In HALO dropzone you take control of our hero as he jumps high altitude and avoids the sky mines and flak on the way down. In Tank Commander you get a tank to fight your way through the village and out to safety.
A few cool extra touches on these games are the smoke fumes that change colour and opacity based on the revs of the diesel engine and the real physics of the drive tracks. No one asked for them, and it's a bit geeky, but I like it.
Duracell's Summer Athletics
DTP's Summer athletics 2009 and Duracell got together and wanted an online experience to drive awareness of the game's launch and the new rechargeable batteries for the bunny ;)
I coded the 4 events from the main game each with a bespoke game engine and control system to give the player a taste of what was to come on the Wii.
I can't use their name in this quote but: "More fun than the real Wii version!" was heard from the client's lips ;)
Flora by Gucci
Gucci's high standards were evident throughout with the attention to detail in this project. My Flash dev skills were needed by agency Critical Mass to create highlights like the interactive 3D fly through of the 'flora' motif's history. I was also tasked with everything from html to After Effects work when needed.
Quote Exchange Flash website
Putting the fun back into insurance quotes online! ;) Quote Exchange wanted a fun way to lighten up the business of the quote comparison world. I coded, in Flash, a little world which allowed the users to explore the offered content while being entertained and charmed.
I added nice little touches on top of the content exploration to make sure the user was there out of choice; little things like the working toaster (jam sold separately) and some movable fridge magnet letters - my record is 4 rude words.
M&M'S Full Colour Gaming
The M&M's Full colour gaming site was for cross promotion with EA games. So I was tasked to develop 3 games along the lines of EA's finest... but using M&Ms rather than golf balls or cars!
I made 3 little physics based games where the race car's (well M&Ms) track was destructible and the golf ball (er... well M&Ms) has a flight path O'meter and amfPHP highscores tables. There was also a football game where, you guessed it; you kick around M&Ms!.
Sky Heroes season website
...well, 2.5D really. Sky needed to show off their upcoming set of newly added films. They needed to wow the customer. We built a 3D space on the sky homepage where the latest films came flying by. The user could stop a film when something took their fancy and play a small clip or trailer.
Fanta Crunk Off game
Here the player 'crunks off' (a dance competition for oldies) against the computer or challenge your friend (via email) to compete in a turn based game. Choose your best moves to prgress through the levels and win bottles of Fanta as you go!
Kodak TrolleyDash
I designed this trolley dash game for Kodak for top London agency OgilvyOne and had nothing to do with the build at all! - bit of a change from usual. The idea was to teach people about the package deals they could get from buying bundled products whilst having a bit of fun.
Lacoste Elegance website
Y Design award 2007 winner - The so successful award
Campaign Digital Awards - nominated 2007
A lifestyle website to give info and aspiration for the 'Elegance' perfume from Proctor & Gamble. The site is in five languages, including Russian. To keep the intial load times down, I make each section load in the background (the progress bars for this load can be seen on the sign-post).
Zovirax website
Polaroids are flung on the floor of a young lady's apartment. The user zooms in and around the polaroids, finding video clips as they go, to explore the 5 stages of getting a cold sore.
Unilever careers - toothpaste
Unilever wanted a 'bendy' empty toothpaste tube to show that the container can be recycled into various objects. So the MPU is a timed game allowing the user to bend the tube to make chairs or roofs - lots of items that discarded toothpaste tubes can be recycled into.
Marks and Spencer's Homepage
Marks and Spencer wanted a easily updated image viewer and links for the homepage. The 'hero image' viewer sits in prime spot on the homepage and is updateable via their CMS. There is also a video player version.
The Fimbles - Fimbling Fun!
BIMA Winner: Best Training & Home Learning
BIMA Commended: Best use of CD/DVD/Kiosks
Right Start Award Winner: Gold Award
Design Week Awards Nominated: Interactive Media - Information
read BBC press release
buy cd-rom from Amazon
Fimbling Fun! is a CD-ROM for fans of TV program aged 2-6. I acted as head programmer on this project, making all the technical demos in the early stages and most of the final polished product. This was a lot of fun to work on as the Fimbles are so cute :) I am very proud of being able to name all the Fimbles and their friends without having to think about it.
Designed for young children and released by BBC Worldwide in 2003. It's based on the popular BBC TV series "The Fimbles" and is aligned with the UK's National Curriculum Foundation Stage, making it a suitable learning tool for preschoolers.
The project features several interactive activities, including:
Footprints: Guide a Fimble through a maze collecting objects.
Suitcase: Get packing for your holiday with the Fimbles.
Feather: Tickle the Fimbles to make them laugh - miles too much fun.
Pebble: Draw and create pictures in the sand pit and add animated elements to bring them life.
Shimmy Shaker: Create tunes and get dancing. ...annoy your parents. We didn't use it in the end, but I created a 'dance animation system' that automatically animated between different dance moves in real-time.
Additionally, the CD-ROM includes printable greeting cards, stories, video clips, and music from the show, enhancing the interactive and educational experience for children
BBC Interactive TV
At the BBC's interactive TV design department, I designed and built interfaces and models for current and future interactive TV services as part of the 'Future Interface group'.
This ranges from simple 'now and next' type screen overlays to imagining future interfaces for the next gen. of digital personal recorders which need to allow browsing and searching of 70,000 data items.
Window on Life - DNA
Commissioned by the DTI for the Sunday Times newspaper. There are over 400+ articles over both CDs, these all come from a rational database on the discs. Each article has photos, diagrams or video clips to accompany it.
4.5 million discs were pressed and, along with being on the cover of the Sunday Times, they were also sent out to all schools in the UK & commonwealth.
This is a very dynamic project, that even generates graphic elements from the data. There is a full weighted search on both CD-ROM.
InsideOut
BAFTA Nominated: Interactive Factual category
IVCA Winner: Biz Net 2003 awards
IVCA Nominated: Biz Net 2002 awards
EMMA Nominated: 3-18 year old learning category
play Human Cannonball
play Energy Quest
play Flick the Flea
Developed for the Royal Institute of Great Britain. from some of my game concepts. The InsideOut website is designed for 11-14 year olds to help inspire them to science. I created 3 games for the site, Human Cannonball, Energy Quest and Flick the Flea.
The InsideOut site was showcased in DIGIT magazine and BAFTA nominated.
Quest
BAFTA Interactive Award
EMMA Foundation Award
BETT Award Learning beyond classroom
view video walkthrough
From my original interface concept UI design, I produced an exciting learning tool for 11-14 year olds to learn about the UK and it's places of interest they can visit. The spinning menu and zooming map are an exciting way into the roughly 2000 pieces of database driven content. This flagship application of gridClub.com helped the site walk away with a BAFTA, a BETT and an Emma Foundation award.
A rather dark Christmas viral email game where you play the part of a snowman who throws snowballs at other snowmen, whilst trying to avoid smashing the windows! This was a great project where my only brief was 'we need a game to go out via email and you have two weeks to do it in.