World Geography Interactive
Web Application Design·5 min read
Teachers needed a digital companion for a new World Geography curriculum, but lessons still depended on separate physical maps they could not combine. I designed and built a system that layers those maps in the browser, lets teachers mark them up live, and cut production time in half.
Role
Lead UX/UI Designer, Front-End Developer
Timeline
2 years
Type
Web-Based Educational Interactive
Tools
Figma, Cursor
Background
Abeka's History, English, and Social Studies team needed a digital companion for a new World Geography curriculum.
Problem
A typical lesson meant stacking political, physical, and border maps on a desk, and never seeing them at once.
Solution
Layer those exact curriculum maps in the browser, then give teachers tools to mark them up live.
Outcome
Map production dropped by half, interactive setup by 85%, and teachers asked for it in every lesson.
Problem
Why Build It?
The project started when Abeka's HESS team (History, English, and Social Studies) brought us a new World Geography curriculum and a big ask: make it feel digital.
They imagined:
- Interactive globes
- Real-time geographic data
- Complete teacher control
- Highly immersive experiences
Meanwhile, teachers were already stuck. A geography period meant a pile of paper maps: political, physical, borders, latitude and longitude. They could swap them. They could not stack them. Whatever the last map had shown disappeared the moment the next one went up.
Opportunity
In conversation after conversation, teachers said the same thing in different words.
Give us the ability to mix and match information based on the lesson we're teaching.
A few even sketched it as transparent overlays: keep the map, shuffle what sits on top. That was the opening. Not a new globe. A stack.
Research
Understanding Classroom Workflows
Geography class is physical. I grew up watching my mom teach, so I already had a feel for the rhythm of a lesson. To check that against this building, I sat with teachers and collected the activities they actually ran, not the ones in the product brief.
The notes looked messy until they didn't. The same kinds of tasks kept showing up.
Have students identify major features
Geo Hernandez
Use the unlabeled map for quizzes where students come up and annotate features
Geo Hernandez
Discuss how geography influences where people live and build cities
Geo Hernandez
Compare physical map with political map to see how borders sometimes follow natural features
Geo Hernandez
Annotate or trace major features
Geo Hernandez
Have students color-code different elevation zones or climate regions
Geo Hernandez
Create scavenger hunts where students race to locate specific features, countries, etc
Geo Hernandez
Mark the locations where major people groups established
Geo Hernandez
Have students take turns marking features while explaining what they know
Geo Hernandez
Start with blank map, each student adds one label until it's complete
Geo Hernandez
Draw circles around features and compare sizes
Geo Hernandez
Show unlabeled, student makes prediction by marking with a star, then reveal labeled to check
Geo Hernandez
Call out a feature, student must touch/mark the correct location
Geo Hernandez
Student draws arrows, symbols, or shapes to help class guess a feature without words
Geo Hernandez
Students place dots where they think major cities might be located based on geography
Geo Hernandez
Students draw a route across Africa, must explain how terrain affects their journey
Geo Hernandez
Draw/place icons showing where different animals live based on terrain
Geo Hernandez
Mark areas vulnerable to drought, flooding, etc., based on physical features
Geo Hernandez
Those activities weren't random. They kept falling into the same four jobs.
Feature Identification
Find the river, the mountain, the city, then keep it on screen while the conversation moves.
Geography & Human Activity
Show why a civilization settled here, which means terrain and borders in the same view.
Mapping Exercises
Compare regions against each other, not just name them in isolation.
Classroom Collaboration
Mark the map together so the whole class is looking at the same decision.
Key Insight
Teachers weren't asking for more map. They were asking to rearrange the one they already had.
Constraints
The original vision had to survive three filters. Classrooms needed something that would still work offline, match the textbook, and survive the next curriculum revision. User needs and business needs had to clear the same gates.
Technical
Abeka products must:
- 01Work offline
- 02Run across all supported devices
- 03Remain stable for long sessions
Content
The maps also needed to:
- 01Match the curriculum exactly
- 02Align with textbook content
- 03Support teacher lesson plans
Business
The team needed a solution that was:
- 01Maintainable
- 02Scalable
- 03Easy to update
What could pass every gate
Nothing yet.
Key Design Decisions
Globe to Layered Maps
Stakeholder Vision
The HESS team wanted the new World Geography curriculum to feel like a leap from paper maps: a 3D globe with live geographic data and immersive interaction. That vision treated the product as a digital spectacle. It did not start from how teachers actually ran a lesson.
Challenge
Existing tools already provided those experiences. A novel globe would also break from the maps students already saw in their books and lessons.
Solution
A layered map system built around the exact maps used throughout the curriculum.
Why?
Lessons required mixing political, physical, and border information on one map, then revealing capitals or latitude lines only when the activity called for them. Layers made that possible on the same image teachers already used in books and lectures, so students never had to relearn the geography of a page they already knew.
Outcome
A simpler system that supported classroom instruction, with the same visual language across every learning environment.
Design Evolution
Phase 1: Defining the MVP
Three of us started by asking for the smallest thing we could ship that still served the new curriculum. Layered maps got us there technically.
In class, though, teachers could look. They still couldn't teach. No drawing, no pinning, no way to run the activity on the map itself.
Pause
Then the third-party maps failed a curriculum review, and work stopped for about a year.
When it came back, I was the only designer on it, which meant I also owned what it should become.
Phase 2: Designing for the Classroom
I stopped designing a map product and started designing for a class period. Teachers needed the layers, yes, but they needed a pen, a pin, and a way to build an exercise without leaving the map.
Navigation got quieter, the layout left room for those tools, and the interface started to feel like something you would actually project on a classroom wall.
Visual Refinements
Simplified Navigation
Controls that used to compete for attention collapsed into a structure you can read at a glance.
Improved Information Hierarchy
The lesson sits in front. Chrome sits behind it.
More Flexible Layout
Room for a pen, a pin, and whatever teaching tool came next, without redrawing the product.
Stronger Visual Identity
It started to look like something you would project in a classroom, not a prototype of a map.
Teacher Tools
After the year off, I came back asking a different question.
Instead of asking:
What should the map do?
I asked:
What would a teacher want to do during class?
Annotation Toolkit
I borrowed the spirit of Figma and FigJam: a small set of tools you don't have to think about, aimed at a lesson instead of a design file.
Circle a river, trace a coastline, or sketch a route so the class can follow the lesson on the map itself.
User Testing
The first toolbar sat along the bottom and covered the exact coastline teachers needed. Moving it to the side was an unglamorous fix that made the map readable from the back of the room.
Outcome
The advanced tools stayed. They just stopped competing with South America.
Internal Tools
The classroom was only half the problem. Making a new interactive still meant a designer and a developer passing files around for twenty minutes at a time. That workflow had to get simpler if the product was going to scale with the curriculum.
Existing Workflow
Each map started in InDesign and crawled through export, conversion, hand-encoding, and code edits before anyone could even change a title.
Six steps
Additional Problem
Legends were printed into the map image. Zoom in and they fell apart. Change a symbol and you redesigned the file. Every revision paid that tax again.
Solution #1
Dynamic Map Legend
I pulled the legend out of the artwork and into the interface: a panel that sits on the map, stays sharp when you zoom, and updates without a new export.
Outcome
Reduced map production time from:
3 days → 1.5 Days
Solution #2
Interactive Builder
Then I built a map builder so content teams could upload layers, rename them, add or remove one, set the legend, and update titles without waiting on engineering.
Outcome
Reduced setup time from:
10 Minutes → 1 Minute
Validation
Teachers sat with prototypes throughout. They didn't hedge. The feedback went straight back into the next pass.
From the classroom
One of them said it out loud:
“This is everything we've ever wanted.”
Key Findings
Finding 1
Flexibility beat spectacle every time we tested.
Finding 2
Once they had a pen and a pin, those tools weren't extras. They were the lesson.
Finding 3
Layer combinations covered activities that used to require four paper maps.
Impact
Teacher Impact
They can stack the maps the lesson needs, mark them while they talk, and invent an activity on the fly instead of hoping the printed set matches the plan.
Organizational Impact
Map files used to take three days because legends and labels lived in the artwork.
3 days → 1.5 Days
Standing up a new interactive went from a ten-minute code pass to a minute in the builder.
10 Minutes → 1 Minute
Product Impact
The same layered system can take the next region's maps without rebuilding the product.
Reflection
What I Learned
I spent a long time assuming a better geography product meant more technology: a globe, live data, interactions that felt expensive. Talking to teachers was the correction.
They needed to rearrange what they already taught, not replace it. Build for the period, not the demo, and you get something that is easier to ship, easier to stand in front of, and actually used.
