when organic food restaurant genesis sought imaginative creative guidance for its New online presence, could agency herdl vault every obstacle and deliver the gold?
Mark is a freelancer writer who has been writing about web design and technology for over 15 years. In this issue he finds out how the creatives at Herdl delivered the perfect site for organic food restaurant Genesis.
given that so many of Design Diary’s featured projects describe projects born out of existing partnerships, you might think ‘better the devil you know’ is the industry mantra. While it’s true that successful creative relationships tend to encourage loyalty, they have to start somewhere. While digital agencies rarely ‘face off’ in competitive pitches to land new work, it’s true that prior achievements can be pivotal. Our featured players this month are poster children for illustrating this, when client Genesis found agency Herdl through the web design awards site, Awwwards. Noticing an interactive project Herdl produced in 2017 for a coffee company called Two Chimps, the Shoreditch-based fast-food vegan restaurant saw something that chimed with the unique approach they craved. Indeed Herdl, who formed in 2013, started with the goal of assembling a team of digital experts capable of tackling any challenge. Since then two have become six, staffing multi-disciplinary services across web design and digital marketing, underpinned by technology, business and creative application expertise. Genesis meanwhile, no strangers to recognition themselves, serve a 100 per cent plant-based menu with dishes inspired from across the globe, catering for both vegans and meat eaters. Its fully organic and Gmo-free menu, makes Genesis one of the only UK restaurants to hold the Soil Association’s ‘Organic Served Here’ Award. “From the very beginning, we knew we weren’t going to design a traditional restaurant website, it was the culture and concept behind Genesis that we wanted to bring forward,” Designer Sam Day begins. “Our aim was to create intrigue and anticipation, so rather than selling a product or service we wanted to showcase the Genesis ideology.”
“we knew we weren’t going to design a traditional restaurant website”
Commenting that they had never seen a site quite like Two Chimps, the Genesis guys knew they wanted Herdl to produce something similarly innovative for them. “Genesis shared their initial ideas and brand document with us and we instantly sensed this could be a really exciting project. We picked out certain illustration styles and design routes that we could confidently translate to a digital format and developed a creative direction that would utilise these distinctive elements.” A few emails and Skype chats later and both were on board, eager to find out how these initial ideas could be refined. Very quickly a connection between both organisations emerged, with aspirations for the project in tune enough morally and creatively to let Genesis surrender complete control over the design. Tasking Herdl with telling their story most effectively from a digital perspective, the client was simultaneously conversing with artists and designers to produce branding and packaging elements. “So there was already a stimulating atmosphere around the project and various assets beginning to take shape. We had access to commissioned artwork from some very talented illustrators and graphic designers, while we needed to develop a consistent look and feel, it was important to establish our own interpretation that would deliver a unique digital experience.” This trust extended to leading the project management with Herdl adhering to the same tried-and-tested process they apply to all projects. Tasks would be broken into a five-phase roadmap spanning research and planning, design, development, testing and aftercare, with a crucial design meeting scheduled quickly after project kick-off.
setting a direction
In this meeting, the ideas and references that will be used throughout the project are brought together and presented to the client. While known as a ‘design’ meeting, a range of topics get aired here with the aim of nailing down the overall creative direction, specific aesthetics and frontend functionality. “We prepared a digital mood board for the design meeting and broke down various examples into two specific sections, UI and UX. The meeting itself was full of energy and we encourage clients to give as much input as possible, drawing on their knowledge of their target audience and wider market. In our mood board for Genesis, the user interface section centred around selected visuals and inspiration that would help us develop the overall look and feel of the website. We included GIFS and mockups to demonstrate effects and animations as well as other materials such as gig posters, illustrations, graffiti art, album covers and tattoos to pick out design cues that we felt aligned with the client’s brand values.” The user experience talks then discussed specific elements, including taking bookings, careers, opening times, about the restaurant, menus and data collection. Here the team were able to harness assets from previous project work to quickly develop some early working examples, while sourcing other areas of design inspiration from everyday life as opposed to digital. “Digital marketing is a core service at Herdl, so our aim is never to just make a pretty website, it always has a job to do. With everything understood we were able to confirm a design direction and the functionality that would be included. It definitely helped that the guys at Genesis share a similar taste in design to ourselves and trusted us to lead the design process.”
At this point, Herdl had a much stronger idea of the approach they wanted to take, viewing animation as a central component to explore. Storyboarding began on an opening animation sequence, based on a quote — ‘a light unto nations’ — lifted from the Genesis brand document. Little more than a very rough illustration of the main elements and the sequencing of their appearance on the page, it would plot a literal interpretation of this
“the user interface section centred around selected visuals and inspiration”
statement, designing an opening scene that ‘lit up’ and revealed a setting with obvious biblical connotations. “Using this element as our focal point, we started to break out our ideas into the most important questions that users arriving on the website would have. We had identified two core user groups in our planning — potential customers and employees — and so began to develop sections that would facilitate their needs.” The team would then decide on the key information that needed to be communicated, its logical order and also how content should be prioritised, and how it would be displayed to provide an optimal user experience. Paperbased wireframing kept things structural and conceptual, with less attention paid to aesthetic choices like typography and illustrations until frontend work began. “We started with the colour scheme, which we opted to keep black and white. Our vision involved a lot of animation work so we refrained from bringing in colour, which we felt might distract from the experience we had in mind. The black-and-white aesthetic gave the site a distinct style that we wanted to feel recognisable and unique.”
This ‘unique’ look would also permeate into page layout, favouring a more fluid, organic method for positioning the illustrations and content accordingly. “In doing so, we abandoned more traditional web design rules and worked without a grid system, arranging elements to create an effective balance between the illustrations and the content. It was also important that the site would be responsive and display correctly on all devices, so we devised a method that would utilise percentagebased positioning and a process of graceful degradation to maintain the free-flowing design.” Several variations of the one-page design were created before settling quickly on the final choice, laying out the components in a way that would provide the spacing needed for the larger illustrations. Remaining space would then be filled at random with the smaller graphics of flowers and plants in an attempt to maintain a natural, organic feel. Although the site is fully content managed, Herdl built minimum and maximum word counts into the content editor to retain the fluid layout, while also selecting a typeface harmonious to the illustrations. “By far the most significant design task was creating the animations, which were all produced using After Effects. Animations were made without the help of any shortcuts or plugins, as we wanted to retain the hand-drawn style of the illustrations and animate them in a way that best suited this characteristic. We also had difficulties animating the snake, which originally was longer and coiled up. This was redrawn so the animation would be achievable within the timeframe.” A basic functional specification was then produced to guide development on how each interactive element would animate or react. Using Invision to add comments describing how each element should behave, this is the technique that Herdl uses on every project to smooth the transition from one department to another.
During development, the big challenge soon became about incorporating so many Cpuintensive animations on one page. Here the team relied on Airbnb’s JS plugin, Lottie, to power the animation due to its ability to export out from After Effects to a JSON file. However The team that this ‘shortcut’ would have peformance brough the project implications, with Lottie draining memory together while
proving tough to speed up. “We ended up speaking with the guys at Airbnb and dropping the version of Lottie back to an earlier, leaner point in order to get the website performance to an acceptable level.” Wordpress would, meanwhile, remain Herdl’s CMS of choice for its intuitive client admin and open-source architecture, with the team utilising its own special ‘flavour’ based on the Sage theme developed by Roots, plus several external plugins that assist with backend development. “We find Advanced Custom Fields (ACF) to be a brilliant resource that enables us to heavily customise and streamline the admin experience. Editable content areas are managed through ACF, with added controls for things like character limitations, mobile and desktop menu uploads. Additionally, Gravity Forms powers the Bookings and Contact form and integrates with Mail Chimp for email sign-up.”
With digital marketing very much at their core, Herdl applies that expertise to every website they build. In the context of the Genesis project, the team were therefore expecting a large amount of traffic as a result of PR activities surrounding the launch of the restaurant and also the unveiling of the website itself. It was crucial then that the site made a memorable first impression on launch to maximise the value of press and media coverage. “Website performance was something we gave particular consideration to, including how we would facilitate high levels of concurrent users at any one time. We spent a considerable amount of time during testing to ensure that the website would render optimally across multiple devices, utilising responsive and server-side techniques (RESS) to tweak layouts and elements. Other frontend optimisations were implemented including caching and optimised file delivery to provide the best experience possible.” This, coupled with Herdl’s emphasis on industry-leading hosting, has gone on to see the finished live website receive an amazing response. Generating a huge amount of exposure through web design awards and inspiration sites since launch, it’s rather fitting that the recognition for Herdl’s work that attracted Genesis has come full circle. “As an agency, we’ve been delighted to see the site receive such high recognition as it’s a piece of work that we’re all really proud of and we’re excited to see how the website will develop further,” Day concludes. “Most importantly to us in judging the success of any project, however, is the client feedback and thankfully the Genesis guys seem to absolutely love the site and couldn’t be happier.”
“it was crucial that the site made a memorable impression”
Working well on all screens is critical to site success