My role
Lead UX & UI designer
Case
This project involved designing the UX and UI for a website for the Dutch NGO Wanicare, with the ambitious goal of creating the most sustainable website in the Netherlands. Our team achieved this by optimizing the website’s design and functionality to minimize energy consumption at every possible level.
Heuristic Evaluation
In order to pin point some potential user pain point and areas for optimization we evaluated the previous site to get an idea of the websites challenges and also to start a conversation about the websites content and what should/shouldn't be transfere to the new website. The evaluation was based on Nielsens 10 heuristics and the WCAG 2.2 guidelines.
Key finding:
A lot of redundant and repetitive information.
A lot of cross referencing/linking across the site.
Navigation (both global and local) is not consistent across the site.
IA and sitemap
Based on the heuristic evaluation and a workshop with Wanicare, where we discussed the needs, pain points, and content for the new website, we developed a new information architecture (IA) and an updated sitemap to enhance the website's energy efficiency.
By reducing technical complexity and creating a more intuitive navigation, the new structure ensures that users can find the information they need more quickly. This reduces the time users spend on the site, which in turn lowers overall energy consumption and makes the website more sustainable.
The new structure is designed to address Wanicare’s primary objectives for the website's purpose and functionality:
Present Wanicare
Download PDFs with various information
Receive donations
Contact us
Below is the new sitemap which prioritizes a balanced site structure that’s not to shallow and broad to navigate in contrast to the old sitemap.
Below is shown the old site structure, which is very shallow and broad. This results in the user having too many options too early, which might result in an overwhelming navigation experience.
WIREFRAMES & components
Based on the previously mentioned Information Architecture (IA) and a mobile-first approach, we started designing wireframes and a component library with a focus on reusability and scalability. We chose a mobile-first approach because Wanicare’s previous website wasn’t mobile-friendly, and Wanicare highlighted that many of their users visit the website through Instagram. Given this, it was a natural choice to focus on mobile users who are accessing the site from other mobile platforms.
Additionally, reusing components is more energy-efficient. By designing components that can be reused across different parts of the site, we reduce the need to create new elements for every page, which saves both time and resources. This approach not only enhances consistency in design but also minimizes the computational load, resulting in a lighter, more energy-efficient site that performs better on mobile devices.
CVI & UI
For the website’s UI, the focus has been on preserving the essence of Wanicare in the visual design. This is achieved through the use of natural colors, soft edges, and ample white space between the website’s modules, all of which support Wanicare's desire to appear welcoming, open, and down-to-earth to their users.
Additionally, Wanicare's images of the animals are incorporated directly into the design, not only because they are visually appealing but also because they serve as a reminder of why their work is so important. These images create a strong visual connection between users and the animals Wanicare strives to protect, reinforcing the message of their mission.
Overall, the combination of natural colors, soft edges, and beautiful animal imagery creates a user experience that is both inspiring and engaging, clearly communicating Wanicare's goal of preserving and protecting nature.
Final DESIGN
In designing Wanicare’s sustainable website, we focused primarily on reducing energy consumption through various UX optimizations and initiatives. We chose a minimalist design with fewer elements, a standard font, and a darker color palette to enable faster loading and lower energy usage. Images and videos have been optimized and are loaded using lazy loading to save data and energy. Additionally, we designed an efficient and intuitive global navigation that makes it easier for users to find what they’re looking for with fewer clicks, further reducing the website’s energy consumption.
67%
Less energy use than old site.
top 10%
Of the worlds most sustainable websites
nr. 1
Most sustainable website in the Netherlands