The Economics of Climate Change
Website Companion to an Explorable Explainer
Summary
To accompany our Explorable Explainer on the effects of Climate Policy on the Economy, we designed a website to inform, motivate, and inspire on issues of Climate Policy, Effects, Research, and Activism.
Our process began with Primary Research into climate reporting, research, and community organizing. After gathering a representative sample of news articles, journal articles, activism resources, and donation guides, we Cardsorted and found intuitive categories.
We then created a Message Architecture and Content Strategy to solidify the tone and design norms for the site. We decided our website needed to be authoritative, engaging, and approachable as a site that was grounded in research but interested in arming the public to effectively advocate for complex issues.
After generating an initial site, we ran usability tests to polish our interaction and refine visual clarity. The final site is a comprehensive resource for anyone interested in educating themselves about the issues surrounding our Climate Crisis and what they can do to help.
Primary Research
Resource Compilation
Our initial resource compilation was designed to gather a representative sample of information for our cardsorts. We found news articles, including informational essays about issues related to climate change and reporting on specific challenges or consequences of Climate Change. In addition, we found journal articles about the economics of climate change, data visualizations, organizing resources, and strategies for effective donations.
Cardsorting
After we compiled our resources, our objective was to understand how users would organize and understand that data. The process for doing so was a cardsort in which we gave users around 40 cards, all consisting of different descriptions of sources. They would then organize the cards in a way that made most sense to them. To ensure we had sufficient data, we ran two cardsorts. For the first cardsort was a group of three, with two females and one male, in order to get a wider breadth of opinions on what the mental model should look like. We found that people grouped information based on article topic, then article type.
In our second cardsort, we aimed to clarify the distinction further: based on topic, how did people break down the information in the main topic. The next cardsort was ran with one person (male), in order to get a clear and single voice. We found that he grouped information based on smaller ideas (like “Bad Environmental News” or “Money/Charity/Funding”), at which point I asked him to group the categories he made into larger categories. He divided them into the following three categories: Activism, Effects of Climate Change, and News.
These three categories would end up serving as the basis for what our websites organization would look like in the categories of Activism, News, and Research.
For Additional Resources, See Appendix A
Sitemap
We took the findings of the two cardsorts to develop the following sitemap:
We decided to create a rigid hierarchy of pages that all stemmed from the Home Page. The main pages:
- News
- Research
- Activism
reflect the three categories generated from the second cardsort.
Within the Research page, we would display, to our users, academic journals that dealt with the intersection between: (1) government policy, (2) the environment, and (3) the economy. Another finding from the cardsort was that research topics tended to be grouped based on what was the primary purpose of the policy: was it meant to be an environmental measure that had consequences for the economy? Or was it primarily an economic measure that had consequences for the environment?
This led to our decision to separate research into two categories, based on the main purpose of the government policy. Additionally, the first cardsort inspired the idea to divide research on the basis of medium type (video, image, text, etc.). However, this would be later discarded due to all of our research articles being in the form of academic journals,
The Activism page would serve two primary purposes: (1) giving users resources for getting directly involved with environmental activism and (2) giving users the ability to donate to several different organizations advocating for environmental policy.
Developing this sitemap served as a guide as we moved forward to create an initial version of our website.
Message Architecture and Content Strategy
Our Message Architecture focuses on Research, Community, and Action. To deliver on these themes, we decided our website needed to be a mixture of News Articles and Reporting, Journal Articles, Summaries, and Data Visualizations, and Donation and Activism Resources. This mixture of sources would allow users from a variety of perspectives and information backgrounds to find resources that were approachable and engaging. We also hoped that by showing our Explorable Explainer and some featured articles first that users would be led into exploring research or donation options they otherwise wouldn’t have explored.
For Original Message Architecture Please See Appendix B
Visual Style
To reflect our values articulated in the Message Architecture, we needed a visual style that was trustworthy, intelligent, and contemporary, but most of all it needed to be readable. Taking a cue from policy and news sites we browsed, we tried to use strong but not aggressive colors and type — it needed to be bold and eye-catching without being too flashy or prioritizing spectacle over readability.
To situate ourselves as a news-like source, but ultimately not a website like the New York Times or IRENA, we decided on a combination of Franklin Gothic, which delivers a classic and bold news look, with Lato Light, which adds a contemporary and elegant touch. Merriweather Sans is a highly readible paragraph font, although there is not much paragraph-style text on our site as most long-form content are linked articles and journal articles.
Our colors are a mostly blue palette with a green accent. We knew that drawing inspiration from policy websites like IRENA would help the site read as a well-founded informational source, and so we chose a more restrained color palette that fit our brand and message architecture better than a high-contrast, neon color scheme. Our warm white and dark blue/black colors bring a bit of life into the simple scheme and also draw the site away from looking like a newspaper with stark white/black contrasts.
Website Design
Home
Our website design started with the homepage. We wanted to draw users in, clearly communicate our brand, and provide roads to other areas of the site. We include a brief description of the website, featured articles, and our Explorable Explainer to excite interest in the other pages. Because our initial Explainer was already in a Medium Article, we decided to only take the Interactive Section as our purpose in this website was not to educate on the rhetorical features of the economy/environment dichotomy but simply the facts of the issue. Prominent in the design is the call to action buttons in the form of a “Find a Charity” button, where users can learn how to support reputable organizations financially.
News
Our news page is a simple but effective scheme designed to allow users to easily browse for an article which excites their interest. Headlines and rich photos allow users to quickly glance over the content to find an article they would enjoy reading. In this section is a range of articles, resources, and data visualizations designed to engage users enough that they might be interested in exploring journal articles or activism strategies.
Research
The layout for the Research landing page is as follows:
- A page title that says “Research” at the very top
- A call to action to read academic journals about environmental and economic policies in order to develop a richer understanding than can be offered in only news.
- Two clickable sections that lead to policy articles sorted based on their main purpose: environmental or economic.
When clicked, the two sections lead to similarly formatted subpages that contain a set of academic article introductions. Each introduction contains an article’s:
- Title
- Date
- Author(s)
- Keywords
In this way, the subject matter of the article is highlighted and the user can decide whether or not to continue further, without overwhelming the user with numerous full articles. When an article title is clicked, it launches the complete article in a new window.
Activism & Action
Our Activism and Action page aimed to give users information about both avenues of creating environmental change: activism and donation. The webpage was divided into the aforementioned sections above, following a model of explaining what the section was about, some exciting and key sources the user could refer to, and additional resources if they wanted more. In the activism section, a box slideshow is used to show potential resources since users can see each option one by one, limiting noise while still leaving exploration open, whereas donation’s “interesting” section utilized hover boxes so users could see the title for the box and only needed to hover over the box pertaining to the issue they would want to donate to. The anchors on the right hand side provide easy webpage maneuverability for users.
Our Final Website is Available Here
Usability Testing
We tested the website with four users. Overall, they felt that the website conveyed an authoritative, informative, and relatively neutral position as a source and enjoyed using the Explorable Explainer.
Usability Testing did allow us to catch some simple visual clarity bugs, however. We found a few instances where text alignment or hierarchy was confusing for users, as well as inconsistency with font color across pages. Prior to user testing, the environmental and economic policy pages followed a double column layout, similar to the News Pages and resources found on the Activism & Action page. However, a user noted that the longer title lengths cluttered the page with text — thus, the layout was changed to a single column format in an attempt to space out more each article from its neighbor. Furthermore, we simplified the “Donate now” button to “Find a Charity” since users were confused as to who the donations were going to.
Overall our user tests allowed us to polish our layout and visual clarity while they affirmed our brand and style decisions.
Conclusion
We created an authoritative, engaging, and approachable website as an informational companion to our Explorable Explainer. Through our Message Architecture, Cardsort, Style Determination, and Sitemap we were able to create a website which felt trustworthy, engaging, and rich with resources.
We hope to leverage the work we’ve done here for future work, including making a game targeted at engaging users more directly with the issues surrounding environmental economics and political rhetoric.
Appendix
Appendix A
Appendix B
