Lawrie Cape

Epiphany Search

I led the front end build for the Epiphany agency site. Working closely with members of the design and backend development teams, along with stakeholders in and out of the business, I built multiple templates and reusable components to meet a hard deadline.

The site is built using a modern front end development stack, including Grunt, Sass and Require JS and an Umbraco backend. GSAP and Pixi javascript libraries were used to add additional functionality, such as the animated SVG timeline, webGL staff carousel and streetview office tour.

The site was a mobile-first, responsive build and uses progressive enhancement techniques and Modernizr to add additional styling and functionality where available.

Amplifon - The Art of Hearing

The Art of Hearing is an interactive 3d webGL soundscape built for Amplifon. Users must locate the source of sounds in various panoramic locations amidst other noises. The user's accuracy is measured, and compared to other users of their age and gender.

The site is built using three.js to power the webGL panorama, howler.js for the 3d positional web audio, GSAP for the animation of the camera and custom fragment shaders, which allowed me to create the complex transitions between the initial, partially obscured views and the revealed watercolour panorama designs.

The site has received media coverage in both the Daily Mail online and the Metro, and has won a coveted FWA Site of The Day award.

Love Holidays - Holiday Memories

To help Love Holidays illustrate the changing nature of British holidays over the last 100 years, we created an interactive timeline and map, to display user's holiday memories.

First, we ran a Facebook competition, asking people to submit their favourite holiday snaps. These photos were then stylized as postcards from the relevant era, geotagged and and added to the timeline and map displays, along with key dates from UK holiday history.

The site makes use of cutting edge 3D css transformations and transitions to bring the selection of postcards to life. The project received widespread coverage and was awarded the CSS Design Awards site of the day, Awwwards Site of the day and Awwwards Developer Award.

Amplifon - Cycle Tracks

Cycle Tracks is an experimental interactive project built for Amplifon. Visitors to the site are invited to import data from their Strava account (a cycling activity tracker) and this data is used to create an audio and visual representation of their ride.

I built the initial rapid-prototype of the 3d visualiser - taking the user's cycling data and mapping the 3d position and time, managing the camera's position throughout the timeline and setting up the three.js objects, materials, lights and shaders. This formed the basis of the finished piece, which was developed by another team member. The final piece was named FWA Site of the day and also won the Adobe Cutting Edge Award.

Zuto - 88 miles per hour

If Back To The Future was set today, what car would you choose as your time machine? We asked a sample of people this question, and built this site to showcase their choices. Built with very limited development resource, this project was a race against time, with an immovable deadline of October 21st 2015 - Back To The Future Day.

Working with illustrators and motion designers, I built the front end, using the beautiful SVG cars, custom motion graphics and a host of both css & javascript animations and transitions.

Rightmove - Home of the Future

Working closely with the copywriting team, designer and 3d modeller, I built Rightmove's "Home of the Future" - An interactive timeline which visualises how changing consumer technology may change the face of the home over the next 15 years.

The site was received good feedback and was featured on high profile sites such as the Mail Online and Creative Bloq and was awarded a CSS Design Awards Site of the Day award.

NHS - Platelets Donation

I worked with the NHS Blood and Transplant Special Health Authority to implement a program of updates and additions to their existing Blood Platelets donation microsite.

I applied a thorough CSS Refresh to both bring the site in line with their updated branding, and also to add responsive layout elements, to help optimise the experience for users visiting from various devices.

I also developed a new "sign-up wizard" for the site - using a custom Google Maps based interactive section to find the nearest platelet donation centre to the user and help simplify the sign up process.

Keepmoat - Moving the Goalposts

"Moving the Goalposts" is a micro-site housing three long-form articles detailing the effects of new football stadiums on the surrounding community.

I worked with the design and copy teams to present the articles in a readable and engaging way, and incorporate relevant photography and graphs for each of the sections.

Epiphany Cardboard

For Christmas 2014, we wanted to send out an interactive agency Christmas card using the newly released Google Cardboard.

Using three.js, I built a web based stereoscopic 3d animation through which we delivered our Christmas wishes. Multiple flat illustrations were added to the scene and animated through a mixture of javascript tweens and webGL shaders, to bring the scene to life. Clients received an Epiphany branded flat-pack Google cardboard and instructions on how to view the piece.

Rightmove - Happy at Home Index

Rightmove asked us to spruce up their Happy at Home Index - a geographical dataset containing over 24,000 people's responses to a survey on their opinions on their local area.

I used CartoDB, a cloud storage & geospatial database system, to plot the data on an interactive map and allow users to filter by category and/or limit comparisons to just London boroughs.

Crest - Sensi Stop Strips DSA

I built a 20 page interactive Digital Sales Aid for Crest, to help demonstrate their new Sensi Stop Strips.

Developed using Backbone, and delivered through proprietary P&G software, the app was built specifically for in the field demonstrations by sales teams using iPads.

The piece used animations, video, animated graphs, interactive sliders and more, all contained in a custom, easy to use, touch and swipe based menu system.

Assorted smaller projects

Here's a few smaller projects I've built recently - single page sites for various clients.

• Rosetta Stone - Build you career with a second language
• Kempinski Golf - The science behind the perfect swing
• Kempinski Golf - The history of women in golf
• Nuo Hotels Beijing
• Pizza Express - Christmas party guide