Proof of Concept NFT

In order to under­stand web3 emer­gent tech­no­logy, I min­ted my first non-fun­gible token (NFT). This grass­roots oper­a­tion­al approach allowed me to get an in-depth under­stand­ing of how to think about NFT’s from a con­sumer point of view, as well as over­com­ing the tech­nic­al con­straints required to pub­lish an NFT.

Key Technology

An NFT is a file attached to a smart con­tract (the blockchain)
A block­chain is a ledger for stor­ing trans­ac­tions of crypto-currency
Crypto Wallet
Crypto Wallet
You store your own crypto-cur­rency in this digit­al wallet
NFTs are loc­ated in a mar­ket­place where they can be bought and sold

You can bid on this NFT!

Although this NFT was cre­ated as a proof of concept, it is avail­able for bid­ding on the Rar­ity plat­form. All pro­ceeds go to the non-profit char­ity Beam — where you can spon­sor a home­less per­son and fund their skills training.

My process

  1. In order to cre­ate an NFT auc­tion of value, I decided to use a pho­to­graph I had taken eight years ago out­side Far­ring­don Sta­tion in Lon­don. This poignant image has stayed with me for a long time. Vic­tims of home­less­ness can be any­one, and they are part of our com­munity — they could be our fath­er, our child, or our broth­er. As this pro­ject was inten­ded for proof of concept only, I decided to donate any rev­en­ue received to the home­less­ness char­ity, Beam. They do fant­ast­ic work, please check them out and donate if you can.
  2. In order to mint an NFT, I needed to decide who would pay the “gas fees” (this is the cost of the trans­ac­tion itself — on the Eth­ereum block­chain this is a unit of Eth­er meas­ured in GWEI). Although gas fees were low at the time, mint­ing an NFT can have hid­den costs and not everything is trans­par­ently com­mu­nic­ated up-front. For this reas­on, I chose free mint­ing (or lazy mint­ing), where the gas fees are paid by the buyer.
  3. Although I had an OpenSea mar­ket­place account, for this NFT I decided to list on Rarible so I could com­pare how the onboard­ing exper­i­ence was different.
  4. After choos­ing the block­chain and mar­ket­place, I needed to decide on the wal­let I wanted to link them togeth­er. I already owned a Coin­base crypto wal­let, but have found it cum­ber­some due to a sep­ar­ate mobile-based app that needs to be linked to a Coin­base account. This time I used MetaMask and it seemed a lot easier.


I would recom­mend you try mint­ing your own NFT — it’s fairly simple, once you have an under­stand­ing of the con­cepts involved. In ret­ro­spect next time I would prob­ably pay my own gas fees, as I ima­gine this would increase trac­tion. I would also set it to be a timed auc­tion, and make sure I have a budget for pro­mot­ing the NFT on a social media paid-for cam­paign (rather than rely­ing on organ­ic growth). Donat­ing the pro­ceeds to char­ity is some­thing I haven’t seen in oth­er NFTs, and this could be a use­ful dona­tion-gen­er­at­ing mech­an­ism for the non-profit sector.


Horse & Country TV


Horse & Coun­try TV is an inter­na­tion­al multi-screen net­work about eques­tri­an­ism and coun­try life­style. The digit­al offer­ing (con­sist­ing of lin­ear TV chan­nel, live events and an extens­ive video back cata­logue) was delivered to sub­scribers across web, mobile and smart TV plat­forms via an eCo­m­merce B2C SaaS OTT platform.

Using writ­ten edit­or­i­als powered using Word­Press, poten­tial cus­tom­ers are driv­en into a con­tent mar­ket­ing fun­nel from paid-for social advert­ising to sub­scrip­tion purchase.


Refined the dun­ning pro­cess (total num­ber, peri­od­icity and mes­saging) to reduce eCo­m­merce invol­un­tary churn by over 50%.

Con­sol­id­ated 15 web­sites instances into a single integ­rated Word­Press multis­ite theme (for single glob­al updates and per­form­ance improvements)

Release man­ager for a large num­ber of app platforms:

  • iOS mobile
  • Android mobile
  • Web
  • Amazon FireTV
  • Amazon Prime Video
  • Android TV
  • Apple TV
  • Roku

Launched across six ter­rit­or­ies (UK, US, Sweden, Ger­many, Neth­er­lands, and APAC) in mul­tiple lan­guages and currencies.

Increased sub­scrip­tion signup con­ver­sions by test­ing mul­tiple mobile-first land­ing pages on the UnBounce platform.

Search Engine Optimisation (SEO)

Rank­ing in search engine res­ults were dra­mat­ic­ally improved in a num­ber of ways:

  • Cre­ation of struc­tured data (also known as “rich snip­pets”) which allowed the dis­play of news, tv pro­grams and indi­vidu­al video res­ults to appear in more enti­cing ways
  • Glob­al SSL cer­ti­fic­ates increased con­sumer confidence
  • Easy to under­stand in-page “traffic light” SEO eval­u­ation sys­tem for edit­or­i­al team
  • Bet­ter page ren­der­ing per­form­ance (includ­ing TTFB) which raised Google PageSpeed scores

eCommerce attribution

Example affil­i­ate jour­ney (includ­ing signposting)
  • End-to-end affil­i­ate track­ing pro­gram (which allowed full mon­it­or­ing of con­ver­sions, from digit­al dis­play advert­ising through to purchase)
  • Imple­men­ted coun­try-spe­cif­ic Face­book track­ing pixels (to allow the cre­ation of “lookalike” audi­ences for retargeting)
  • Con­sol­id­ated indi­vidu­al Face­book pages to a sim­pli­fied geo­graph­ic “Face­book Glob­al Pages” structure
  • Google AdWords attri­bu­tion mod­el­ling for eval­u­ation of paid-for keyword ad placements

New features

  • Daily/weekly TV guide (auto­mat­ic­ally updated every hour)
  • Count­down timers for time-based events and premi­eres (to increase FOMO)
  • 404 error page with mul­tiple end­points (so no dead-end cus­tom­er journeys)
  • Simple, uni­ver­sal nav­ig­a­tion for the hybrid web OTT and Word­Press applications
  • Hun­dreds of 302 redir­ec­tions (to avoid 404 errors from leg­acy links)
  • Improved con­tent dis­cov­ery (i.e. genre-based browsing)
  • Homepage geo­loca­tion (to pre­vent sub­scrip­tions being pur­chased from the wrong country)
  • OpenX ad dis­tri­bu­tion serv­er (for auto­mated deploy­ment and rotation)
  • Multi-lin­gual sub­scrip­tion drivers (includ­ing a second para­graph mobile-only unit)
Love Horses? You'll love H&C. Get our annual plan & save over 25%!
Intern­al digit­al dis­play advertising

Other enhancements

  • Improved cli­ent ser­vice by cre­at­ing eas­ily under­stood tech­nic­al doc­u­ment­a­tion (includ­ing User Per­so­nas & User Stories)
  • Enhanced intern­al com­mu­nic­a­tions with digit­al infra­struc­ture (e.g. Slack, Zapi­er, Trello) and cre­ated detailed step-by-step Product Sup­port Guides to facil­it­ate back­log pri­or­it­isa­tion and stake­hold­er buy-in
  • Google Ana­lyt­ics and Hot­jar integ­ra­tions (includ­ing open graph metadata for Face­book and Twitter)
  • Hun­dreds of 302 redir­ec­tions (to avoid 404 errors from pre­vi­ous site migra­tions and oth­er out­dated links)
  • Tech­nic­al doc­u­ment­a­tion for RFP and eval­u­ation cri­ter­ia for vendor selec­tion process
  • Single, uni­fied domain name strategy
  • Respons­ive (mobile-first) email mar­ket­ing tem­plates in MailChimp — includ­ing weekly RSS news emails — and auto­mated trans­ac­tion­al email pro­cessing in Mandrill
User inter­ac­tion heatmap

VR Reviews - post template


Look­ing at the emer­ging Vir­tu­al Real­ity con­tent sec­tor, I real­ised that find­ing good exper­i­ences seemed to be quite a dif­fi­cult pro­cess. Con­tin­ue reading

Mega — The Forces That Shape Our Future

A mega­trend is a pat­tern or a move­ment which has a major impact on busi­ness and soci­ety as a whole. They can be used as a tool to help guide invest­ment — but which mega­trends should we invest in?

Pic­t­et Asset Man­age­ment asked AML Group to look at ways of own­ing this new invest­ment space, thereby encour­aging con­sumers to invest with them — and after extens­ive stake­hold­er engage­ment developed A fully respons­ive con­tent hub, the site brings togeth­er cur­ated art­icles writ­ten by aca­dem­ics, sci­ent­ists and entre­pren­eurs from many dis­cip­lines and back­grounds like Vaclav Smil (Bill Gates’ ‘must-read’ author) and Leo John­son to provide inde­pend­ent advice on the forces shap­ing the sus­tain­able future. Sup­por­ted with infograph­ics, dia­grams and video, the inform­at­ive art­icles on top­ics such as eat­ing insects and energy stor­age integ­rat­ing a num­ber of social media tools (such as Twit­terLinked­In and You­Tube) to gen­er­ate dis­cus­sion and help guide users to spe­cif­ic theme invest­ment funds only a click away.

A num­ber of innov­at­ive fea­tures on the site helped to sup­port this approach, includ­ing a ‘save for later’ tool (allow­ing con­tent to be con­sumed on anoth­er device or shared with a group), and auto­mat­ic gen­er­a­tion of ‘read­ing time’ (as most of the con­tent was long-form).

In this extens­ive cam­paign I was respons­ible for:

  • Pro­to­types
  • Digit­al Pro­ject Man­age­ment (includ­ing Staged Delivery)
  • Inform­a­tion Archi­tec­ture (Sitemaps)
  • Creative/Visual Design Collaboration
  • User Inter­face Design
  • User Exper­i­ence & Wireframing
  • User Per­so­nas & Journeys
  • Qual­ity Assur­ance & Testing

I also assisted with Con­tent Plan­ning, Social Media Integ­ra­tion, and Domain Name Strategy.

Brilliant - ipad

Don’t be good, be Brilliant

After two suc­cess­ful years pro­mot­ing brand aware­ness of the Oxford/Cambridge annu­al boat race, the task to mon­et­ise the 2014/2015 spon­sor­ship was now to explain more about why BNY Mel­lon have sponsored the race, how it links to what they do, and start a longer con­ver­sa­tion with their audi­ences. Part of this solu­tion was to cre­ate the BNY Mel­lon Bril­liant website.

At the centre sits a con­tent hub — where the tar­get audi­ence could dis­cov­er how to take insights from the boat race and the wider sport­ing world, and apply it to their jobs, enabling them to per­form bet­ter at work. The site con­tained a cal­en­dar of enga­ging con­tent to pop­u­late the site, includ­ing inter­views with sports and busi­ness per­son­al­it­ies, cli­ent and pro­spect events, and ori­gin­a­tion of long and short copy art­icles and infographics.

In total, 106 pieces of con­tent were cre­ated for the cam­paign, deployed through­out the year. The cam­paign also used social media and HTML emails to drive traffic back to the site and gen­er­ate views and shares.

Protected Area

This con­tent is pass­word-pro­tec­ted. Please veri­fy with a pass­word to unlock the content.

Since the ini­tial launch, site vis­its have reached 40k and there have been 1,200 social shares and art­icle views. Long-form rel­ev­ant con­tent has increased site stick­i­ness, so we know vis­it­ors are read­ing the con­tent and com­ing back for more.

On this pro­ject I was respons­ible for:

  • Digit­al Pro­ject Management
  • Inform­a­tion Archi­tec­ture (Sitemaps)
  • Creative/Visual Design Collaboration
  • Aggreg­a­tion across mul­tiple Social Media platforms
  • Anim­a­tion
  • User Exper­i­ence & Wireframing
  • User Jour­neys
  • Qual­ity Assur­ance & Testing
The Financial Services Forum

The Financial Services Forum

The Fin­an­cial Ser­vices For­um is a mem­ber­ship-com­munity of pro­fes­sion­als — they endeav­our to have an under­stand­ing of the con­sumer, mar­ket­place and busi­ness mar­ket­ing per­form­ance. The For­um con­tin­ues to provide that very focus, and the crit­ic­al insight, which allows their Mem­bers to con­cen­trate on improv­ing per­form­ance by put­ting mar­ket­ing effect­ive­ness first. What makes The Forum’s agenda both rel­ev­ant and bene­fi­cial is the fact that it is totally inde­pend­ent and sec­tor-spe­cif­ic. It involves the right people, address­ing the right top­ics — both cur­rent wis­dom and future trends — through a mix of events, pub­lic­a­tions, com­munit­ies and online resources.

We partnered with the FSF to cre­ate an upgraded online digit­al offer­ing, using a phased deliv­ery mech­an­ism: Phase 1 con­cen­trated on get­ting a com­pre­hens­ive CMS and improved site archi­tec­ture (IA) to allow for expan­sion into inter­na­tion­al com­munit­ies — along with the capa­city for vis­it­ors to engage in online dis­cus­sion. Phase 2 looked at ways to increase mem­ber­ship, includ­ing pro­mot­ing the first three months for free (to sell-in the advant­ages of increased art­icle avail­ab­il­ity and event tick­ets). Phase 3 focused on rev­en­ue gen­er­a­tion and redu­cing admin­is­tra­tion, with a Stripe pay­ment gate­way for events and sub­scrip­tion-based membership.

Suc­cess­ive phases will look at addi­tion­al fea­tures and closer integ­ra­tion of the CRM facil­ity for improved lead generation.

Protected Area

This con­tent is pass­word-pro­tec­ted. Please veri­fy with a pass­word to unlock the content.

This was a year-long part­ner­ship, and on this pro­ject I was respons­ible for:

  • Exist­ing Func­tion­al Review/Evaluation
  • Func­tion­al Specification
  • Con­tent Migra­tion Plan
  • Pro­to­typ­ing
  • User Exper­i­ence
  • User Inter­face
  • User Jour­neys, Email News­let­ters and Autoresponders
  • Inform­a­tion Architecture
  • Art­work­ing Markup and Devel­op­ment Sup­port Material
  • Fea­ture Development
  • CMS Train­ing Manual
  • Qual­ity Assurance
  • Ser­vice Level Agree­ment and Dis­aster Recov­ery Plan
  • Assist­ing with extens­ive Cli­ent Collaboration

Neptune’s New Reformers

AML’s idea was to base the cam­paign around valu­able, enga­ging con­tent for con­sumers, which provided a back-story for the Nep­tune invest­ment funds. The con­tent was delivered through both prin­ted and down­load­able online bro­chures, and a bespoke micros­ite — using par­al­lax func­tion­al­ity and provid­ing sup­port­ing con­tent through video.

Along­side writ­ten con­tent, art­icles fea­tured eleg­ant illus­tra­tions and infograph­ics to high­light key facts about the funds and mar­kets in a strik­ing and clean way. Using this visu­al lan­guage, we cre­ated online advert­ising to drive investors to the site and the online brochure.

New Reformers provided cut-through in a busy ISA mar­ket by offer­ing high qual­ity, use­ful con­tent in a visu­ally inter­est­ing and innov­at­ive way.

AML were able to achieve the desired lay­out design — an eas­ily anim­ated, asym­met­ric par­al­lax lay­out (sim­il­ar to the New York Times’ legendary Snow­fall art­icle, but fully respons­ive) — with both eleg­ance and sim­pli­city. Through pro­to­typ­ing, we eval­u­ated a num­ber of tools (includ­ing the Aesop Story Engine), and even­tu­ally settled on Visu­al Com­poser. An addi­tion­al con­straint was for the cli­ent to eas­ily and quickly update table data (without any developer know­ledge) — for this, we selec­ted the intu­it­ive and flex­ible Table­press plugin.

Com­pleted with­in the alloc­ated six weeks pro­duc­tion time­frame, on this pro­ject I was respons­ible for:

  • Creative/Visual Design Collaboration
  • Extens­ive Art­work­ing Markup (of col­ours, ele­ments and sections)
  • Respons­ive SVG infographics
  • Anim­a­tion
  • User Exper­i­ence & Wireframing
  • Qual­ity Assur­ance & Testing

The Great Business Debate

CBI is the ‘voice of busi­ness’. In today’s eco­nom­ic real­ity, in terms of pub­lic opin­ion, there is a loss of busi­ness con­fid­ence and grow­ing sup­port for anti-busi­ness legis­la­tion. To redress this issue and attempt to bal­ance the con­ver­sa­tion by allow­ing pro-busi­ness issues to be heard, The Great Busi­ness Debate cam­paign was launched at the CBI Annu­al Con­fer­ence in 2014.

The cam­paign con­sisted of a web­site, a Twit­ter cam­paign, HTML emails, online and press advert­ising as well as a series of live debates. The web­site con­tained art­icles, news and opin­ion from busi­ness entre­pren­eurs, tax cam­paign­ers, busi­ness lead­ers and even the Arch­bish­op of York. It was also a plat­form for polling, quizzes, case stud­ies and a debate toolkit (so com­pan­ies can con­tin­ue the dis­cus­sion offline).

As of Septem­ber 2015, there have been over 160k pageviews, from over 86,000 users. With over 8,500 fol­low­ers on Twit­ter, it’s def­in­itely got people talk­ing and has ‘moved the dial’ for trust in busi­ness. The CBI have long-term plans for this cam­paign (and has now cre­ated new social media dis­tri­bu­tion chan­nels for the web­site con­tent on You­Tube, Linked­In and Google+) and will extend it to include live web­casts, as well as devel­op­ing more loc­al events to stim­u­late the debate even further.

In this extens­ive cam­paign I was respons­ible for:

  • Stand­ard­ised Devel­op­ment and Deploy­ment Plat­form (Word­Press)
  • User Exper­i­ence
  • Qual­ity Assurance

AML’s Christmas Cracker

This pro­ject uses WebGL  to allow the user to stretch and pull a vir­tu­al Christ­mas Crack­er, reveal­ing a ran­dom joke. The first 1000 crack­er pulls donated £1 to Street Child Africa, AML’s offi­cial charity.

Cre­ated using Mat Groves’ excel­lent (and appro­pri­ately-named) WebGL PIXI.js plat­form (and based on one of his con­cepts). The music track is “Silent Night” and was kindly sup­plied by the Afric­an’s Chil­dren Choir.

For this pro­ject I was respons­ible for:

  • Research (devel­op­ment plat­form and prototyping)
  • Front-end Devel­op­ment
  • Qual­ity Assurance
CFA Institute

CFA Institute Career Mapping Tool

The aim of this pro­ject was to refine a bulk email data­bases of pro­spect­ive stu­dents, by tak­ing them through a 10-step career man­age­ment tool (to determ­ine a suit­able role and learn­ing pro­gram). Fully respons­ive, mobile-friendly and IE7 com­pat­ible, this site received over 140,000 hits in the first week of launch­ing. Users were able to share their spe­cif­ic res­ult in social media, using bespoke Open Graph API integration.

Cross-platform, Responsive Design

The tool encour­aged engage­ment between the user and the CFA Insti­tute brand and helps the user to determ­ine wheth­er CFA Pro­gram, Clar­itas or CIPM is right for them. Fully respons­ive, mobile-friendly and IE7 com­pat­ible, this site received over 140,000 hits in the first week of launch­ing. Users were then able to share their spe­cif­ic res­ult in social media, using bespoke social media API integration.

Extending the Brand

In con­sulta­tion with the CFA’s mar­ket­ing, cre­at­ive devel­op­ment, edu­ca­tion and web ser­vice teams, This­City were able to enhance the exist­ing cre­at­ive brand guidelines using gradi­ents and anim­a­tion in order for the imple­ment­a­tion of an attract­ive, smooth and eleg­ant visu­al design.

Metrics & Reporting

All micro-inter­ac­tions with the map­ping tool were meas­ured (e.g. ques­tions answered, quiz com­ple­tions, vis­its, time on site, com­ple­tion, for­wards, shares) and this was reflec­ted the engage­ment with the stu­dent pro­spects in the CFA Pro­gram, Clar­itas and CIPM database.

Unique Visitor Conversion (%)
Degree Disciplines Targeted
Global Key Markets
Hits in the first week

On this pro­ject I was respons­ible for:

  • Front-end devel­op­ment
  • User Jour­ney, User Exper­i­ence and User Interface
  • GA cus­tom cam­paign parameters
  • Back-end host­ing and serv­er configuration
  • Data­base Management
  • Admin­is­trat­ive Documentation
  • Google Ana­lyt­ics reporting
  • Social Media shar­ing integration

Allen & Overy Graduate Recruitment

From its strategy of counter-cyc­lic­al expan­sion to its vis­ion of broad­en­ing access to the leg­al pro­fes­sion, Allen & Overy has a his­tory of set­ting pre­ced­ents. This pro­ject for This­City Agency involved work­ing along­side Allen & Overy, devel­op­ing a Word­Press-based theme to replace their exist­ing gradu­ate recruit­ment site. Designed mobile-first and fully-respons­ive, it ensured that the exper­i­ence of the tar­get audi­ence (recent leg­al gradu­ates) was delivered con­sist­ently across the broad spec­trum of digit­al devices and browsers.

Con­tent included inter­act­ive infograph­ics, a PDF doc­u­ment archive, over 21 videos, and CMS train­ing doc­u­ment­a­tion was also cre­ated to enable in-house updates.

Increased Applications (%)
Increased Website Visits (%)
Global locations

This site was a final­ist in the 2013 Nation­al Gradu­ate Recruit­ment Awards for The Best Gradu­ate Recruit­ment Web­site.

Targetjobs National Graduate Recruitment Awards 2013

On this pro­ject I was respons­ible for:

  • Front-end devel­op­ment
  • User Exper­i­ence and User Interface
  • Back-end host­ing and serv­er configuration
  • Data­base Management
  • Admin­is­trat­ive Documentation
  • Google Ana­lyt­ics reporting

Business Auckland

New Zea­l­and is one of the easi­est places in the world to do busi­ness. It is ranked num­ber one of 189 coun­tries for ease of start­ing a busi­ness, and at num­ber two for ease of doing busi­ness — and it can all be done online for little cost (the whole pro­cess takes less than two days).

This web pro­ject was for loc­al gov­ern­ment (Auck­land’s Tour­ism, Event and Eco­nom­ic Devel­op­ment — ATEED). ATEED’s role is to improve New Zealand’s eco­nom­ic prosper­ity by lead­ing the suc­cess­ful trans­form­a­tion of Auckland’s eco­nomy. This means being respons­ible for identi­fy­ing mar­ket fail­ures and oppor­tun­it­ies, con­nect­ing key play­ers and influ­en­cing resources being focused in areas of growth for Auckland.

As the Busi­ness Digit­al Advisor for ATEED, my role involved com­bin­ing more than 66 inde­pend­ent web­sites into a single hub for over 12 busi­ness units, and provid­ing online tools for self-ser­vice deliv­ery. Built using Expres­sion­En­gine, the CMS allowed a com­pre­hens­ive approvals work­flow for the team at ATEED to draft, pre­view and send con­tent for review before it could be pub­lished on the live site.

The res­ult­ing stand­ards-com­pli­ant and fully-respons­ive web­site had vari­ous cap­ab­il­it­ies, includ­ing video, social media, tools & resources, dynam­ic graphs (using HighCharts), news, and a cur­rency cal­cu­lat­or (updated daily).

On this pro­ject, I was respons­ible for:

  • Inform­a­tion Architecture
  • Scoping/Research
  • Inter­face Design
  • Con­tent Planning
  • Stake­hold­er Engagement
  • Man­aging Creative/Visual Design
  • Func­tion­al Specification
  • Pro­ject Management - wool wireframe
Phys­ic­al Wire­frame (using wool!) to demon­strate rel­at­ive inter­con­nectiv­ity between pages.
Plant The Seed

Plant The Seed

End-to-end hard­ware and soft­ware solu­tion for a site-spe­cif­ic inter­act­ive art install­a­tion — a com­munity-based inter­act­ive vir­tu­al garden, where vis­it­ors can plant a vir­tu­al seed and watch their garden­ing efforts flower into real­ity. Fest­iv­al Attendees were invited to trig­ger the anim­a­tions by plant­ing a her­it­age seed in one of five inter­act­ive plant­er boxes. Each box, when activ­ated, would grow a vir­tu­al veget­able, turn­ing the area into an inner city com­munity garden.

Cre­ated for Art in the Dark 2012 through a col­lab­or­a­tion with video artists Mar­cel Allen and Ren­ee Warner for the Cargo Col­lect­ive. We were asked to return to AUT for a repeat per­form­ance in 2013, at White Night: Best of Art in the Dark (part of the Auck­land Arts Fest­iv­al).

This pro­ject aimed to encour­age people to think about and get involved in com­mun­al food gar­dens and to re-envis­age pub­lic green spaces as not just some­where to walk, exer­cise or have a pic­nic but also as a poten­tially fer­tile place to grow food.

Plant the Seed is on Face­book.

Art In The Dark
White Night
Koanga Institute - Centre for Regenerative Living

The Action­script 3.0 video com­pos­it­ing applic­a­tion con­trolled the play­back of up to six lay­ers of HD video (with alpha chan­nels) on top of a cus­tom back­ground image. The anim­ated videos were then triggered using cus­tom pres­sure sensors (under­neath soil con­tain­ers) and a Makey­Makey USB con­trol­ler.

Happy 21st, Pasifika!

Many people don’t real­ise that even tra­di­tion­al work­flow tools can bene­fit from using pro­gram­ming techniques.

One of my earli­est cod­ing exper­i­ences was writ­ing an auto­mated script for Adobe Page­Maker (a print-based lay­out applic­a­tion) — this took a CSV file expor­ted from the Microsoft Access advert­ising list­ings, and cre­ated cor­rectly-sized ad boxes with the advert­iser­’s name (sav­ing pro­duc­tion time of about 16 hours). In anoth­er pro­ject, I used JavaS­cript to pro­gram expres­sions in After Effects to auto­mat­ic­ally cre­ate a script-based numer­ic­al on-screen counter (from 100,000 to 259,000 — with motion blur). These approaches allow much more con­trol and flex­ib­il­ity than tra­di­tion­al manu­ally-based workflows.

For this pro­mo­tion­al video for to cel­eb­rate 21 years of the Pasi­fika Fest­iv­al, I used particle emit­ters to con­trol a sep­ar­ate timeline with 3,000 images (auto-impor­ted) and anim­ated using this particle sys­tem. With a few simple para­met­ers, I was able to con­trol siz­ing, speed and trans­la­tion lim­its to cre­ate the right effect. I then added a few type ele­ments for the years, and placed everything with­in a ‘space tun­nel’ (actu­ally a large graph­ic with a polar co-ordin­ate dis­tort filter).

I designed a quick end­frame in Pho­toshop, then asked the graph­ic design team to make sure it was on-brand and add any flour­ishes required.

Once com­pleted, I then worked closely with the Pasi­fika events man­age­ment team to get a soundtrack cleared for use, then edited it to match the animation.

About the Festival

The Pasi­fika Fest­iv­al began in 1992, and has grown into one of Auckland’s biggest cul­tur­al events. It came to life through a joint ini­ti­at­ive between the then Auck­land City Coun­cil and the South Pacific Island Nations Devel­op­ment Asso­ci­ation. The Fest­iv­al aimed to bring Pacific Island com­munit­ies closer togeth­er and to cel­eb­rate the rich­ness and vari­ety of their val­ues, cul­ture and life­styles. It has grown to become the biggest cel­eb­ra­tion of Pacific Island cul­ture and her­it­age in the world.

FYI Flooring

FYI Flooring

A cli­ent came to me look­ing to refresh their web­site and add the abil­ity for cus­tom­ers to replen­ish con­sum­ables and pur­chase accessor­ies. Con­tin­ue reading

Prefabricated Audio Constructions (Vol. 3)

An hour-long mix of alternative cover versions.
Track Title Artist Buy Track
The Mod­el The Bal­an­es­cu Quartet
Chhup­ke Kaun Aya Usha Uthup
Love Is The Drug Grace Jones
Dub Be Good To Me The Ting Tings
Guns Of Brixton Nou­velle Vague
Rebel Rebel Rick­ie Lee Jones
Sound Of Silence Soul Vendors & The Gaylads
El Ritmo Del Silencio Los Mus­tang
The Sound of Silence Nouela
Hurt Jonny Cash
Every­body Wants To Rule The World Lorde
Human Nature Miles Dav­is
Thrill­er Imo­gen Heap
Enter Sand­man Richard Cheese
Wait­ing For The Man OMD
Wish You Were Here The Roy­al Phil­har­mon­ic Orchestra

Prefabricated Audio Constructions (Vol. 2)

An hour-long mix of alternative cover versions.
Track Title Artist Buy Track
Tom’s Diner (Remix) DNA (feat. Suz­anne Vega)
Good Vibra­tions Nina Hagen
Immig­rant Song Kar­en O, Trent Reznor, Atti­c­us Rose
Whole Lotta Love (live at Bush Hall) Gab­ri­ella Cilmi
Come On Eileen No Doubt
Mak­ing Plans For Nigel Nou­velle Vague
Sea of Love Cat Power
Big Rock Candy Mountain Van Dyke Parks
Angel­ica (live) Lamb
Just Be Good To Green (Radio Edit) Pro­fess­or Green (feat Lilly Allen)
Rolling In The Deep (The Sound­men Remix) Adele
Sun­shine of Your Love Ella Fitzger­ald vs Rock­ers Hi-Fi
Killing Me Softly Omara Por­tuondo
Le Freak The Ukelele Orches­tra Of Great Britain
Only Love Can Break Your Heart St. Etienne
Instant Karma Paul Weller

Prefabricated Audio Constructions (Vol. 1)

An hour-long mix of alternative cover versions.
Track Title Artist Buy Track
Straight to Hell Amy Loftus and Will Kimbrough
Scar­bor­ough Fair Anoth­er Fine Day
Claire de Lune (Suite Ber­ga­masque, No. 3) Isao Tomita
Bridge Over Troubled Water Johnny Cash
The Sci­ent­ist Wil­lie Nelson
Love Will Tear Us Apart Nou­velle Vague
Love Me Tender Nich­olas Cage
Your Song (Black­mill Dub­step Remix) Ellie Gould­ing
All Cried Out Fink
Rebel Rebel Seu Jorge
Elean­or Rigby Rich­ie Havens
Fine Day (Pir­ates Mix) Kirsty Hawk­shaw
Whole Lotta Love Ike & Tina Turner
Iron Man (First Try) The Car­digans
Ever Fallen In Love Nou­velle Vague
What I Ate Dav­id Shrigley
An Airbag Saved My Dub Easy Star All-Stars

Digital Display Advertising

Adobe Flash play­er was a driv­ing force for cre­ativ­ity in the early days of the web, as well as the deliv­ery mech­an­ism for deliv­ery of anim­a­tion and rich media digit­al dis­play advert­ising units. Design­ers were able to use simple stage-based anim­ated frames and scenes, and developers had access to power­ful script­ing frameworks.

The ad:tech industry has now mostly switched over to the less pro­pri­et­ary HTM­L5-based anim­a­tions (for easi­er debug­ging and bat­tery optimisation).

This is a small selec­tion of my Flash ban­ners, where I have often tried to invoke a sense of util­ity — because when advert­ising is done well it is use­ful.

How to enable Flash in modern browsers (e.g. Google Chrome)
If you aren’t see­ing anim­a­tions, make sure Flash is “enabled” — as many mod­ern browsers now block it by default.

Visa business credit cards

An action­script (AS2) Flash-based ban­ner cam­paign to pro­mote Visa’s cred­it card for busi­ness, these anim­a­tions were used in many sizes and cre­at­ive exe­cu­tions. It starts with the real time (retrieved from the user­’s com­puter clock), and increases in speed to give the impres­sion of ‘time fly­ing by’.

Care­ful atten­tion to detail meant it closely rep­res­en­ted both the ana­logue mech­an­ism and a blurred anim­a­tion effect, while still being fully gen­er­ated in real time.

Files­ize: 42kb

Ever wonder where the time goes?

UBS tracked investments

Rich media ban­ner con­tain­ing a live stock tick­er feed from extern­al source.

Files­ize: 42kb

National Booktokens

Mouse-based draw­ing applic­a­tion delivered as part of dis­play advertising.

Files­ize: 184kb

Samsonite Cubelite

The Cube­l­ite premi­um lug­gage col­lec­tion (now re-branded as Lite-cube) star­ted in ran­dom loc­a­tions and util­ised a simple col­li­sion-detec­tion algorithm — as well as real­ist­ic shad­ows — to gen­er­ate more visu­al interest on repeated viewings.

Files­ize: 31kb

Get Adobe Flash player

Dove Body Wash

Mul­tiple lay­ers of blurred rain­drops (arranged using Dis­ney’s “mul­ti­plane” anim­a­tion tech­nique to give the impres­sion of depth), arti­fi­cial steam, three product shots and a logo into a min­im­um file size.

Files­ize: 26kb

Daily Mail Wine Club

The image trans­ition here uses a simple smooth anim­ated mask reveal (con­trolled pro­gram­mat­ic­ally using AS3).

Files­ize: 29kb

Lee Warn

Logo design, busi­ness cards, web­site design, email mar­ket­ing and pro­duc­tion for Lee Warn — a multi-sport ath­lete, mar­riage cel­eb­rant and motiv­a­tion­al speaker.

The dynam­ic iden­tity con­tains a ref­er­ence to Rorschach inkblots, which allows the view­er to mani­fest their own inter­pret­a­tion of the brand. Each applic­a­tion of the logo employs a dif­fer­ent inkblot — for example, the busi­ness cards used eight dif­fer­ent back­grounds and the email foot­er uses a slowly chan­ging GIF animation.