Story map Creation tool
Story map Creation tool
Story map Creation tool
Designing for communities to tell stories through maps
UX Designer
Problem
Users admire Esri Storymaps and the Mapbox open-source alternative customized by Digital Democracy. However, a major challenge is the technical expertise needed to create and host these story maps. Many landscape members lack advanced technical skills, despite their deep knowledge of their landscapes. They feel uncomfortable with coding and complex technical tasks related to story map creation and maintenance.
Outcome
As the owning UX designer for this functionality, I designed a GUI to create a config file and generate a Storymap!
StoryMap and Terraso were also featured in a June 26, 2025 Cisco Foundation blog post, highlighting their intuitive, offline, map-centric design.
OVERVIEW
About Terraso:
Building a Sustainable Future
Terraso, developed by Tech Matters, is a platform that offers software services and applications to agricultural communities for planning and financing sustainable economies.
Tech Matters is the technology partner in an ambitious global collaboration called 1000 Landscapes for 1 Billion People and provides users with the necessary data and software tools to plan, finance, and track their progress.
Core Partners
Terraso User Mental Map
INFO
Team
Hana Lee, Jose Buitron, Derek Caelin, Myself
My Role
UX Design Intern,
Lead Designer (For this project)
Timeline
1 month
RESEARCH
Understanding the problem space
While some landscapes have a mapping team familiar with ArcGIS, a considerable portion of landscape members lack advanced technical skills.
Although they possess in-depth knowledge about their respective landscapes, they feel uncomfortable when it comes to editing code or performing complex technical tasks associated with creating and maintaining story maps.
Many users express their admiration for Esri Storymaps and the open-source alternative developed by Mapbox and customized by Digital Democracy. However, a significant challenge they face is the lack of technical expertise required to create and host these story maps.
Currently, users must:
-
Determine the latitude and longitude for each point in the story using a helper tool
-
Customize a configuration file for the story they want to tell, setting configuration options for each “chapter”.
-
Host the website somewhere
OPPORTUNITY
PERSONA
Understanding our Users
Our personas Pia and Luis helped us to ensure that our team remained focused on creating user-centered products. By sharing these personas with the team, we were able to keep the user at the forefront of our decision-making process.
Pia is a nonprofit organization product manager and maintains a landscape on Terraso.
USER STORIES
What we uncovered in the user research!
The users may have limited network connectivity and are working with communities to document traditional stories. In an ideal scenario, the users would be able to load content offline and then upload it later when internet access is available.
The users want to collect location data, but do not always have it at hand. Offline-friendly tools for media capture would be highly valuable. They want to capture data directly on a phone, though some of this may involve sensitive data that remains stored only on the device. Tools like Mapeo could support this need for handling sensitive data.
The user also wants to capture geo-referenced videos and photos, but may feel limited by their current equipment. They seek higher-quality audio and images than what their phone provides.
As a creator, I should be able to compose a storymap (defining narrative at a location, and linearly progressing through) that will be visualized in a storymap.
As a creator, I should be able to permit access to this story publicly, so that my community can gain access to the story.
As a creator, I should be able to permit access to this story at the landscape/group level so that my community can gain access to my story.
As a creator, I want to associate my storymap with my group/landscape, so that my group/landscape can curate it for our story.
IDEATION
Building out the Experience
I utilized the user stories to gain a deeper comprehension of Luis's needs and motivations. By listing out the assumptions, potential triggers, and other requirements, I created a workflow diagram that aided in the sketching and iteration of the design.
Luis and Pia are members of Landscape Sierra in Terraso.
Luis wants to tell the story of his landscape to donors. He has a series of stories from around the landscape, each with a location, narrative, and images or movies.
Luis has all the knowledge and content he needs to make a story.
Workflow: Easier story map creation
-
Pia would upload files from own laptop
Key Workflow
Assumption
DESIGN
Building out the Experience
I used the user stories as a basis for creating both low-fidelity and high-fidelity wireframes. Throughout the design process, I conducted frequent testing sessions with all stakeholders. The objective was to find the optimal balance between user needs and project constraints in order to achieve the best possible product outcomes.
Page Flow based on the user workflow
Dashboard
As part of the design process, I conducted a comparative analysis to explore how different tools approach storytelling with maps. I examined applications like Prezi for its ease of use, open-source StoryMap creators such as StoryMap.js and Terra Stories, as well as advanced (but paid) solutions like ESRI StoryMap.
While these tools offered inspiration, I recognized that our primary users were often non-technical community members, so simplicity was critical. This led me to draw inspiration from familiar, low-barrier tools like PowerPoint and Google Slides.
Edit Screen: Create Story Map
DESIGN ITERATION
What we uncovered in our first option of design iteration!
Pros
Cost-efficient: Reuses familiar patterns from Terraso’s existing Data Map Layout, reducing development effort.
Improved clarity: Provides a more straightforward process for setting the background map.
Cons:
Reduced immersion: Storytelling feels less engaging compared to other approaches.
Fragmented flow: Users must move back and forth to create the Intro and Chapters.
Navigation challenge: The small horizontal menu at the top is less discoverable and harder to use.
Home Page: Story map for new users
Draft mode: Set Intro Page
Draft mode: Set Chapter 1 Page
Draft mode: Set background map
Draft mode: Setting Chapter 2 Page
Here, our persona Pia has filled info in all the fields
Preview Mode in Full Screen
Final Design Solution
Share Links feature
You now have the ability to easily upload files or share links with members of your landscape or group.
FINAL DESIGN ITERATION
Why we decided to go with this iteration instead!
The final design of StoryMap reflects that approach—as simple and intuitive as creating a slide deck, but tailored for map-based storytelling.
Draft Mode: Add Chapters
Draft Mode: Add Media to your chapters
Preview Mode in Full Screen
Share Story Map
Prototype of the Final Design Iteration
FINAL THOUGHTS AND TAKEAWAYS
Usability Testing
Users were excited about the new StoryMap feature, and their positive feedback confirmed we were heading in the right direction.
Snippet from the Usability Testing Questionnaire
In Bangalore, Paani Earth faced the challenge of deteriorating rivers and low public awareness, worsened by the lack of an integrated river data system. Using Terraso’s Story Maps, they built an interactive, accessible map that combined data from agencies, studies, and satellites with photos and videos. As cofounder Madhuri Mandava noted, the shift transformed their “very academic” website into a compelling, visual narrative that made people care.
In a case study titled “The Mud That Makes Us”, Damian Fernandes, a senior advisor with Conservation International in Guyana, shared powerful praise for Terraso’s Story Map tool:
“Personally, I think Terraso’s story map tool is a turning point in how we tell stories. Through its accessibility, it offers something deeply transformational for countries like mine… Terraso provides a platform to hold these different stories… and show us the true meaning of our shared Guyanese identity.”