A sense of identity
Selling the Services of a food quality control company might cause most agencies to boil over, but for madrid’s twenty-two degrees the creative kitchen never proved too hot
Selling the services of a food quality control company is not easy. We find out how Madrid’s Twenty Two Degrees managed
There’s an interesting thought to be had about the modern web experience, in that it’s increasingly, almost exclusively, an ecommerce thing. Why? Because everyone is seemingly selling something, even if they aren’t actually well, selling anything. The presence or absence of a shopping cart defines nothing in an age where identity is such a currency and the marketing of a memorable online image so coveted. This month’s web design project is all about that pursuit of promotion and the exciting bringing together of an agency and client who share an outlook. Madrid-based digital creative studio Twenty-two Degrees prides itself, like most, on an ambitious approach where every minute detail of a project is obsessed over. Striving for their own perception of perfection around design and development, each new brief is an opportunity for innovation. Crafting wholly custom-made results, the duo of co-founders Rubén Sánchez and Vicente Lucendo place real emphasis projecting the personality of their clients. Vicente Lucendo takes up the reins for the rest of the interview, “Our market niche is geared mostly towards those who want a modern and technological image for themselves. Those who are not afraid of change, those willing to get away from current trends and feel comfortable with creative and sometimes risky proposals. In short, those clients who want to stand out from the competition.” In this instance, it just so happens that Analytica Projects would indeed be one of those clients looking for something different. As leaders in food quality control, they had a story to tell about the work they do without giving visitors the hard sell. “They wanted to get away from that conventional over-structured design that most companies have where the main focus is to give lots of information to users. They didn’t want to sell anything though the website, instead they wanted to use it to convey their online image, one which had to be different, funny and creative.” So began the task of taking a brief so blissfully open to possibilities when it came to selling Analytica’s identity by the dozen.
As is often the case, this was a working relationship with a successful history. Having worked with the client in the past, everything was immediately quite straightforward in spite of a slight delay in scheduling. The Twenty-two Degrees guys couldn’t pick the project up for a few months and Analytica were prepared to wait given its satisfaction with previous work. This confidence was fundamental in the vision they had for presenting itself within parent company Analytica Alimentaria. “For Analytica Projects the humane factor is crucial because all their processes involve and require the in-field experience of their team members and they wanted to reflect that on their online image too. So because of this we wanted to convey both the process and the human factor. They also liked the idea of explaining their process without getting into too much detail, in a simple way without many interactions, using a path to guide the users while highlighting those parts of their procedures where the action of their team is crucial.” From that early understanding, the guys requested visits to the Analytica offices, to interview key staff and capture photos or videos useful to getting a clearer handle on the client’s work. While a very large multi-national company, Analytica Alimentaria very much started as a family concern driven by two owners Udo and Mar. With the pair still involved in every area of its running, they would provide the most influential point of contact despite being understandably busy and tight on time. “Because of this we tried to bring to every one of our meetings visual proposals that explained what we were going to do next so they could have a better idea of it and could give us better feedback. In total we met with them in person or over Skype 5 or 6 times, which is not a lot compared to other clients. Because we had worked with them in the past we already knew their preferences on some topics so we could make better choices during the process and long meetings weren’t required this time.”
Less is more
Clearly this mutual confidence was useful, with both parties happy to talk and the client especially comfortable to flag up when their goals weren’t aligned. “From the first moment
sense by its own and had to have a specific colour that would differentiate the multiple sections of the site. They loved it so we continued working on this direction.”
Photoshop proved a crucial tool for realising the visual design process, presenting quite advanced concepts quite quickly. Although lots of revision here was never necessary, a troublesome element was in translating the site’s background sentences and subsequent elements to fit three different languages. “We proposed them to make cartoons of the team for their section and for it we had the help of the very talented Spanish cartoonist Joaquín Aldeguer, who has a very personal style which we thought would match very well with the aesthetics of the site. We sent him photos of some of the team members of the company and after only a few days we had the finished cartoons back with us.”
The visual quirkiness these ideas brought were further lifted by a commitment to animate, all the while being mindful of keeping things functional. “One of the parts that took us several days to complete but look insignificant compared to others, were the icons inside the circles in the path. At first they were static images but with the website already finished we decided to animate them in After Effects so they looked more alive. We then tried to integrate them as spritesheets but that caused performance problems. After that we tried to use small videos but that caused even more problems because different browsers render video colours in different ways. Surprisingly what worked out for us in the end was to make simple GIFS with the animations.”
With the back-end work tied so closely to front-end development and making those animated elements work, any coding challenges really revolved around that. Typically asked to build their sites for Wordpress, the guys adopted the same approach here while utilising the Rest API to control preloads, language changes and data requests. “For the front-end we had to use WEBGL to achieve some of the effects and to make the site run as smooth as possible. We used the 2D framework Pixi.js and made custom shaders for various elements that couldn’t have been made in any other way such as the path, the video mask, the background noise and of course the “barrel effect” that is noticeable when you quickly scroll the page. This last effect was added at the end of the project and turned out to be one of the most special aspects.” Of course being a
single page or ‘landing site’ in structure, that scrolling would prove a crucial interaction in delivering the content.
The guys therefore ran an early prototype for detecting every frame the scroll position of the user was in, before hiding everything that wasn’t on screen so the browser only had to load what was necessary. “Without this prototype helping us to see if our idea was technically possible we couldn’t have optimised every element, leaving a really poor user experience due to the evident frame drops. Similarly, for the section that talks about the processes of the company, we integrated a physics engine so the user could interact with the circles that represent those processes and make them collide with other circles, the screen edges or the background sentence letters.”
From the outset, Twenty-two Degrees knew the time they had before launch was flexible. So the final phases of the project was afforded some last-minute changes with Analytica’s blessing. “For example, the issue we mentioned previously about the icons was one of those changes that we made when the development was already finished but we really thought would improve the result in a very positive way. We thought it would only take us a couple of days to complete but ended up taking us almost a week. Another last minute change was a modification of the background sentence in two languages, which had us making changes to many of the elements that interacted with it such as cartoons, bouncing spheres etc.”
The guys admit that while a project of this type might normally require around 10 weeks of production time, the initial availability wait and some subsequent delays caused the launch to slide slightly. “We were afraid of seeing the ideas we had for the site being done by other agencies or studios before we were able to publish it and that would cause it to lose its ‘wow’ factor.
When you see your own project so many times you lose that first impression feeling and wonder how will people react the first time they visit it. Luckily for us, once published, we started receiving very good feedback over social media by some very well respected professional peers, so we submitted it to some of the most relevant industry awards and won all three – Awwwards, FWA & CSS Design Awards.”
talented Spanish cartoonist joaquin aldeguer gave a very personal style to the team