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.
All elements are documented in a library to keep the web materials, elements like buttons, color combinations, typography, spacing, and components, consistent, organized, and available to everyone at all times.
To empower their sustainable ideology, I reused components and made little adjustments to fit them in their context.
The hierarchy extends to page-level templates. Every page type is designed in a way to meet its purpose, whether it's informing, inspiring, or encouraging to take action.
To ensure maximum scalability, I created multiple variations of the most relevant content blocks depending on the context.
Every page type has its purpose, one of them being encouraging action. And for this page type, I designed specific elements that entice user interaction.
Besides creating a responsive design, I designed relevant components with adaptivity in mind. For instance, a 'more information' button for the HVC app changes to 'download app' buttons on mobile.
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.
To meet the WCAG 2.0 guidelines' minimum requirements, I made some design choices like adjusting the red brand color to create high contrast with text to increase readability.
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.
This project was a great opportunity to learn new skills, primarily analytical, as I worked on user research and tested the design early on in the process. This allowed me to act quickly to improve my designs, showing me how important it is to assess your product with the end-user as early as possible.
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).
