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.
We at Unc Inc redesigned their website from the ground up to help them realize that shift in brand perception. And it was my responsibility to create and manage the creative outputs.
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 that could demonstrate its mission by informing, inspiring, and encouraging behavioral change with the people.
We started off the project with an analysis phase. In this phase, we did a workshop with the stakeholders, as we first wanted to define the online strategy by identifying essential 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 the defined strategy from the analysis phase, we went into the next stage: sprint 0. Throughout this whole project, we worked with two-weekly sprints, and in this very first 'pre' sprint, we solely focused on the new visual language.
HVC had recently undergone a new brand identity, and our goal was to make it suitable for digital applications.
To make the new website scalable, we 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.
Besides enhancing the brand experience, animations give the user feedback and create focus and hierarchy. All of the micro-animations used in our design are 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 platform. Therefore every design choice was thoroughly tested against the Web Content Accessibility Guidelines (WCAG) 2.0.
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 a lot of people would go to the search field and look for the same specific content. We 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, design, UX, animation, and presenting, effectively pushing myself to learn new things and step out of my comfort zone.