From waste to energy: accelerating the transition together.
How do you activate half a million households to work together on a sustainable future?
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 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.
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.0. 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 the goal to acquire the WCAG 2.0 quality mark.