EIA Africa Geo-Portals
2022—2024
Freelance work for NGO EIA International.#Product Design
#mapbox
#Design Systems
Role
Lead UI/UX Designer
s. 01
Intro
Working together with the environmental NGO Environmental Investigation Agency I designed a system to track deforestation as it moves through each step of the supply chain. Beginning with the allotting and surveying of land by the government and ending with its departure from one of the country’s ports, we use a series of registration touchpoints on the ground to display the details of each individual tree on its journey in an effort to reduce illegal logging. We started with Gabon, then moved to Liberia once political will existed for us to begin work. The system we created is easily recreatable in other countries with few customizations provided we can find a similar data set.
The end solution involved multiple parts. First a simple phone app to be used on the ground for real time data registration at logging sites. Second the map heavy geo-portal (my main contribution) used by both the public and government official. The geo-portal was aimed in large part at the public, whose contributions and honesty in the field were what provided us with data and alerts when illegal activity was suspected. Third, the data heavy table based web app used by gov. officials that displays the same data in a more robust format.
s. 02
Problem overview
Gabon and Liberia faced the same problem most African countries faced when it comes to their natural resources. a lack of efficient and reliable systems to track resources leads to a complete lack of accountability. It’s simply too easy to game the system and lie which leads to the constant illegal extraction of resources without pay.s. 03
Solution overview
There were multiple touch points in the journey of a log from start to finish. If we could get officials in the field to record this data accurately using our mobile app we could summarize and display it using the geo data in a map based web application. Thankfully, we didn’t have to start 100% from scratch as a previous effort already existed, however its lack of usability and general impracticality led to low adoption and interest. It was time for a refresh.s. 04
3 part system to collect, display, and anlazye the data
1 Mobile App
Used by officials in the field to register crops and shipments.Mobile app for the collection of timber data and the registering of suspicious activity.
Eliminates the error prone paper system in place currently and cuts down on illegal activity by accurately tracking supply.
For use by: Government officials and local communities
2 Geo-portal
Track and visualize the movments of timber from a desktop.
Desktop web app to display the collected data, view transport paths, and track shipments across the country from felling to export.
View statistics and trends, permit details, processing and export sites. A wholistic geographical picture of the state of the industry.
Mapbox used as the base map for plotting points.
For use by both the public and the government.
3 web app
Legacy application combining heavier data with a reduced map area.
Desktop web app best suited for heavy data display, tables and permits. Integrate this already existing app with the other two layers.
Intended for government use only.
s. 05
Understanding the supply chain
In order to plan our solution we needed to understand each step in the lifecycle of a tree, from discovery to export as processed wood. We found there were many touchpoints we could use to gather data that could then be tracked and displayed. The info we gained in this phase would be directly extended to the interface as we give users the ability to visualize the lifecycle of a single tree; a kind of granularity that was unimaginable even ten years ago.» Land surveyed by the government.Land surveyed by the government.
» Every 5 years the government allots exploitable plots of land to companies
» On the first day of exploitation period companies begin harvesting their lot
» Trees are marked as either Unmarked, Marked, Felled by government supervisors in the lot. This is usually done on paper and is extremely error prone.
» As trees are harvested their status is changed. In order to be moved from their original location to the other side of the lot a Transport Permit must be issued.
» When the tree is ready to leave the lot it will be moved to a Processing Site. Another Transport Permit is required to officiate this move.
» Along the route the driver will be faced with multiple government checkpoints that will verify the existence and legitimacy of the Transport Permit.
» When the logs arrive at the Processing Site a record is made.
» If/when a log is processed inside a Processing Site a record is made of this change.
» Logs and processed wood is recorded again when it leaves the Processing Site.
» Another Transport Permit is issued when the logs are sent either to a private buyer or to a port for exporting.
» A record is made when the logs arrive at the port.
» The final record is a confirmation of export including details like buyer, importing country, and shipping company.
s. 06
design review, design overview
I worked with EIA on and off for two years on the design of both geo-portals, first for Gabon, then for LIberia. The challenges we overcame in the first portal lent themselves well to the second, and we were able to re-use a lot of the patterns and behavior. Pictured below are screens from the Liberia portal, the only real difference between the two lies in the amount/type of data being displayed in accordance with the idiosyncratic bureaucratic necessities of each country, and the underlying map which of course shows each respective country.s. 07
UI Overview
2 Primary Components, then 3 more to augment the experience
01 Focus Card
The data view area or “focus card” is a flexible space serving two primary purposes. 1 is to allow for control of what is and is not visible on the map. 2 is to provide a space for displaying data when a user selects a point on the map. The card collapses fully for times when the focus truly is just on the map. In those cases the hover treatments and the dynamic legend are increasingly useful.
02 Map Area
The map is the main focus, any additional UI elements are there to augment that experience and facilitate certain outcomes. We used Mapbox for our base layer, keeping customizations pretty minimal on the map itself. A simple base map can hold more data layers further along.
Users interact with the map panning, pinching, and zooming as you would expect with any digital map. As layers are turned on they appear in their respective geo-points or polygons and can then be interacted with. The visible data will in many cases shift based on your zoom level, revealing more accurate individual points when zoomed further in, while clustering or aggregating points to save space when viewing the country at a whole. Throughout the experiences we tried to maintain a consistent and useful hover treatment, with the idea that pointing is always the most direct way of alleviating confusions in complex interfaces, especially in our case with many overlapping layers that aren’t always clear.
03 Admin
This space is reserved for handling navigation within the focus card. It’s a complicated task fitting multiple pages worth of controls and information into a small side navigation, the solution here has the tabs stacking as the layout continues to grow. In addition to navigation things like user management and log in, and access to search are handled in this space.
04 Legend
The dynamic legend is our attempt to avoid cluttered, unintelligible overlap of layers on the map, especially in the Gabon portal. Layers can quickly be toggled off and back on from here, which is particularly helpful when zoomed in or with the focus card is taken over by a user-selected data point on the map, displaying its data.
05 Mini-Map
The mini map appears beyond certain zoom levels to help users orient themselves within the larger country. A quick click or drag within the window allows you to move your current viewport position to that area. Zoom percentages are displayed to enforce a kind of familiarity with what data is seen at what zoom level.
s. 08
dynamic “focus Card” variably shows content based on selections
The interface is broken down to two key sections, the map area and the “Focus Card” area, which is the collapsible navigational card on the left of the screen. This card offers a space to act as both a mission control toggling layer visibility on the map, and a space to view the data behind geo-points as they are selected on the map. By default users land on the layer controls, filters, and statistics that control the map data. Upon selecting any point, polygon, permit, export point, government checkpoint, or other data type on the map the Focus Card is over-taken by the data fields linked to that entity. This makes for a flexible space that remains an omnipresent navigational pattern throughout the experience. More complex things like statistics and tables can be viewed here, but at the time of writing the “Web App” outlined in the intro is much better suited to handle large tables. We considered a navigational card with multiple widths, starting from collapsed, to half, to full width that would allow for all scenarios but in an effort to prioritize what was most important for MVP and to keep the app lightweight we decided not to go that route. s. 07
Interface features and value adds
Improved clustering and zoom level distribution of elements on map helps users see large groups of data without overwhelming.
Ability to precisely search all data types allows for much more to be done on the geo-portal.
Ability to filter geo-data shown on the map allows users to hone their search when they don’t know the precise details.
Improved display of data like tables and permits facilitates a better experience. The old experience was clunky and unorganized.
Visualize permit path
See the life-cycle of permits, shipments, and individual trees visualized on the map for you with the latest data.
Taking advantage of detailed hover treatments on the map surface takes the burden off of other data display areas like the side panel.
View aggregated data through area statistics, which can then be filtered using the same filters controlling the geo-data on the map.
An added mini-map appears to help orient users when zoomed in past a certain percentage. Easily reset your zoom level or pan within your current one.
A dynamic legend updates to show active layers and allow for things to be easily turned on and off.
A big part of the initiative is to remunerate communities for the wood taken from their land. With this feature community leaders can monitor in real time the amounts due and compare with amounts paid. Transparency into the company exploiting the land allows for a realistic sense of accountability.
s. 08
design system and component library
Components were documented and standardized with variants and variables to be easily picked up by another designer in the future if need be. The system was then linked to be easily applied to new pages.
s. 09
CLosing thoughts
At the end of our last contract we had gotten well into development, with proofs of concepts for all major features usind dummy data where we couldn’t yet access real data. This was by far the most challenging project I’ve taken on, not least for the fact that I was working the design solo. As is the case with most NGO initiatives the funding came and went according to donor budgets, so as a team we found ourselves starting and stopping at the whims of the market. The technologies used in this effort are just one of many pieces, with things like political will and public interest being paramount to the success of the overall initiative. From a technology and design perspective we set things up for success, but it remains to be seen whether it will be a long lasting initiative. We waited years for the political situation to turn in Liberia and overnight, it did, giving us a window to start working on their system. That gives an idea of the level of political turmoil we were facing.It was a particular challenge working with the Gabonese team to get the information we needed. In fact, pretty much the only way was to go on-site and get in the forest with the users, something I was unable to do but which other internal EIA employees did multiple times. Working remote with the African teams was difficult due to at times poor connection, at times a general infamiliarity with the process we were going through. Unfortunately we were unable to do the kind of testing we would have liked (or at least I wasn’t) and had to assume the best we could in some cases. The project remains ongoing and I plan to re-join the effort in late 2024 to expand what we’ve done to the web-app and further build out the portal.
Next Case study
Discount Tire
Toyota North America
Nomenclature typography
Discount Tire
New York State D.O.H.
Shell Polymers
Alex Sweet
Available for full time + Freelance© 2024 All work created and owned by Alex Sweet
Typography Site