From waste to energy: accelerating the transition together

How do you activate half a million households to work together on a sustainable future?

placeholder

H VC believes in a future in which energy is generated in a clean manner and raw materials are being reused. To lead the way, they are transforming themselves from residual waste incinerator into a sustainable energy company. But HVC cannot do this without the residents they serve. For the next four years, we will, therefore, collaborate with HVC to inform, inspire and mobilize the people to help speed up the transition, starting with a completely redesigned website.

Wat we hebben gedaan

placeholder
placeholder
placeholder
placeholder

A new proposition, a new website

HVC wants to become the leader in the extraction of raw materials and energy from waste. However, their target group hardly knows about HVC's ambitious mission, their efforts to realize it and how one can contribute to a sustainable future. In addition to laying down a technical basis, we therefore first focused on transferring that knowledge. A new visual identity and a greatly improved user experience have been developed to enhance the image and perception of the brand.

placeholder
placeholder
placeholder
placeholder

Inform, inspire and streamline

We kicked off the analysis phase with a joint workshop to determine the online strategy: pinpointing the most important challenges and exploring possible solutions. With regard to consumers, we decided to prioritize the transfer of the new proposition, increase customer satisfaction and thus increase the willingness to take action. A simplified technical structure and user-friendly content management system would consequently enable the communication team to work much more effectively towards these goals.

From corporate identity to visual language

With a focussed online strategy, it was time to work on the visual composition. To make it suitable for digital application, we developed Teldesign’s new brand identity into a design system using the Atomic Design methodology. With the resulting 'library' of visual components such as buttons, color combinations, typography, call-to-action elements, and even entire page templates, we have created a source that internal departments and external suppliers can draw from. The resulting visual language thus supports the new brand identity and creates impressions, perceptions, and incentives for interaction and desired behaviour.

 

placeholder

Visual hierarchy for a clear navigation

The design system is aligned with the new structure that we designed for content and navigation. The homepage naturally got a unique design, but also landing-, overview- and article pages have a recognizable form. It’s how we created overview on pages that help people navigate or give room to content when users are deep-diving into certain topics of interest. Each type of page is thus optimized for its function with the visual hierarchy providing visual support for orientation. To validate all this, we developed and tested prototypes on different target groups based on user scenarios. It enabled us to further optimize the navigation and design based on user behavior.

Functional design with maximum experience

Animations and micro-interactions are often used for aesthetic purposes - for a wow effect. In our design, however, they are mainly functional. A button, for example, which on hover shows an animating arrow indicating there is more content under the 'fold' and that a click will scroll you to it. Or subtle micro-animations that draw attention to the most relevant content on a page. Even on the ‘our story’ page, the sophisticated animations and interactions support the content, rather than compete with it: the quantified impact that HVC makes speaks for itself.

placeholder

A technical basis for the future...

HVC’s organisation is structured around their business units (waste collection & recycling, heat, renewable energy, etc.). Until recently, these often had their own website and tools. To simplify the technical infrastructure, we decided to integrate them into the new platform without compromising the business unit’s autonomy. Drupal 8 proved to be the best content management system for their specific operation as roles and rights can easily be assigned to employees of the individual business units. The CMS is also built as a multi-site to support future websites that are not part of HVC’s core business (think recruitment or campaign sites promoting private investment in wind- or solar farms).

... and a seamless user experience

An important requirement was to increase convenience through simple self-service. Reporting bulky waste, consulting a waste guide to quickly learn how to sort a piece of garbage, knowing when the next collection is scheduled through a waste calendar, signing up for green energy, by bringing these tools together on one platform, we enable users to quickly arrange their affairs. HVC’s content managers can actively support this as they are now able to easily display these tools on the pages where they are most relevant to users.

placeholder

Inclusive design for full accessibility

If all residents, including those with disabilities, should be able to use all functionality, the website must be designed with accessibility in mind. To achieve this, we tested every design choice against the Web Content Accessibility Guidelines (WCAG) 2.1. As a result, we adjusted colors from the new house style for online use in order to increase readability or emphasize clickable components through a bigger contrast. Animations can also be disabled if a visitor has enabled the 'reduce motion' function in his or her browser. The site can even be operated without a mouse for people with motor impairment. All this should lead to HVC acquiring the WCAG 2.1 AA quality mark shortly.

placeholder

Not a client but a partner. Not a project but a process.

Since the spring of 2019, Unc Inc has been the full-service digital agency of HVC for the coming four to seven years. With this first project we are happy to have laid out a solid foundation for this partnership. In the coming period we will focus primarily on further developing the platform, providing digital support for campaigns and developing tools that help residents to better sort their waste.