Here at WONDR, we’re excited to reveal that we had the exciting job of setting the brand narrative for the CSS Design Award’s Website of the Year 2018 showcase website.

We’re so proud to be flying the flag for Irish design 🇮🇪  at on a global stage. The site is an immersive underwater world titled “Coral” — a metaphor for the sea of creativity and design unearthed by CSS Design Awards.

We caught up with two of the WONDR team responsible for bringing this landscape to life. Meet Creative Director, Oisín Hurst and Creative Front End Developer, Clément Grellier. They chatted about the highs, the lows and all the jellyfish in between.

What was it like to be involved in creating Website of the Year Awards site?

Oisín Hurst: Exciting and intimidating.

Clément Grellier: Yes, it was great to work on something focussed on collaboration with freedom of creativity. Of course there’s a big responsibility and expectations at are an all time high — it’s being seen by the entire design community! But that’s an incentive to make sure the work was unique and interesting.

What makes the CSS Design Awards so special?

OH: For me, their mantra of ‘Inspire and be inspired’. The highest thing you can do as a creative is inspire others. If you have work commended on CSS Design Awards you have a platform to potentially inspire someone else. That cycle of creativity can start again. It’s a great social goal.

Why, in your opinion, are the CSS Design Awards important to creatives in the industry?

OH: To me it’s the peer review that adds value. With the CSS Design Awards you genuinely rate the judges — it gives huge weight to the awards. It’s not someone from outside of your field judging design.

I also have a huge admiration for the effort that goes into judging and maintaining the site, and the depth of the view, you can really lose yourself in it. There’s lots of great work to discover.

CG: Yes, for me the wider community aspect as well as the peer review of the rewards.

What inspired the brand narrative “Coral”, our world under the sea?

OH: We wanted to create a narrative that tied in with the proposition and positioning of the CSS Design Awards brand and translate that into a visual concept and a wider digital experience.

Two aspects stood out to us; firstly the sense of community at the heart of CSS Design Awards, and two, the cyclical journey of inspiration.

Oisín Hurst WONDR
Creative Director

It was a metaphor that encompassed thriving creativity and crucially, the idea of community. The notion that we are floating through a vast sea of noise and debris on the internet but when you discover CSS Design Awards you land on a vibrant creative community. It’s our own creative island to be inhabited, much like a thriving coral beneath the sea.

Can you tell us how “Coral” was brought to life?

OH: The coral is a neon island of creativity, floating in a vast digital environment. We created the 3D hero coral by dressing it with neon plant life and lighting it with hues of pink and cyan. We also created a range of secondary corals that included the trophy, crystals and our jellyfish (named Squee).

There’s also a little surprise when you reach the footer. When a visitor scrolls down to the base of each page, they break the water’s surface and discover that the entire experience is actually upside-down.

You explored a few themes before you got to “Under The Sea”, what ideas were killed during the process?

OH: We explored a few different avenues.We wanted a world that had enough variety to create a convincing environment. Our initial idea was a typographic route that encompassed a complete alphabet with seven versions of each letter. But in the end, we decided the typographic route was a little too cold and clinical. It felt natural to come back to the coral which was a richer interpretation of community. That notion was core of the brief.

Oisin, typography still features heavily, how did that evolve?

OH: We took some of the typographic learnings from our initial creative research into the final typography for the site. We agonised over getting movement lifelike and in the end we decided it didn’t have to be literal, as long as the underwater feeling was achieved.

That movement is integral to the theme, can you talk us through that, Clément?

CG: I tried to recreate some of the ideas Oisín had around typography by taking 2D assets and making them look 3D to give them depth. We were keen that the letters would move with the mouse to mimic the underwater feeling of floating, in order to match the coral world.

Harmonising the movements with the under the sea concept so it was believable was important to the concept. It also kept it natural looking, interesting and interactive.

 Clément WONDR
Front End Developer

The 3D coral is a hero element, can you tell us about the making of it?

CG: An element of play was really important which is why the 3D effect is key. Again we wanted to mimic the underwater feel and make it look more dynamic and interesting for the user.

OH: Yes it was key to bring that habitat to live with 3D. At first we made rotating 3D animations for every asset. We had a master coral with about 5 different coral “children” not forgetting, Squee, our jellyfish. We even created a coral version of the Website of the Year trophy, the CSS Design Awards logo and our own WONDR brandmark that blended nature and technology together.

How was the collaborative process between design and front end development for this project?

OH: It was really open. We didn’t do detailed page designs. It was always more of a conversation on how things could work rather than a prescriptive process. Clément instinctively knew how to elevate the designs I brought to him, creating an immersive experience that surprises the user — giving it the ‘wow factor’ I suppose.

CG: Yes, it was always a work in progress — we just kept bouncing ideas off each other. I think this is the best way to work. It’s how we were able to make the experience a bit more interesting. Open communication meant we stayed on schedule, which is important!

It’s sounds like that dialogue was key to this project?

OH: For me, when I finish something there’s always the temptation to go back and over-work it. It was really important to have the input from the team to know when to stop!

Any challenges you had to overcome once you got into the project?

CG: One of the main challenges was performance because of the amount of data. The weight of data for this project is quite high as we have to parse all the votes, nominees, judges, winners and display them in a dynamic way. It was quite challenging to handle all that data and re-organize it, sort it and filter it.

The other challenge was the assets. As we wanted to make the assets interactive and have them move and rotate, we needed to have a sequence of images for each asset ,like the letters and the coral, which increases the weight of the page. We tested and went back and forth before finding the right way to do that and made sure everything is loaded correctly.

We used very specific properties like masking videos, which made the QA more difficult because some of these properties are not available on all browsers. We often had to code a specific alternative to make sure it displays properly on all modern browsers (although the experience is best viewed on Chrome).

OH: Yes, as you work through it, you think you’ve killed all your darlings at concept stage, but then you realise there’s plenty more to kill. We had particle effects and additional movement that sadly, had to be cut. There comes a time you sacrifice things to the ‘gods of performance’. You have to decide what’s bone and what’s flesh. Protect and what you can, sacrifice what you can’t.

Favourite thing about the Website of the Year website, now it’s complete?

CG: The underwater universe. The creativity of the concept and bringing it to life.

OH: The magical realism of the site. The fact it floats and it feels electronic and magical at the same time.

You’re now well into your fifth year, how did you get started?

Yes time does fly. In 2014 it was a busy year for me both professionally and personally. I had just got married, had a kid, bought a house and I thought to myself you know what I need to do next is set up a company, sure what else would I be doing.

I had built a good reputation and bank of work but I knew the model for the work I wanted to do was changing and I had a clear view on what it would evolve too. I had plenty of good offers abroad and in this market to build what would become WONDR within the comfort of a larger agency environment. I felt it was best to stay at home in Ireland, re-programme my skills, stay independently owned and build something from the ground up that I would be proud of.

I had contacts made from years working in branding, one of them being Oisin Hurst (now our Creative Director). We worked on the GAA rebrand together and he was keen to introduce myself to a company called PCH who’s branding he was working on. They needed a strong digital partner to help them transform their digital presence to bring their new positioning to life. 

This was a very interesting project and it gave me the confidence to get the business started. This became WONDR’s first client and was a major part of the initial story that helped the company to get started. I’m still very thankful to Philip Dwyer & the PCH leadership team for putting trust in myself to work with them as they were working with Fantasy Interactive at the time and it was a good endorsement to land this project.

        

 

Do you think the digital industry has changed since you’ve started? 

Yes it has evolved massively, just look at any project you’ve done that is over 2 years old and you can see how fast things can date if they’re not constantly polished and optimised. We’re still in the early days of digital, so if people think digital is fast and complicated now, wait till they see what’s coming next.

I could go on about the role of data and user research, but most people by now know this is the future already but yet struggle to apply it to their day to day. If people just started with this they’d see huge improvement in their digital brand experiences.

One other area I’ve noted is how the relationships we have with client partners is evolving. We’ve helped client teams to structure and build their teams internally so where possible they don’t need us which is kind of against the typical ‘agency’ model.

We’re always keen to keep tasks in house on the client side where possible by building design systems that work across all applications and encourage clients to keep their budget to work with ourselves on hero roadmap projects instead. 

Business growth comes out of brave choices.

Dermot O'Shea Founder

Your new positioning talks about clarity + bravery, why?

We like to carry out detailed discovery and definition stages that help to remove the perceived complexity from digital projects. I often tell new clients, we do the thinking up front to de-risk their project and investments as quite often digital change projects can evolve significant capital to make them happen. We’re there to make it a success.

When we looked at our positioning, we interviewed all of our key clients to help us shape and inform our approach. A common theme that kept coming back was the idea of a digital journey which they trusted us to guide them through. 

Some were keen to highlight we removed the complexity to help bring them goals, experiences and results that mattered. We also took onboard the feedback that we’re very honest, open and not afraid to give people the advice they need. Anyone who’s worked with us will surely back us up on this point 🙂

We refer to this as being brave to make the right choices for the brand, not what’s right for our revenue or portfolio of work. Quite often digital projects involve cultural and organisational change where you have to make the brave choices up front on things such as brand, resourcing, technology & media to be successful. Business growth comes out of brave choices.

WONDR-Clarity+Bravery

You describe yourselves as a Digital Product Practice. Why?

Ireland and in particular Dublin is changing all the time due to the sheer scale of international tech companies that come here,  so we felt that the idea of an agency or studio belongs to the legacy of Advertising.

Their model works for them but not for us. We didn’t want clients to assume we worked to the same methodology or process as we have invested significant time in developing our ways of working.

Alot of our client work is on digital products and we operate an agile kanban methodology so we needed a description that reflected more of what we did day for day for our clients.

 

Which of your projects to date do you think epitomise clarity +  bravery? 

We recently partnered with UK brand called Pet Drugs Online. If there was ever a project that needed clarity + bravery then this was it. For us there was huge potential for this brand to disrupt the market and become the ‘boots’ of pet healthcare. We spent a great deal of time bringing clarity to their brand, UX & technology choices. 

We were brave with our approach to refresh the brand and re-platform at the same time, the end results has seen a 47% year on year increase in revenue and each month they are breaking new sales records they never saw before.

 

You’re a company of internationalists, with talent from all over the globe. Is hiring from internationally important? 

Yes we have a wide selection of languages and countries represented in the practice. It really helps to keep us open to change and the outside world as our team bring their experience to Ireland from France, Japan, Brazil, Canada, US and a far. 

We’re constantly going to international events and awards to help keep touch but also to validate we’re on the right path. 

We aim to be a catalyst that sparks the next generation of digital talent in Ireland

Dermot O'Shea Founder

We want to further add to Ireland’s growing reputation as world leaders in design, as we firmly believe the best work can be done from Ireland. It’s why recently we collaborated with CSSDA Website of the Year awards where the world’s best work was selected.

To be involved in this greater story is an honour but also validates WONDR’s reputation amongst our peers as being as good as any other market.

 

Do you have a vision for WONDR for the next 5 years?

We love eCommerce work in particular so in 5 years time it would be an ambition to be known internationally for our work in this field as I believe we’re already good as any other places doing this. Too many brands are still prisoners and passengers on their technology platforms and it’s our ambition to help people unlock this.

Finally I keep coming back to this idea you have to have pride in what you’re doing or else what’s the point. When I look back in 5 years time, I want to feel proud of the work the team has done. It’s my job to foster the culture to enable this to happen.

It’s been a busy year for WONDR. We launched some of our most successful projects. We made it our mission to empower clients to set their digital brand story and helped them realise great success to boot. We achieved some big goals in 2018.

We worked on some challenging and exciting projects. Won global awards, made big moves, got fresh meat by way of new team members (shout out to Tash the dog, our new favourite employee who freelances from time to time). So here’s how it all went down.

Winter

We kicked off the year with a Website of The Day award from CSS Design Awards for our work on New Music Dublin. Making us the most awarded Irish practice across CSS Design Awards, FWA and Awwwards.

We made waves with ESB Energy UK working on a successful digital branding project and full site experience, creating motion design that even managed to work it’s way into the TV ad — proof that collaboration between digital and offline creates better experience for brands.

Spring

We welcomed Pierre to the WONDR team, all the way from France he brought enthusiasm, hipster bikes and the most french moustache we’ve ever seen.

 

Then we got some amazing news — flying the flag for Ireland, we were named in the Top 10 studios in the World by CSS Design Awards. We’re absolutely convinced the best digital work can come out of Ireland, and this year we’ll be looking even more to set the international benchmark for great work.

Summer

In June we moved into our new office space on Wicklow St, right smack bang in the middle of the city. Four floors of creativity and a rooftop with city views (we’re yet to take full advantage of). We quickly became accustomed to bad buskers on Grafton Street, pints in Mary’s bar and the ‘Big Debate’ — which burger is better, WOW burger or Bunsen (the jury is still out).

Autumn

We welcomed our new Director of Operations Emily Miller — fresh off the plane from Canada, she decided poutine and snow is over-rated and there’s no place like home for the craic. She’s brought knowledge, expertise and invaluable insights from markets across the Atlantic.

We launched Pet Drugs Online’s new platform and turned UK’s most popular pet e-commerce platform into the world’s best performing Magento website by the end of 2018 — proof that partnering with clients and listening to what they need is the way forward.

That was just a little glimpse into the world of WONDR over the last 12 months.

Thank you to everyone who partnered with us, inspired us and liked us in 2018, roll on 2019 as we have some big projects and changes happening.

WP Engine have released a global case study benchmarking our work with the Irish heart Foundation on their website.

 

The charity plays a leading role in improving the cardiovascular health of people living in Ireland so they do not experience disability or die prematurely from heart disease, stroke and other blood vessel diseases. They do this through health promotion, advocacy, research and pre-hospital coronary care.

They needed a website that would have a bigger impact and encourage donations. Working closely with ourselves, we defined their digital strategy resulting in a new revamped website experience that was built using WordPress & powered by WP Engine.

The site was designed with an editorial system using components, allowing the team to customise and create bespoke user journeys to meet all the demands of the public and their own stakeholders. Previously the charity commissioned bespoke micro-sites for each campaign, so the new site was built with campaign tools enabling them to publish their campaigns quickly on the main site and without the need to spend on additional development costs.

The site also included a learning management system to enable the charity to publish courses which teachers and students could access to register for courses, track their progress and collect their certificates. WONDR also built a custom API for ThankQ, which is a global charity CRM that gathers all information about donors.

We use ThankQ with an independent payment gateway that was developed using both Stripe and PayPal’s Braintree. We chose Stripe and Braintree because they were mobile first and had scalability, and could take a lot of traffic

Peter Delaney Director of Product
WONDR

Trusted WP Engine Partner

  • WONDR is an official partner of WP Engine
  • We have worked closely with them over the last 8 years to deliver award winning, secure & fast performing websites.
  • We have delivered websites on WP Engine for fintechs, luxury hotels, charities, media companies & global software companies.
  • WP Engine also benchmarked our work for 11Onze’s Private Social Network.