HVC is a waste processing company that generates sustainable energy for thousands of households in the Netherlands. They want to be the leader in the extraction of raw materials and energy from waste and eventually want to be more perceived by their target audience as a sustainable energy company. They asked us to redesign their website from the ground up to realize that shift in brand perception. I was the lead designer on this project.
HVC wants a shift in its brand perception, as its target audience hardly knows about its ambitious mission of a sustainable future. By creating a new website equipped with enhanced user experience and a new visual identity, we wanted to give HVC a platform to demonstrate its mission by informing, inspiring, and encouraging behavior change.
We started off the project with an analysis phase. In this phase, we did a workshop with the stakeholders, as we first wanted to establish an online strategy by identifying important challenges and exploring possible solutions. We also focused on demonstrating HVC's new ambition and improving customer satisfaction, ultimately getting people to take action.
With a set strategy, we went into the next stage: 'sprint 0'. Throughout this project, we worked with two-weekly sprints, and in this first 'pre' sprint, we solely focused on the new visual language.
The client wanted a clean, easy to use, and modern website that would accommodate the new branding provided by Teldesign while also being suitable for digital interfaces.
To make the new website scalable, I developed a design system based on the Atomic Design approach by Brad Frost.
The design system is built with a hierarchy in mind, just like in chemistry. This approach provides a rich context for everyone involved and builds up a shared knowledge base and a foundation to make the platform future proof.
I used animations to enhance the user- and brand experience, give the user feedback, and create focus and hierarchy. Some of the micro-animations used in my designs are also functional. From animating arrows in buttons to subtle load-in animations on pages, they all serve a purpose; to draw attention to specific content.
One of the project's main goals was full accessibility; in other words, all residents – including those with disabilities – should be able to use every feature of the website. Therefore, I ensured that every design choice was thoroughly tested against the Web Content Accessibility Guidelines (WCAG) 2.0. I did this with a tool called Stark, a plugin for Figma, Sketch & Adobe XD. It lets you quickly check contrast by selecting two layers with different colors and see whether there is sufficient contrast between them. If not, it will conveniently give you suggestions to help you out.
Early on in the design phase, we tested the designs with a small group. We wanted to see how they would use the site navigation. We noticed that many people would go to the search field and look for the same specific content. I used that insight to make that content as prominent as possible, effectively discouraging people from using the search field.
A month after the launch, we saw an increase of almost 200% in unique visitors. Furthermore, we noticed a whopping 80% less search volume on the website, which means that people now find content much easier than before. And we also managed to maintain a Google Speed Test score of 96/100 on desktop and 74/100 on mobile.
Personally, this project was a great opportunity to combine different skills, such as art direction, visual- and UX design, animation, and presenting, effectively pushing myself to learn new things and step out of my comfort zone.
Floris de Langen (Art Direction), Erik Börjesson (Design), Harmen Struiksma (UX Design), Evianne van de Zande (Product Management), Jeroen Schippers (Product Management), Martijn Houtman (Development), Boaz Poolman (Development), Niels de Ruijter (Development), and Nico de Groot (Development).