GreenZone

GreenZone: Accessible Data to Protect Mongolian Rangelands

Role

Product Designer

Timeline

Fall 2024 semester (3 months)

Team

1 Product Manager, 1 Technical Lead, 5 Developers, 2 Designers

SKILLS/TOOLS

Figma/Figjam, Interaction Design, User Testing, Data Visualization, Visual Design

CONTEXT

Uninformed rangeland decisions negatively impact Mongolia’s economy and people

Mongolia’s rangelands are one of the last in the world and support more than 300k nomadic herders and 71 million livestock. The rangelands span the nation's 21 provinces (aimags) and 300+ counties (soums). This resource is integral to maintaining the traditional nomadic lifestyle of its herders and the stability of Mongolia’s economy.

However, the rangelands are experiencing major degradation, shown in the cycle below:

Rangeland degradation leads to Mongolian economic instability

Knowledge of where the next major degradation will occur is crucial to making informed lifestyle and preventative decisions in a timely fashion.

With better understanding of land health, herders, policymakers, and risk analysts can prevent overexploitation and promote economic stability.

SOLUTION

An interactive web app improving access to rangeland health data

Currently, rangeland monitoring data is published in PDFs on government websites. However, the PDFs are hard to find and difficult to read.

Our client, GreenZone, a data analytics team aiming to combat Mongolian rangeland degradation caused by overgrazing and climate change, came to us to facilitate rangeland health understanding in herders and policymakers by creating an easily accessible data visualization platform.

See a sneak peek at our solution below:

RESEARCH

Herders, risk analysts, and policymakers don't have the proper information to address degradation

Our three main user groups are:

Herders

Risk Analysts

Policymakers

It was very difficult to conduct user interviews with Mongolian herders due to time constraints and logistical issues. Therefore, we spoke with three experts, two Mongolian rangeland data scientists and one Mongolian legislator who had conducted extensive research speaking with herders in the past year.

From these interviews, we gained important insights of the complexity of the problem, and how we can help:

Data visualizations are integral to preserving nomadic lifestyle

Almost all of the herders the legislator spoke with desired a tool to visualize their land’s health to prepare for winter and protect their way of life.

Ineffective policy from lack of understanding

Legislators and NGOs don’t fully understand the issues herders face and how the degradation impacts their lives, causing ineffective and confusing policies.

Rangeland data is inaccessible

Currently, rangeland data is difficult to access, buried deep in government websites. All users desired greater access to the information to inform their decisions.

Herders want to use technology to inform their decisions

Mongolia boasts a ~99% literacy rate; citizens and herders alike use technology regularly. However, herders expressed wanting to make more informed rangeland decisions using science and technology tools.

Competitors leverage clear visualizations, but struggle with accessibility

We analyzed four other land health map applications shown below:

Strengths and weaknesses of competitor platforms

EXPLORATION

Structuring the map and a new website

GreenZone wanted us to design both a web app and a website, as well as implement a sign in feature for the web app map:

Information architecture for GreenZone's website and map monitoring platform

Experimenting with key screen sketches

Our sketches helped us quickly conceptualize how we can put the information from our architecture together into a functional map and website:

Low fidelity sketches during our brainstorming

REFINING

Orienting the sidebar for familiarity

One of the first decisions we had to make was the orientation of the data control panel. Our competitors exhibited both a vertical and horizontal sidebar; we explored them below:

Iterations for the control panel orientation

We ended up choosing Option A for:

greater familiarity (especially for Mongolian herders who typically use Facebook)
easier to follow control actions top-down
better space optimization

Identifying optimal data layer controls

Controls for the visualization

Initially, we were designing the web app to display the two data layers to be displayed at the same time. I explored the control panel layout:

Initial layer control panel iterations

I really liked Option B because the tags had the largest tappable area whilst having a simple selection process.

A change in controls: designing for mutual exclusivity

However, after presenting these designs to the clients, they clarified that the layers should not be able to be visualized at the same time. We went back to the drawing board and redesigned the sidebar layer controls:

Mutually exclusive layer control panel iterations

We pursued Option A because it:

most clearly showed only one data layer could be chosen
most cleanly fit into the other actions in the sidebar

Implementing layer controls with a collapsed sidebar

I also determined we only wanted one sidebar panel present at all times, preventing overcrowding of the map.

Upon deciding that each aimag and soum’s data should be a sidebar instead of a pop-up due to quantity of content, I explored how to make the data controls accessible when the panel is collapsed or replaced with aimag / soum data. I explored tags to keep visual consistency:

Iterations for the top control panel

I decided to move forward with Option B because it was most functional and clear.

Translating to mobile

Due to a miscommunication with our PM, we didn’t realize we had to design mobile screens for the web app as well as desktop. I quickly made some mid fidelity screens:

Converting the desktop control panel to mobile

Some changes we made:

closable and reopenable control popup rather than a sidebar
all actions on the right side for ease of maneuvering with a finger
adjusted the year slider to be just a dropdown to avoid precision issues

Converting the desktop aimag and soum data panel to mobile

Some changes we made:

aimag and soum data is now a panel that can be pulled up for greater visibility
we chose to not display the control tags because mobile has the data layer popup to edit the visualization

USER TESTING

Differentiating identically named soums

When we conducted mid-fidelity user testing, we learned from users that there are many soums within the 21 provinces of Mongolia, and sometimes, they share the same names. I explored ways to best differentiate soums with the same name from each other in the search bar:

Iterations to improve searching for a soum

I proceeded with Option B because it required the least amount of cognitive effort whilst clearly labeling soums with their aimag.

Ensuring accessibility

To ensure our platform would be accessible to those with visual impairments, we ensured our colors are WCAG compliant and our tags do not solely rely on color to communicate function.

Accessible colors for the visualization and Greenzone's branding

Clarifying the "switch to" icon via labeling

After completing our high-fidelity prototype, I conducted a usability test on five users. All exhibited confusion of the “switch” button on the top control panel. Users thought that the layer it would switch to was the layer being shown. I made a slight but important change:

Adding clearer language to the top control panel

After we changed the language, we conducted another user testing session and there was no visible or audible confusion from users regarding the switch button.

FINAL PROTOTYPE

Data with the potential to transform a community on the other side of the world

Visualization data controls

Aimag and soum data view

Searching for an aimag

Launching platform and signing up

REFLECTION

My takeaways, all mapped out

Balancing client wants and user needs

There were a few instances where GreenZone desired a change to our designs that caused usability issues. While we are creating a product for our clients, my job as a designer is to advocate for the user, to ensure the product we create for our client is as well-designed as possible.

Always confirm your designs

This was my first client-facing project where I was able to conduct multiple rounds of user testing, and it highlighted flaws in our design I hadn’t noticed. This further confirmed to me the importance of confirming your design choices with usability evidence and data.

Embrace changes as they come

Throughout the process, we had faced unexpected changes in the scope of our project, from data layer logic to having to create mobile screens at the end of the mid-fidelity stage. While each change posed hefty challenges, I am happy to have grown my design skills from each obstacle.