Khichri (WIP)

A web-app that takes a local, visual and story-based approach to communicate the impacts of climate change in Pakistan through a universal medium: food.

climate change communication, UX/UI

 
 

Ambition

Although Pakistan is the fifth-most vulnerable country to the long-term effects of anthropogenic climate change (GermanWatch, 2018), awareness and concern for the issue remain despairingly low in the general public throughout the country (Pew Research Center, 2015). This project explores the potential of an interactive, story-based approach to climate change communication.

Action

Following recommendations of researchers that call for visual, local and contextualized ways of communicating climate change (Stoknes 2015 and Sheppard 2012), and taking cue from a discursive approach to design—design as a means to promote dialog and understanding (Tharp and Tharp 2018), I set out to design an interactive way to communicate the local impacts of climate change in Pakistan using a universal medium: food. I designed a web-app, Khichri, that takes popular Pakistani dishes and presents their future versions to the audience. Taking into account climate change-induced disruptions in the availability and accessibility of ingredients, these future versions of food illustrate disconcerting messages: “Uh-oh, not enough water to grow rice!”, “Sorry, it’s too hot to raise chickens!” Based on data from the Asian Development Bank, these scenarios create engaging stories around scientific projections. Rice, for example, a water intensive crop, is likely to see yield declines in the coming decades, given Pakistan’s rapidly depleting water resources.

Outcome

Currently under development, the web-app has received promising feedback from early test audiences, who appreciated its educational value and indicated that the message made them think about the vulnerability of routine, daily activities to climate change. While Khichri is targeted at a South Asian audience, its message is universal and can be adapted for different contexts.

Roles and skills

 

  • UX design

  • UI design

  • UX writing

  • User testing

The Research

Intitial Research revealed that climate change communication may be to blame for the disparity in Pakistan’s vulnerability and the level of public concern. Environmental experts contend that the predominant ways climate change is communicated—with gloomy tones and distant, in-the-future framings—is ineffective (Stoknes 2015) . There is a rising chorus arguing for new approaches to climate change communication, approaches that leverage visual communication (Sheppard 2012), localize and contextualize the information, and promote dialog and co-creation. (McLoughlin et al. 2018).

To get a closer sense of what urban Pakistanis made of the country’s climate change challenge, I conducted multiple interviews and an online survey. This primary research helped paint a picture of the gaps and opportunities in the way climate change is usually communicated in Pakistan.

Survey responses

 

“Climate Change isn’t part of policy level discussions, hence the response is reactionary, [rather] than precautionary.”

“People and government are not taking climate change as a serious concern.”

“The situation calls for an emergency response and allocation of budgets with an immense need for mass awareness campaigns through visual, print and social media.”

Moreover, to a question that asked about the aspect of climate change they’re most concerned about, only two out of forty-eight respondents chose ‘Food availability and accessibility’, even though climate change-induced threats to food security are a major challenge facing Pakistan. On the other hand, ‘Water scarcity’ and ‘Extreme weather events’ came up as the most frequently selected responses to the question. While these two have disastrous consequences on their own, they also directly threaten agriculture and food production. We realized that by focusing on food as a narrative frame, we could highlight several of climate change impacts, including the ones our survey audience seemed most worried about as well as the other real threats that didn’t seem to be on their radar just now.

Based on these responses and earlier interviews, I created user personas. This was followed by ideation on unique, engaging ways to communicate climate change.

Initial sketch of user flow.

Initial sketch of user flow.

The very first mockup featured a dedicated panel for the controls and custom shaped slider buttons. Users can manipulate the sliders, representing atmospheric heat, water availability and population, to see how increasing or decreasing these elements affects their food. In this version, food ‘disappears’ as you, for example, increase the heat slider or decrease the one for water availability. A fourth slider is meant to be a master control that takes users to specific points in time in the future, for example the year 2030, 2050, etc.

The very first mockup featured a dedicated panel for the controls and custom shaped slider buttons. Users can manipulate the sliders, representing atmospheric heat, water availability and population, to see how increasing or decreasing these elements affects their food. In this version, food ‘disappears’ as you, for example, increase the heat slider or decrease the one for water availability. A fourth slider is meant to be a master control that takes users to specific points in time in the future, for example the year 2030, 2050, etc.

To test out the functionality of the sliders, we made a basic prototype using HTML/CSS and JavaScript. For this prototype, we broke the dish, Biryani, down into three component parts: rice, chicken and raita (yogurt sauce). We then played with JavaScript to display and hide certain ingredients at specific settings of heat, water or population.

To test out the functionality of the sliders, we made a basic prototype using HTML/CSS and JavaScript. For this prototype, we broke the dish, Biryani, down into three component parts: rice, chicken and raita (yogurt sauce). We then played with JavaScript to display and hide certain ingredients at specific settings of heat, water or population.

We soon realized that the disappearing act would only work for a very limited number of dishes, such as Biryani, in which individual ingredients can be seen and taken away. However, for other dishes such as stews and soups we needed a different approach to communicate the impacts of climate change. We also wanted the message to be more sophisticated than “climate change = less food”. Based on this intention, we tested loud, jarring overlays that invaded the beautiful food as climatic conditions worsened. This approach also allowed us more flexibility with development and photography.This iteration also saw the addition of preset levels to the sliders to limit the permutations of situations we would show to the users. I also added a ‘Reset’ button, which changes the dish back to ‘normal’, and a ‘Wild Card’ button, which shows the effects of a random climate-related event, such as a catastrophic locust swarm, something that actually ravaged agriculture in Pakistan in spring 2020. On mobile, I started realizing that it would be a challenge to make the sliders user friendly.

We soon realized that the disappearing act would only work for a very limited number of dishes, such as Biryani, in which individual ingredients can be seen and taken away. However, for other dishes such as stews and soups we needed a different approach to communicate the impacts of climate change. We also wanted the message to be more sophisticated than “climate change = less food”. Based on this intention, we tested loud, jarring overlays that invaded the beautiful food as climatic conditions worsened. This approach also allowed us more flexibility with development and photography.

This iteration also saw the addition of preset levels to the sliders to limit the permutations of situations we would show to the users. I also added a ‘Reset’ button, which changes the dish back to ‘normal’, and a ‘Wild Card’ button, which shows the effects of a random climate-related event, such as a catastrophic locust swarm, something that actually ravaged agriculture in Pakistan in spring 2020. On mobile, I started realizing that it would be a challenge to make the sliders user friendly.

The current iteration saw several major changes. The most drastic is the new, single, time-based slider instead of three controlling individual elements. Two factors influenced this decision: test audiences reported that it was difficult to understand the impact of individual factors such as heat and water; they also indicated that the multiple sliders seemed intimidating. While we (me and the development team) were realizing the usability challenges of working with multiple sliders, we also learned that the technical data we used to create the future versions of food did not necessarily allow us to arrive at conclusions about the effects of individual factors of climate change. Going deeper into the data, we realized that there often wasn’t much (or any) data to determine the impacts of individual factors such as water scarcity or rising heat. Projections are typically made in terms of time periods. We also had to acknowledge that while a rising population means less access to food, population itself is not linked to climate change, at least directly.

In addition to the new slide, there were other changes to the UI: The black panel to the left is gone and the plates are now front and center.

An interactive prototype of the mobile version of the app.

Mobile screens

The current UI brings the plate front and center. UI elements assume a quieter tone, playing a functional, supportive role to the dramatic, colorful hero image.

We are also experimenting with different styles of error messages for different kinds of dishes. The jarring, aggressive shapes and loud RGB colors clash with the soothing pastels of the background and the classy beauty of the food.

In its juxtaposing of warm photography (and food) with cold, hard graphics, the project also critiques the anthropogenic nature of climate change and its ugly impacts on nature.

Previous

Focusmate testing
Next

Focusmate BACKUP