HVC

A new website for a new mission

A screenshot of the homepage of the HVC website.

Introduction

A complete redesign

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.

In this day of age, it's unthinkable launching a website that is not optimized for the smaller screens. We took a mobile-first approach with this project, starting with designing the mobile version, which is then adapted to larger screens.

The challenge

Better brand perception

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.

Besides being a waste processor, HVC also generates electricity for thousands of Dutch households. By designing a new and clear energy onboarding, we wanted to enhance the user experience and make signing up easier.

Process

Analysis & visual language

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.

Atomic Design

Design for scale

To make the new website scalable, we developed a design system based on the Atomic Design approach by Brad Frost.

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.

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.

The hierarchy extends to page-level templates. Every page type is designed in a way to meet its purpose. Whether its informing, inspiring or encouraging to take action.

Every page type has its purpose, one of them being encouraging action. And for this page type, we designed specific elements that entice user interaction.

To empower their sustainable ideology, we reused components and made little adjustments to fit them in their context.

To ensure maximum scalability, we made sure the most relevant content blocks have multiple variations depending on the context.

Besides creating a responsive design, we made sure relevant components are designed with adaptivity in mind. For instance, a 'more information' button for the HVC app changes to 'download app' buttons on mobile.

Micro-animations

Function before aesthetics

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.

In this example, we see a micro-animation indicating there is more content under the fold and that clicking this button will scroll you to it.

To meet the minimum requirements of the WCAG 2.0 guidelines, we made some design choices like adjusting the red brand color and creating high contrast with text to increase readability.

Inclusive design

With accessibility in mind

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.

User testing

Design based on user behavior

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.

The outcome

More accessible content

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.

Visit the website

Credits

My role & team

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.

  • The Design Team was helping me during design meetings.
  • Floris de Langen guided me as the Creative Director, and his experience was immensely helpful.
  • Erik Börjesson, Product Designer, stepped in to help me where needed.
  • Harmen Struiksma, UX Designer, kicked off the project doing a fantastic job leading the analysis phase.
  • Boaz Poolman, Front-end Developer, brought the designs to life.
  • Niels de Ruijter, Full Stack Developer, did front-end as well as back-end magic.
  • Nico de Groot, Back-end Developer, implemented the CMS and all sorts of API connections with external parties.
  • Jeroen Schippers, Product Manager, ensured the whole process was structured.
  • Tessa Witte, Product Owner, a fantastic client to work with, was proactively working with us to meet our goals.
  • Karin Buzing, Product Manager, made sure there was a smooth communication between Unc Inc and HVC.
  • And many more people involved.