IISD Experimental Lakes Area Website Redesign
Sparkjoy Studios had the incredible opportunity to design and build a new website for one of the biggest International Institute of Sustainable Development (IISD) initiatives - the IISD Experimental Lakes Area (ELA).
A Sparkjoy Studios project for IISD Experimental Lakes Area
Client
IISD Experimental Lakes Area (ELA)
Credits
Design and Project Management: Janani Ramesh and David Montie
Developers: Joshua Arlitt, Mike Mcnally, Gabriela Arriola and Suyeong Gong
IISD-ELA Team: Sumeep Bath and Ryan Woo
Tools
Coggle and Figma
CONTEXT
Opportunity Space
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.
We were 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.
BRAINSTORMING
Client interviews and Requirements
During the discovery phase, David and I met with the six key stakeholder groups within the ELA to understand their particular vision for the website. These groups included the Data, Science, Education & Outreach, Operations, Giving, and Communications teams.
With their help, we were able to gather key information on their current frustrations and future goals for the website, as well as learn more about their interactions with the users who visit those sections of the website. Here is a summary from our interviews with 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.
-
USERS
Personas
From the conducted interviews, we were able to identify the 5 main user personas who would visit the website. These were Researchers, Educators & Students, Community members, Donors, and Media groups.
We wanted to learn about each user type’s goals, challenges, and preferences, but we could not interview actual users due to project constraints. Instead, we relied on our clients' insights from their current website data. For each persona, we noted down what they look for, what they are finding difficult to do on the current site, and what the ELA can offer them through the new website.
CONTENT
Website Architecture
The website architecture begins with as a highly collaborative phase so that we can draw a lot of information from our clients to understand the different content on their website. I began with a sitemap of their current site, and then we worked together to add and remove certain parts. The clients strongly indicated that users could not easily find the relevant information for their needs. We therefore set out to take a fresh look at the navigation and the general structure of the website.
We used coggle.it, an online tool for creating and sharing mind maps, to design the site architecture for our project. We invited our clients to join us on a zoom meeting where we could collaborate and get their feedback in real time.
After several meetings, we created a sitemap that consisted of two navigation bars. The top navigation bar would link to pages that provided general information about the ELA and visiting the site. The second navigation bar would target specific user types and direct them to landing pages that are dedicated to their goals. These landing pages would then have child pages relating to that user's goals/needs.
The Coggle mindmap below shows the structure and layout of the website we created together:
ORGANIZATION
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
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.
DESIGN
Designing an exciting new look for the website
The style guide was used as a basis to custom-build new templates. A new feature I designed was the addition of flexible content blocks that the ELA staff could use to build a custom page layout. The custom blocks included structures like a fullwidth block, fifty-fifty block, two thirds block, testimonial block, and more. These blocks could be rearranged in any order on any page, giving the ELA staff a lot more control over the layout of their pages.
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 (left) versus new website homepage (right) designs:
Here you can see a comparison between the old/current website and the new site I designed.
The ELA team wanted the new site to have an improved navigation as well as more content leading into different parts of the website. The new design has a video at the top, CTAs to multiple landing pages on the site, a slider of news and events, ways to navigate the site's content through research themes, a testimonial section that changes every time the page is reloaded, and more of the beautiful imagery that the ELA team provided.
We also redesigned the footer to include the full sitemap so that users can view what content relates to their needs and navigate the website easily from any page.
WAYS TO FIND CONTENT
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.
REVIEW
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.