Archives

H&C

Horse & Country TV

About

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.

Highlights

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
v-r.reviews

VR Reviews

v-r.reviews - post template

About

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

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.

55
Unique Visitor Conversion (%)
7
Degree Disciplines Targeted
7
Global Key Markets
140000
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.

21
Videos
204
Increased Applications (%)
148
Increased Website Visits (%)
13
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
businessaucklandz.com - 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 AucklandNZ.com 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

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

leewarn.org

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.

Operation Smoke Storm

Operation Smoke Storm

World­wide, 1 per­son dies every 6.5 seconds due to smoking and oth­er tobacco use. Every day in the UK, over 900 school chil­dren (aged under 16) try smoking for the first time.

Oper­a­tion Smoke Storm is a brand new style of learn­ing resource for schools which tar­gets this prob­lem by cre­at­ing a lifesav­ing shift in teens’ atti­tudes towards smoking and the tobacco industry. It was designed to cre­ate classroom dis­cus­sion about unscru­pu­lous tobacco industry prac­tices that tar­get young people. It focuses on tobacco mar­ket­ing strategies from the per­spect­ive of a tobacco industry exec­ut­ive and mar­ket­ing com­pany, as well as a health cam­paign­er, both seen through the eyes of a teen­ager and repor­ted dir­ect to cam­era in the form of a social media blog. Oper­a­tion Smoke Storm com­prises of 5 prin­cip­al resource components:

  • 3 sep­ar­ate 50 minute ses­sions which can be delivered con­sec­ut­ively over 3 PSHE ses­sions or dur­ing an entire cur­riculum free day (rel­ev­ant cur­riculum links are provided)
  • 1 Fam­ily Com­pon­ent — a take home booklet
  • 1 Boost­er Com­pon­ent — a fol­low up inter­act­ive ses­sion usu­ally delivered one year after the ori­gin­al three ses­sions have been presented

In the ses­sions, the teach­er streams a pre-loaded online mul­ti­me­dia present­a­tion and dis­plays this on an over­head pro­ject­or screen at the front of the class. The teach­er can nav­ig­ate through the present­a­tion both back­wards and for­wards, play­ing video clips and paus­ing to facil­it­ate activ­it­ies and dis­cus­sions. Clear teach­er instruc­tions and book­lets for stu­dents are provided. It was so suc­cess­ful, both a tri­al DVD ver­sion and exten­sion Boost­er ses­sions were added.

For this pro­ject, I was part of a lar­ger team. My respons­ib­il­it­ies included;

  • Devel­op­ment of an adapt­ive web-based AS3.0 Flash application
  • Tech­nic­al Direction
  • Con­tent plan­ning and delivery
  • Video com­pres­sion
  • Audio cleanup (mobile phone inter­fer­ence removal)
  • Pro­ject Man­age­ment (assist­ing the Lead Pro­ject Manager)
60
Video files
25
Audio files
10
Flash interactive games

A recent Lon­don tri­al showed that Oper­a­tion Smoke Storm improved stu­dent atti­tudes and mis­con­cep­tions held about smoking by as much as 39% and increased aware­ness of key smoking issues by 77%. This pro­ject was a final­ist in the 2012 BETT (Brit­ish Edu­ca­tion­al Train­ing and Tech­no­logy) Awards for Sec­ond­ary Digit­al Con­tent.

British Educational Training and Technology Awards