2019-06-01 net

How we built

ZACH

BISHOP

Creative lead across all of Mallard

& Claret’s digital projects. Bishop

ensured the designs supplied by

Anatomy were optimised.

Insta: @mallardandclaret

ALEC

SHIPGAR

Mallard & Claret’s lead front-end

developer and is responsible for

all code-based animation effects

seen on the Vauxhall website.

w: mallardandclaret.com

Vauxhall is one of London’s
largest regeneration areas
and with a cluster of towers, a new
neighbourhood and new public realm
all in the pipeline, it’s undergoing a sea
change. There’s already a thriving and
diverse mix of businesses, residents,
visitors and things to do but the
Vauxhall One business improvement
district (beinvauxhall.com) wanted to
create a place brand that would see
Vauxhall become the “destination for
different”. The team at Mallard & Claret
(mallardandclaret.com) undertook the
online side of this. We caught up with
the team to discover how they did it.

How did Mallard & Claret get involved?
Was there a pitch process?
PJ: The branding project was won by our
good friends over at Anatomy Brands
(anatomylondon.com), whom we have
collaborated with in the past on digital
projects. The website work fell under
the overall brand development project
and so we were fortunate enough to not
have to pitch ourselves. In fact, we rarely
pitch for work these days, as most of our
work comes via referral and we are lucky
enough to win work off the back of our
growing reputation.

What did your UX process involve?
ZB: Whilst we would normally deliver
the end-to-end UX through to build,
when we partner with agencies we are
often responsible for the front-end
and back-end development only, as
was the case with the Vauxhall project.
Anatomy produced a set of high-fidelity

wireframes, which were then approved

by the client before moving into design.

Talk us through the design. What were

the challenges of translating Anatomy

Brands’ designs into a working site?

ZB: As some members of our own

team are dispersed around the globe,

we already have very efficient and

effective tools in place to make remote

team management as straightforward

as possible. When working with other

agencies we adopt the same tools and

principles, so Anatomy used both

InVision and Zeplin to deliver their

designs to us and we then used Flinto

as a method of illustrating some of the

desired animations that were required on

the project.

A combination of Flinto animations

and online code references from places

like CodePen are our usual methods of

communicating animation requirements

from design to development, although

occasionally we reach for more

traditional tools such as After Effects

when things get more complicated.

What technologies are running the site?

AS: The site is built on a WordPress

CMS with the core markup languages

being HTML5 and CSS3. The JavaScript

framework used is Bootstrap 3 and we

also took advantage of several jQuery

plugins including Masonry, which was

used for the venues listing pages; AOS

(animate on scroll), which is used to load

HTML elements as the user scrolls down

the page; Nicescroll for scrollbars on both

the interactive map and history timeline;

PJ

JONES

Founder and experience director

of Mallard & Claret. Jones inputs

into and oversees the UX across

all Mallard & Claret projects.

t: @mallardclaret

TIMELINE

Key dates for the

Be In Vauxhall project

JULY 18

Anatomy pitches to Vauxhall One’s

business improvement district (BID).

JULY 18

Chosen by the Vauxhall One BID to

develop its new brand.

JULY - AUGUST 18

Develops a new brand identity and

brand strategy for Vauxhall, defining it

as the “destination

for different”.

AUGUST - SEPTEMBER 18

Creates designs for the new Vauxhall

website and brings in the Mallard &

Claret agency as its web development

partner.

OCTOBER 18

Mallard & Claret begins website

development, starting with converting

the designs into HTML/CSS. Once the

framework is in place and the website is

responsive, it starts working on adding

animation.

NOVEMBER 18

Once the front-end development is

complete, Mallard & Claret integrates

the site into WordPress.

NOVEMBER 18

After an initial round of internal testing

and amends, the site is shared with the

client for testing and content entry.

DECEMBER 18

During the client testing phase, Mallard

& Claret begins optimising the site for

visibility in search engines in

preparation for site launch.

DECEMBER 18

Following testing and content entry, the

website is approved by the Vauxhall

One BID and made live.