IISD Experimental Lakes Area Website Redesign
My design of a new website for one of the biggest International Institute of Sustainable Development (IISD) initiative - the IISD Experimental Lakes Area (ELA).
Overview
The IISD-ELA is the world’s largest freshwater research facility and is an exceptional natural laboratory comprised of 58 small lakes set aside for scientific research.
As part of my work at Sparkjoy Studios, I was delighted to work with the parent organization, IISD, to create a new website for the ELA that highlights the different research areas and scientific activities at this facility.
The IISD-ELA wanted to update their website to make their work more visible and engaging, with a user-friendly design and navigation. They also wanted to align their branding with the IISD main site, while maintaining a distinctive identity for themselves.
The Design Process
Working within a design and development agency, our project's process was heavily influenced by the client's budget. To meet our client's needs while ensuring the importance of UX research, we adopted the following approach:
Client interviews and defining user types
During the discovery phase, we engaged with six key stakeholder groups within the ELA: Data, Science, Education & Outreach, Operations, Giving, and Communications. Our goal was to understand their specific visions for the website.
Through these discussions, we gathered valuable insights into their current frustrations, future goals, and interactions with users visiting their respective sections. This comprehensive understanding informed our approach to designing a website that meets the diverse needs of all stakeholder groups. Below is a summary of our findings from each group.
-
The main user types looking for scientific information on the website will be researchers, students, or recent graduates.
-
The team wants to make sure that researchers are aware of the different types of data they can receive from the ELA.
-
They would like a way for the researchers to contact the ELA team easily to access the data.
-
The Science and Data teams want to showcase the history of the ELA. This also includes the different ways research is done, data is collected, and how research and data come together.
-
The Data team wants to make sure that we separate past famous experiments from what projects the scientists are currently working on.
-
Long-term data collection, trend analysis, and project-driven research are also incredibly important to these two teams.
-
-
The main user types looking for Educational information on the website will be teachers, students and researchers.
-
The users looking for Outreach content would be the general public such as visitors to the site, or those who want to know how the ELA works with their communities.
-
We will need to create a separate section on the website for Educators & Students, and the Community.
-
Public: Show what the ELA has to offer to the general public, such as community presentations, artist residencies, etc.
-
Alumni: Create ways for Alumni to contribute to the ELA.
-
Indigenous Communities: Inform the public on how the ELA builds meaningful, long-lasting and deep relationships with the indigenous communities.
-
Educators: Highlight the educational work the ELA does, such as school presentations, tours for students that could be day trips or over night stays.
-
Students: Highlight the new courses for students. Provide students with educational resources and work opportunities.
-
-
The main user types looking for operational information on the website will be students, researchers and recreational visitors.
-
The operations team wants to make sure that these users can find any information about visiting the site.
-
The team wants to showcase information relating to new investments, four season access to the site, experiential learning and eco tourism.
-
They focus on educating the visitors on how to access the site, the facilities available on the site, and provide information on the main research lakes.
-
A new key piece the Operations team wants to include is a timeline of the impact that IISD-ELA has had on policies relating to freshwater preservation.
-
-
The main user types looking for information on how to give to the ELA will be the general public, but more specifically donors and sponsors.
-
Provide a way for donors to give to the ELA in different ways, for example with a one-time donation, or through monthly donations.
-
Provide a way for people to understand the ELA initiatives and campaigns to help raise money for certain aspects of the site.
-
Highlight all the supporters who have made an impact on the ELA.
-
-
The main user types looking for information on communications will be the media groups such as media journalists.
-
Give media journalists a way to contact the ELA or find images and videos of the ELA through the website.
-
Give the public a way to read all the latest external media where the ELA was mentioned. This may include news articles or media releases.
-
Website architecture
The website architecture phase began with extensive collaboration to gather detailed information from our clients about their site content. I started by mapping out the existing site structure and then worked closely with the clients to refine it, adding and removing elements based on their input. The clients highlighted a major issue: users struggled to find relevant information easily. To address this, we re-evaluated the website's navigation and overall structure.
We utilized Coggle.it, an online mind mapping tool, to design the site architecture collaboratively. During Zoom meetings, we engaged with our clients to gather real-time feedback and ensure their needs were met.
After several sessions, we developed a sitemap featuring two navigation bars. The top navigation bar links to general information about ELA and site visits, while the second navigation bar is tailored to specific user types, directing them to dedicated landing pages. These landing pages then branch into child pages focused on the users' specific goals and needs.
The mindmap above shows the structure and layout of the website we created together.
Custom Post Types and Taxonomies
At Sparkjoy Studios, we use WordPress as a CMS so that our clients can easily manage their own websites after handoff. Custom post types and taxonomies are two features of WordPress that allow you to create and organize different types of content on your website.
A custom post type (CPT) is a way to define a new type of content that is not included in the default WordPress post types. For the ELA, we created 16 unique CPTs to organize different types of content. Some of these included Research Projects, Metadata, Educational Resources, etc.
Each CPT then had taxonomies associated with them. A taxonomy is a way to group and classify your custom post types or the default post types. For example, the Event CPT would have different event types as taxonomies, such as webinars, in-person events, and Indigenous events. Or, the Educational Resources CPT might have Indigenous resources, educational videos, and curriculum content packages as taxonomies. These taxonomies would be used on the frontend as filters for the content.
The addition of the custom post types and taxonomies greatly help the ELA staff manage their content by giving them more flexibility and control over how they create, display, and organize their content.
Style Guide Considerations
One of my roles as a designer for the ELA was to create a style guide that showcases its distinctive identity within the IISD framework. I followed the IISD style guide for the typography, colours, and navigation menu, but I also added some elements that reflect the ELA's focus on freshwater research.
For example, I used gradient backgrounds with shades of dark blue and green that evoke the underwater environment. I also added a subtle wave animation under active menu items on the navigation bar to enhance the user experience and relate back to the freshwater theme.
Building interactive methods of finding content using maps
We wanted to highlight new ways of finding content on the website through more interactive means. Therefore, we came up with the idea to have two interactive maps, one map to show the lakes of the ELA and what research is done on them, and another to show the facilities available on site. Both maps start off with a view of all the pins and a list on the left. When a pin or a list item is clicked, the map zooms into the pin and information on the pin replaces the list.
Designing an exciting new look for the website
Using the style guide as a foundation, I designed new templates to enhance flexibility and user control. A key feature I designed was the introduction of flexible content blocks, allowing ELA staff to easily create custom page layouts. These blocks included a variety of structures, such as full-width blocks, fifty-fifty blocks, two-thirds blocks, and testimonial blocks, among others.
This modular approach empowered ELA staff to dynamically rearrange and customize content on any page, ensuring a more intuitive and adaptable user experience. By providing this level of flexibility, we enabled staff to tailor the website to better meet the diverse needs of their users, improving both functionality and engagement.
Sample mockups of different pages:
After getting the wireframes approved, I proceeded to create more detailed mockups of desktop and mobile screens. I used the custom block designs to mock up various pages. I delivered over 25 high-fidelity mockups of different pages to the client.
Old website homepage versus the new homepage designs
On the ELA project, I enhanced navigation and enriched content flow throughout the website. The redesigned site features a prominent video header, strategic CTAs directing to key landing pages, a dynamic news and events slider, thematic navigation for research areas, and a rotating testimonial section. Additionally, I integrated more of ELA's stunning imagery.
Furthermore, I revamped the footer to include a comprehensive sitemap, ensuring users can easily explore relevant content from any page.
Project Reflection
I had a wonderful experience working with the IISD-ELA team on their website redesign project. As a designer who is passionate about merging design and science, I enjoyed collaborating with them to create a website that went beyond their needs and expectations.
The ELA team was impressed by the improved aesthetics and functionality of the new website, especially the enhanced custom block system that gave them more control and flexibility over their pages. They also appreciated how I organized their content and navigation system to make it more user-friendly and accessible. Moreover, the IISD team was pleased that the ELA site followed the IISD standards and showcased their professional identity.
Thank you so much for reading this case study.
