A sense of iden­tity

Sell­ing the Ser­vices of a food qual­ity con­trol com­pany might cause most agen­cies to boil over, but for madrid’s twenty-two de­grees the cre­ative kitchen never proved too hot

Web Designer - - Contents - vein­ti­dos­gra­dos.com @twen­tyt­wod­grees Rubén Sánchez De­signer Vi­cente Lu­cendo De­vel­oper

Sell­ing the ser­vices of a food qual­ity con­trol com­pany is not easy. We find out how Madrid’s Twenty Two De­grees man­aged

There’s an in­ter­est­ing thought to be had about the mod­ern web ex­pe­ri­ence, in that it’s in­creas­ingly, al­most ex­clu­sively, an ecom­merce thing. Why? Be­cause ev­ery­one is seem­ingly sell­ing some­thing, even if they aren’t ac­tu­ally well, sell­ing any­thing. The pres­ence or ab­sence of a shop­ping cart de­fines noth­ing in an age where iden­tity is such a cur­rency and the mar­ket­ing of a mem­o­rable on­line im­age so cov­eted. This month’s web de­sign project is all about that pur­suit of pro­mo­tion and the ex­cit­ing bring­ing to­gether of an agency and client who share an out­look. Madrid-based dig­i­tal cre­ative stu­dio Twenty-two De­grees prides it­self, like most, on an am­bi­tious ap­proach where ev­ery minute de­tail of a project is ob­sessed over. Striv­ing for their own per­cep­tion of per­fec­tion around de­sign and de­vel­op­ment, each new brief is an op­por­tu­nity for in­no­va­tion. Craft­ing wholly cus­tom-made re­sults, the duo of co-founders Rubén Sánchez and Vi­cente Lu­cendo place real em­pha­sis pro­ject­ing the per­son­al­ity of their clients. Vi­cente Lu­cendo takes up the reins for the rest of the in­ter­view, “Our mar­ket niche is geared mostly to­wards those who want a mod­ern and tech­no­log­i­cal im­age for them­selves. Those who are not afraid of change, those will­ing to get away from cur­rent trends and feel com­fort­able with cre­ative and some­times risky pro­pos­als. In short, those clients who want to stand out from the com­pe­ti­tion.” In this in­stance, it just so hap­pens that An­a­lyt­ica Projects would in­deed be one of those clients look­ing for some­thing dif­fer­ent. As lead­ers in food qual­ity con­trol, they had a story to tell about the work they do with­out giv­ing vis­i­tors the hard sell. “They wanted to get away from that con­ven­tional over-struc­tured de­sign that most com­pa­nies have where the main fo­cus is to give lots of in­for­ma­tion to users. They didn’t want to sell any­thing though the web­site, in­stead they wanted to use it to con­vey their on­line im­age, one which had to be dif­fer­ent, funny and cre­ative.” So be­gan the task of tak­ing a brief so bliss­fully open to pos­si­bil­i­ties when it came to sell­ing An­a­lyt­ica’s iden­tity by the dozen.

Work­ing wisely

As is of­ten the case, this was a work­ing re­la­tion­ship with a suc­cess­ful his­tory. Hav­ing worked with the client in the past, ev­ery­thing was im­me­di­ately quite straight­for­ward in spite of a slight de­lay in sched­ul­ing. The Twenty-two De­grees guys couldn’t pick the project up for a few months and An­a­lyt­ica were pre­pared to wait given its sat­is­fac­tion with pre­vi­ous work. This con­fi­dence was fun­da­men­tal in the vi­sion they had for pre­sent­ing it­self within par­ent com­pany An­a­lyt­ica Ali­men­ta­ria. “For An­a­lyt­ica Projects the hu­mane fac­tor is cru­cial be­cause all their pro­cesses in­volve and re­quire the in-field ex­pe­ri­ence of their team mem­bers and they wanted to re­flect that on their on­line im­age too. So be­cause of this we wanted to con­vey both the process and the hu­man fac­tor. They also liked the idea of ex­plain­ing their process with­out get­ting into too much de­tail, in a sim­ple way with­out many in­ter­ac­tions, us­ing a path to guide the users while high­light­ing those parts of their pro­ce­dures where the ac­tion of their team is cru­cial.” From that early un­der­stand­ing, the guys re­quested vis­its to the An­a­lyt­ica of­fices, to in­ter­view key staff and cap­ture pho­tos or videos use­ful to get­ting a clearer han­dle on the client’s work. While a very large multi-na­tional com­pany, An­a­lyt­ica Ali­men­ta­ria very much started as a fam­ily con­cern driven by two own­ers Udo and Mar. With the pair still in­volved in ev­ery area of its run­ning, they would pro­vide the most in­flu­en­tial point of contact de­spite be­ing un­der­stand­ably busy and tight on time. “Be­cause of this we tried to bring to ev­ery one of our meet­ings visual pro­pos­als that ex­plained what we were go­ing to do next so they could have a bet­ter idea of it and could give us bet­ter feed­back. In to­tal we met with them in per­son or over Skype 5 or 6 times, which is not a lot com­pared to other clients. Be­cause we had worked with them in the past we al­ready knew their pref­er­ences on some top­ics so we could make bet­ter choices dur­ing the process and long meet­ings weren’t re­quired this time.”

Less is more

Clearly this mu­tual con­fi­dence was use­ful, with both par­ties happy to talk and the client es­pe­cially com­fort­able to flag up when their goals weren’t aligned. “From the first mo­ment

sense by its own and had to have a spe­cific colour that would dif­fer­en­ti­ate the mul­ti­ple sec­tions of the site. They loved it so we con­tin­ued work­ing on this di­rec­tion.”

Visual char­ac­ter

Pho­to­shop proved a cru­cial tool for re­al­is­ing the visual de­sign process, pre­sent­ing quite ad­vanced con­cepts quite quickly. Although lots of re­vi­sion here was never nec­es­sary, a trou­ble­some el­e­ment was in trans­lat­ing the site’s back­ground sen­tences and sub­se­quent el­e­ments to fit three dif­fer­ent lan­guages. “We pro­posed them to make car­toons of the team for their sec­tion and for it we had the help of the very tal­ented Span­ish car­toon­ist Joaquín Aldeguer, who has a very per­sonal style which we thought would match very well with the aes­thet­ics of the site. We sent him pho­tos of some of the team mem­bers of the com­pany and af­ter only a few days we had the fin­ished car­toons back with us.”

The visual quirk­i­ness th­ese ideas brought were fur­ther lifted by a com­mit­ment to an­i­mate, all the while be­ing mind­ful of keep­ing things func­tional. “One of the parts that took us sev­eral days to com­plete but look in­signif­i­cant com­pared to oth­ers, were the icons inside the cir­cles in the path. At first they were static im­ages but with the web­site al­ready fin­ished we de­cided to an­i­mate them in Af­ter Ef­fects so they looked more alive. We then tried to in­te­grate them as spritesheets but that caused per­for­mance prob­lems. Af­ter that we tried to use small videos but that caused even more prob­lems be­cause dif­fer­ent browsers ren­der video colours in dif­fer­ent ways. Sur­pris­ingly what worked out for us in the end was to make sim­ple GIFS with the an­i­ma­tions.”

Pro­to­type per­fect

With the back-end work tied so closely to front-end de­vel­op­ment and mak­ing those an­i­mated el­e­ments work, any cod­ing chal­lenges re­ally re­volved around that. Typ­i­cally asked to build their sites for Word­press, the guys adopted the same ap­proach here while util­is­ing the Rest API to con­trol preloads, lan­guage changes and data re­quests. “For the front-end we had to use WEBGL to achieve some of the ef­fects and to make the site run as smooth as pos­si­ble. We used the 2D frame­work Pixi.js and made cus­tom shaders for var­i­ous el­e­ments that couldn’t have been made in any other way such as the path, the video mask, the back­ground noise and of course the “bar­rel ef­fect” that is no­tice­able when you quickly scroll the page. This last ef­fect was added at the end of the project and turned out to be one of the most spe­cial as­pects.” Of course be­ing a

sin­gle page or ‘land­ing site’ in struc­ture, that scrolling would prove a cru­cial in­ter­ac­tion in de­liv­er­ing the con­tent.

The guys there­fore ran an early pro­to­type for de­tect­ing ev­ery frame the scroll po­si­tion of the user was in, be­fore hid­ing ev­ery­thing that wasn’t on screen so the browser only had to load what was nec­es­sary. “With­out this pro­to­type help­ing us to see if our idea was tech­ni­cally pos­si­ble we couldn’t have op­ti­mised ev­ery el­e­ment, leav­ing a re­ally poor user ex­pe­ri­ence due to the ev­i­dent frame drops. Sim­i­larly, for the sec­tion that talks about the pro­cesses of the com­pany, we in­te­grated a physics en­gine so the user could in­ter­act with the cir­cles that rep­re­sent those pro­cesses and make them col­lide with other cir­cles, the screen edges or the back­ground sen­tence let­ters.”

De­layed re­ac­tions

From the out­set, Twenty-two De­grees knew the time they had be­fore launch was flex­i­ble. So the fi­nal phases of the project was af­forded some last-minute changes with An­a­lyt­ica’s bless­ing. “For ex­am­ple, the is­sue we men­tioned pre­vi­ously about the icons was one of those changes that we made when the de­vel­op­ment was al­ready fin­ished but we re­ally thought would im­prove the re­sult in a very pos­i­tive way. We thought it would only take us a cou­ple of days to com­plete but ended up tak­ing us al­most a week. Another last minute change was a mod­i­fi­ca­tion of the back­ground sen­tence in two lan­guages, which had us mak­ing changes to many of the el­e­ments that in­ter­acted with it such as car­toons, bounc­ing spheres etc.”

The guys ad­mit that while a project of this type might nor­mally re­quire around 10 weeks of pro­duc­tion time, the ini­tial avail­abil­ity wait and some sub­se­quent de­lays caused the launch to slide slightly. “We were afraid of see­ing the ideas we had for the site be­ing done by other agen­cies or stu­dios be­fore we were able to pub­lish it and that would cause it to lose its ‘wow’ fac­tor.

When you see your own project so many times you lose that first im­pres­sion feel­ing and won­der how will peo­ple re­act the first time they visit it. Luck­ily for us, once pub­lished, we started re­ceiv­ing very good feed­back over so­cial me­dia by some very well re­spected pro­fes­sional peers, so we sub­mit­ted it to some of the most rel­e­vant in­dus­try awards and won all three – Awwwards, FWA & CSS De­sign Awards.”

tal­ented Span­ish car­toon­ist joaquin aldeguer gave a very per­sonal style to the team

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.