2024 - 2025 // 8 mins read // 12 more mins. to dig deep
Waves of Erosion
Research . Data Visualization . Scrolly-telling . Information Design .
Web Development . Coastal Erosion .
Figma . Photoshop . Google Earth Pro .
Webflow . InDesign .
Design Thesis at IIT Hyderabad
This project aims to communicate the phenomenon of coastal erosion through the story of Satabhaya, Odisha,
via a web-based interactive visual data narrative using a journalistic approach to make it accessible to a broader audience.
/ How it all began /
A man stands beneath a 13-ft tall hand pump, using ropes to draw out water. But the pump did not grow; the land beneath it disappeared.​
Photograph: Mr. Priya Ranjan Sahu, Location: Kendrapara Analysis: Self, Data: Odisha Space Applications Centre [ORSAC]
Over 47 years, the sea claimed more than 13ft of land [4,069 hectares], leaving behind a group of hamlets - Satabhaya slowly sinking into waves.
/ Project at a glance /
The output of the project
​
is in the form of an interactive data storytelling webpage, with an author-driven, linear narrative structure through a journalistic approach to make climate change more tangible.
This project
​
​is a retelling of Satabhaya and its people, a remote coastal village in Odisha, who have been facing the wrath of climate change-induced coastal erosion due to extreme cyclonic episodes for more than 4 decades now [since 1971].
​The purpose of the project
​
is to use data viz. and storytelling to understand, visualize, relate, and archive episodic-climate events to make the information accessible to both readers and non-readers alike.
/ Design Process /
Data Collection
Enquiry
Ethnography
Opportunities
Design
Statement
Data Analysis
Data Ambiguity
Data Representation
Design
Iteration
Lots of leftover data
When
?to stop
Development
Scrollytelling
Data Collection
Twitter feeds from environmentalists
Secondary Research
Primary Research
Interview with local Journalists,
Water Resource Dept., OSDMA, ICZMP, IMD.
​
Data Analysis
Insights
Issues​
-
Fragmented data
-
Visual-text mismatch
-
Complex metrics
-
Incoherent reports
-
Missing locations
-
Distracting ads
Evidence
-
Shoreline shift
-
Handpump remains
-
Forced migrations
-
Lost belongings
-
Mass resettlement
-
Livelihood change
-
Govt. workarounds
-
Fear & discontent
Storytelling
-
Text & photos
-
Linear narrative
-
Third-person POV
-
Scroll & click
-
English & Odia
-
Sub-story format
Accessibility
-
Lacks inclusivity
-
No blind support
Make a common archive of informations related to the event
Bridge connection between scientific data and emotions
​Make abstract statistics understandable

Visualization of data to highlight impact
Design Statement 1
Designing an immersive experience around coastal erosion of Odisha that combines data narration and empathy-building through new media design tools.
Design Statement 2
Designing an interactive website/microsite focusing on coastal erosion of Odisha that combines Data Narration and empathy-building to create awareness and inspire action among viewers.
Final Design Statement
// How might we design an interactive scroll webpage to communicate the severity of the phenomenon of coastal erosion through the story of Satabhaya in a journalistic approach, that serves as a central resource to understand, visualize and archive the episodic events to make it accessible to a broader audience including both readers and non readers alike. //
Climate Migration
Satabhaya Intro
Eroded Temple
Hand Pump Story
The whole story was then divided into sub-stories for representation.
7
Loss and Fear
Aftermath
Shoreline Shift
Data Representation
.The aim was to present the gathered insights through a data story/narrative to simplify it
Usage of simple yet effective techniques
​
- Timeline
- Comparative analysis
- Horizontal scroll
- Before vs after
- Overlaying images
Makes long form stories engaging
Scope to archive information
why data story ?
Usage of multimedia and other internet specific interactivity for wider accessibility
User testing at an early stage to understand development constraints
design considerations
More accessible and inclusive story
Design decisions
​
- Scroll based playback​
- Across all platforms
- Audio article for blind
- Desktop first approach
- Webflow prototype​​​
- Dark / light mode
- Local and global
- in Odia and English
Collaboration with developers
Visual craft of the data narrative
Low Fidelity
High Fidelity
Mode - Light / Dark
Final Design
To enhance reader engagement, the narrative includes testimonials and interactions throughout the long text formats.
12 column grid [ 1920*1080 ]
Colours
#f1ae12
Sand
#101010
Background
#f1f1f1
Cloud
Typography
/ User Feedback /
Story
Engagement
Content Retention
Subject Matter Expert - Feedback
Industry professional
Climate Change Dept. IITH PhD student
Google Forms
Once a data story is released/published how to take user feedback? How would one know if it really made an impact?
A resident of Satabhaya village still offers prayer under the temple remains that was destroyed due to coastal erosion.
Amazing work....Keep it up @ Swadhin.