Mark Billen

when or­ganic food restau­rant gen­e­sis sought imag­i­na­tive creative guid­ance for its New on­line pres­ence, could agency herdl vault ev­ery ob­sta­cle and de­liver the gold?

Web Designer - - Contributors -

Mark is a free­lancer writer who has been writ­ing about web de­sign and tech­nol­ogy for over 15 years. In this is­sue he finds out how the cre­atives at Herdl de­liv­ered the per­fect site for or­ganic food restau­rant Gen­e­sis.

given that so many of De­sign Di­ary’s fea­tured pro­jects de­scribe pro­jects born out of ex­ist­ing part­ner­ships, you might think ‘bet­ter the devil you know’ is the in­dus­try mantra. While it’s true that suc­cess­ful creative re­la­tion­ships tend to en­cour­age loy­alty, they have to start some­where. While dig­i­tal agen­cies rarely ‘face off’ in com­pet­i­tive pitches to land new work, it’s true that prior achieve­ments can be piv­otal. Our fea­tured play­ers this month are poster chil­dren for il­lus­trat­ing this, when client Gen­e­sis found agency Herdl through the web de­sign awards site, Awwwards. Notic­ing an in­ter­ac­tive project Herdl pro­duced in 2017 for a cof­fee com­pany called Two Chimps, the Shored­itch-based fast-food ve­gan restau­rant saw some­thing that chimed with the unique ap­proach they craved. In­deed Herdl, who formed in 2013, started with the goal of as­sem­bling a team of dig­i­tal ex­perts ca­pa­ble of tack­ling any chal­lenge. Since then two have be­come six, staffing multi-dis­ci­plinary ser­vices across web de­sign and dig­i­tal mar­ket­ing, un­der­pinned by tech­nol­ogy, busi­ness and creative ap­pli­ca­tion ex­per­tise. Gen­e­sis mean­while, no strangers to recog­ni­tion them­selves, serve a 100 per cent plant-based menu with dishes in­spired from across the globe, cater­ing for both ve­g­ans and meat eaters. Its fully or­ganic and Gmo-free menu, makes Gen­e­sis one of the only UK restau­rants to hold the Soil As­so­ci­a­tion’s ‘Or­ganic Served Here’ Award. “From the very be­gin­ning, we knew we weren’t go­ing to de­sign a tra­di­tional restau­rant web­site, it was the cul­ture and con­cept be­hind Gen­e­sis that we wanted to bring for­ward,” De­signer Sam Day be­gins. “Our aim was to cre­ate in­trigue and an­tic­i­pa­tion, so rather than sell­ing a prod­uct or ser­vice we wanted to show­case the Gen­e­sis ide­ol­ogy.”

“we knew we weren’t go­ing to de­sign a tra­di­tional restau­rant web­site”

as­pi­ra­tions aligned

Com­ment­ing that they had never seen a site quite like Two Chimps, the Gen­e­sis guys knew they wanted Herdl to pro­duce some­thing sim­i­larly in­no­va­tive for them. “Gen­e­sis shared their ini­tial ideas and brand doc­u­ment with us and we in­stantly sensed this could be a re­ally ex­cit­ing project. We picked out cer­tain il­lus­tra­tion styles and de­sign routes that we could con­fi­dently trans­late to a dig­i­tal for­mat and de­vel­oped a creative di­rec­tion that would utilise th­ese dis­tinc­tive el­e­ments.” A few emails and Skype chats later and both were on board, ea­ger to find out how th­ese ini­tial ideas could be re­fined. Very quickly a con­nec­tion be­tween both or­gan­i­sa­tions emerged, with as­pi­ra­tions for the project in tune enough morally and cre­atively to let Gen­e­sis sur­ren­der com­plete con­trol over the de­sign. Task­ing Herdl with telling their story most ef­fec­tively from a dig­i­tal per­spec­tive, the client was si­mul­ta­ne­ously con­vers­ing with artists and de­sign­ers to pro­duce brand­ing and pack­ag­ing el­e­ments. “So there was al­ready a stim­u­lat­ing at­mos­phere around the project and var­i­ous as­sets be­gin­ning to take shape. We had ac­cess to com­mis­sioned art­work from some very tal­ented il­lus­tra­tors and graphic de­sign­ers, while we needed to de­velop a con­sis­tent look and feel, it was im­por­tant to es­tab­lish our own in­ter­pre­ta­tion that would de­liver a unique dig­i­tal ex­pe­ri­ence.” This trust ex­tended to lead­ing the project man­age­ment with Herdl ad­her­ing to the same tried-and-tested process they ap­ply to all pro­jects. Tasks would be bro­ken into a five-phase roadmap span­ning re­search and plan­ning, de­sign, de­vel­op­ment, test­ing and af­ter­care, with a cru­cial de­sign meet­ing sched­uled quickly af­ter project kick-off.

set­ting a di­rec­tion

In this meet­ing, the ideas and ref­er­ences that will be used through­out the project are brought to­gether and pre­sented to the client. While known as a ‘de­sign’ meet­ing, a range of top­ics get aired here with the aim of nail­ing down the over­all creative di­rec­tion, spe­cific aes­thet­ics and fron­tend func­tion­al­ity. “We pre­pared a dig­i­tal mood board for the de­sign meet­ing and broke down var­i­ous ex­am­ples into two spe­cific sec­tions, UI and UX. The meet­ing it­self was full of en­ergy and we en­cour­age clients to give as much in­put as pos­si­ble, draw­ing on their knowl­edge of their tar­get au­di­ence and wider mar­ket. In our mood board for Gen­e­sis, the user in­ter­face sec­tion cen­tred around se­lected vi­su­als and in­spi­ra­tion that would help us de­velop the over­all look and feel of the web­site. We in­cluded GIFS and mock­ups to demon­strate ef­fects and an­i­ma­tions as well as other ma­te­ri­als such as gig posters, il­lus­tra­tions, graf­fiti art, al­bum cov­ers and tat­toos to pick out de­sign cues that we felt aligned with the client’s brand val­ues.” The user ex­pe­ri­ence talks then dis­cussed spe­cific el­e­ments, in­clud­ing tak­ing book­ings, ca­reers, open­ing times, about the restau­rant, menus and data col­lec­tion. Here the team were able to har­ness as­sets from pre­vi­ous project work to quickly de­velop some early work­ing ex­am­ples, while sourc­ing other ar­eas of de­sign in­spi­ra­tion from ev­ery­day life as op­posed to dig­i­tal. “Dig­i­tal mar­ket­ing is a core ser­vice at Herdl, so our aim is never to just make a pretty web­site, it al­ways has a job to do. With ev­ery­thing un­der­stood we were able to con­firm a de­sign di­rec­tion and the func­tion­al­ity that would be in­cluded. It def­i­nitely helped that the guys at Gen­e­sis share a sim­i­lar taste in de­sign to our­selves and trusted us to lead the de­sign process.”

pri­ori­tis­ing con­tent

At this point, Herdl had a much stronger idea of the ap­proach they wanted to take, view­ing an­i­ma­tion as a cen­tral com­po­nent to ex­plore. Sto­ry­board­ing be­gan on an open­ing an­i­ma­tion se­quence, based on a quote — ‘a light unto na­tions’ — lifted from the Gen­e­sis brand doc­u­ment. Lit­tle more than a very rough il­lus­tra­tion of the main el­e­ments and the se­quenc­ing of their ap­pear­ance on the page, it would plot a lit­eral in­ter­pre­ta­tion of this

“the user in­ter­face sec­tion cen­tred around se­lected vi­su­als and in­spi­ra­tion”

state­ment, de­sign­ing an open­ing scene that ‘lit up’ and re­vealed a set­ting with ob­vi­ous bib­li­cal con­no­ta­tions. “Us­ing this el­e­ment as our fo­cal point, we started to break out our ideas into the most im­por­tant ques­tions that users ar­riv­ing on the web­site would have. We had iden­ti­fied two core user groups in our plan­ning — po­ten­tial cus­tomers and em­ploy­ees — and so be­gan to de­velop sec­tions that would fa­cil­i­tate their needs.” The team would then de­cide on the key in­for­ma­tion that needed to be com­mu­ni­cated, its log­i­cal order and also how con­tent should be pri­ori­tised, and how it would be dis­played to pro­vide an op­ti­mal user ex­pe­ri­ence. Paper­based wire­fram­ing kept things struc­tural and con­cep­tual, with less at­ten­tion paid to aes­thetic choices like ty­pog­ra­phy and il­lus­tra­tions un­til fron­tend work be­gan. “We started with the colour scheme, which we opted to keep black and white. Our vi­sion in­volved a lot of an­i­ma­tion work so we re­frained from bring­ing in colour, which we felt might dis­tract from the ex­pe­ri­ence we had in mind. The black-and-white aes­thetic gave the site a dis­tinct style that we wanted to feel recog­nis­able and unique.”

or­ganic ap­proach

This ‘unique’ look would also per­me­ate into page lay­out, favour­ing a more fluid, or­ganic method for po­si­tion­ing the il­lus­tra­tions and con­tent ac­cord­ingly. “In do­ing so, we aban­doned more tra­di­tional web de­sign rules and worked with­out a grid sys­tem, ar­rang­ing el­e­ments to cre­ate an ef­fec­tive balance be­tween the il­lus­tra­tions and the con­tent. It was also im­por­tant that the site would be re­spon­sive and dis­play cor­rectly on all de­vices, so we de­vised a method that would utilise per­cent­age­based po­si­tion­ing and a process of grace­ful degra­da­tion to main­tain the free-flow­ing de­sign.” Sev­eral vari­a­tions of the one-page de­sign were cre­ated be­fore set­tling quickly on the fi­nal choice, lay­ing out the com­po­nents in a way that would pro­vide the spac­ing needed for the larger il­lus­tra­tions. Re­main­ing space would then be filled at ran­dom with the smaller graph­ics of flow­ers and plants in an at­tempt to main­tain a nat­u­ral, or­ganic feel. Al­though the site is fully con­tent man­aged, Herdl built min­i­mum and max­i­mum word counts into the con­tent ed­i­tor to re­tain the fluid lay­out, while also se­lect­ing a type­face har­mo­nious to the il­lus­tra­tions. “By far the most sig­nif­i­cant de­sign task was cre­at­ing the an­i­ma­tions, which were all pro­duced us­ing Af­ter Ef­fects. An­i­ma­tions were made with­out the help of any short­cuts or plug­ins, as we wanted to re­tain the hand-drawn style of the il­lus­tra­tions and an­i­mate them in a way that best suited this char­ac­ter­is­tic. We also had dif­fi­cul­ties an­i­mat­ing the snake, which orig­i­nally was longer and coiled up. This was re­drawn so the an­i­ma­tion would be achiev­able within the time­frame.” A ba­sic func­tional spec­i­fi­ca­tion was then pro­duced to guide de­vel­op­ment on how each in­ter­ac­tive el­e­ment would an­i­mate or re­act. Us­ing In­vi­sion to add com­ments de­scrib­ing how each el­e­ment should be­have, this is the tech­nique that Herdl uses on ev­ery project to smooth the tran­si­tion from one depart­ment to an­other.

op­ti­mal per­for­mance

Dur­ing de­vel­op­ment, the big chal­lenge soon be­came about in­cor­po­rat­ing so many Cpuin­ten­sive an­i­ma­tions on one page. Here the team re­lied on Airbnb’s JS plugin, Lot­tie, to power the an­i­ma­tion due to its abil­ity to ex­port out from Af­ter Ef­fects to a JSON file. How­ever The team that this ‘short­cut’ would have pe­for­mance brough the project im­pli­ca­tions, with Lot­tie drain­ing me­mory to­gether while

prov­ing tough to speed up. “We ended up speak­ing with the guys at Airbnb and drop­ping the ver­sion of Lot­tie back to an ear­lier, leaner point in order to get the web­site per­for­mance to an ac­cept­able level.” Word­press would, mean­while, re­main Herdl’s CMS of choice for its in­tu­itive client ad­min and open-source ar­chi­tec­ture, with the team util­is­ing its own spe­cial ‘flavour’ based on the Sage theme de­vel­oped by Roots, plus sev­eral ex­ter­nal plug­ins that as­sist with back­end de­vel­op­ment. “We find Ad­vanced Cus­tom Fields (ACF) to be a bril­liant re­source that en­ables us to heav­ily cus­tomise and stream­line the ad­min ex­pe­ri­ence. Editable con­tent ar­eas are man­aged through ACF, with added con­trols for things like char­ac­ter lim­i­ta­tions, mo­bile and desk­top menu up­loads. Ad­di­tion­ally, Grav­ity Forms pow­ers the Book­ings and Con­tact form and in­te­grates with Mail Chimp for email sign-up.”

fur­ther recog­ni­tion

With dig­i­tal mar­ket­ing very much at their core, Herdl ap­plies that ex­per­tise to ev­ery web­site they build. In the con­text of the Gen­e­sis project, the team were there­fore ex­pect­ing a large amount of traf­fic as a re­sult of PR ac­tiv­i­ties sur­round­ing the launch of the restau­rant and also the un­veil­ing of the web­site it­self. It was cru­cial then that the site made a mem­o­rable first im­pres­sion on launch to max­imise the value of press and me­dia cov­er­age. “Web­site per­for­mance was some­thing we gave par­tic­u­lar con­sid­er­a­tion to, in­clud­ing how we would fa­cil­i­tate high lev­els of con­cur­rent users at any one time. We spent a con­sid­er­able amount of time dur­ing test­ing to en­sure that the web­site would ren­der op­ti­mally across mul­ti­ple de­vices, util­is­ing re­spon­sive and server-side tech­niques (RESS) to tweak lay­outs and el­e­ments. Other fron­tend op­ti­mi­sa­tions were im­ple­mented in­clud­ing caching and op­ti­mised file de­liv­ery to pro­vide the best ex­pe­ri­ence pos­si­ble.” This, cou­pled with Herdl’s em­pha­sis on in­dus­try-lead­ing host­ing, has gone on to see the fin­ished live web­site re­ceive an amaz­ing re­sponse. Gen­er­at­ing a huge amount of ex­po­sure through web de­sign awards and in­spi­ra­tion sites since launch, it’s rather fit­ting that the recog­ni­tion for Herdl’s work that at­tracted Gen­e­sis has come full cir­cle. “As an agency, we’ve been de­lighted to see the site re­ceive such high recog­ni­tion as it’s a piece of work that we’re all re­ally proud of and we’re ex­cited to see how the web­site will de­velop fur­ther,” Day con­cludes. “Most im­por­tantly to us in judg­ing the suc­cess of any project, how­ever, is the client feed­back and thank­fully the Gen­e­sis guys seem to ab­so­lutely love the site and couldn’t be hap­pier.”

“it was cru­cial that the site made a mem­o­rable im­pres­sion”

Work­ing well on all screens is crit­i­cal to site suc­cess

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.