HVC 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.
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.
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.
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 set up as a multi-site to support easy and visually consistent management of satellite websites.
... 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.
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 corporate identity 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 certification mark shortly.