World Geography
Web Application Design
Converted a complex 3D concept into a scalable, teacher-ready layered map solution — adopted as the standard for Abeka geography products.
Role
Lead UX/UI Designer
Developer
Timeline
Fall 2024 - December 2025
Skills
Interaction Design
Visual Design
Prototyping
Tools
Figma
HTML
CSS
JavaScript
TL;DR
I designed and built an interactive world geography map system to replace static classroom images with flexible, layered maps and live annotation tools. After pivoting away from a technically infeasible 3D globe, I led the visual redesign and front-end development end-to-end, grounding decisions in continuous teacher testing.
The final product prioritizes clarity, collaboration, and real classroom workflows, earning strong qualitative feedback from educators and improving how geography is taught in practice.
Overview
World Geography is an interactive map tool designed to help teachers deliver the new World Geography curriculum more effectively. The product replaces static, high-resolution map images with a flexible, layered system that supports exploration, comparison, and live classroom collaboration.
While the project began as a team effort, I ultimately led the visual redesign and built the entire front-end experience end-to-end, collaborating directly with project managers and curriculum stakeholders.
Problem
Teachers were provided with static images of world maps—physical, political, regional—and were expected to switch between them during lessons. This made it difficult to:
01
Compare different geographic attributes
02
Focus on specific regions without distraction
03
Engage students actively during instruction
04
Adapt maps dynamically to teaching needs
The geography department initially envisioned a 3D interactive globe, but early exploration revealed significant technical constraints that made this approach infeasible within the project’s scope and timeline.
Users
Primary
Teachers (using the tool live during instruction)
Secondary
Students (interacting collaboratively through annotation and discussion)
Because this is a teacher aid, usability, clarity, and reliability were prioritized over novelty or visual spectacle.
Constraints & Challenges
Design Process
Key Design Decision: Globe → Layered Maps
Instead of going “bigger” with a globe, we went deeper with layers.
Why layered maps?
Teachers already switch between:
Physical features
Political boundaries
Countries & cities
What they couldn’t do was mix, isolate, or compare them.
Trade-offs
Less visually flashy than a 3D globe
Multiple focused views instead of one giant experience
Outcome
Teachers can focus on specific regions (Africa, North America, etc.)
Layers can be toggled independently
Lessons become more intentional and flexible
This decision improved usability while staying within technical constraints.
Building in Layers
The concept emerged from early sketches: a map where you could peel back layers of information like sheets of tracing paper. Want to see just rivers and mountains? Toggle everything else off. Need to show how borders relate to physical features? Layer them together.
We started with a bare-bones prototype—grayscale, minimal styling, just functional enough to prove the layer concept worked. It was ugly, but it answered the critical question: could this actually work?
Exploring the Visual Language
With the concept validated, we moved into higher-fidelity mockups.
This is where the visual identity started taking shape—the warm earth tones, the textured sidebar panels, the region selector on the right. We were figuring out what this tool should feel like, not just how it should function.
These mockups helped us get early buy-in before investing in development.
Finding the Right Layout
Once we started building the functional prototype, the interface decisions became real. We experimented with the horizontal bottom bar—those toggle buttons for Borders, Longitude/Latitude, Political, Ocean, Rivers arranged in a row below the map.
It looked clean in static mockups. But in practice? The bar felt cramped, and worse, it was covering parts of the map itself—exactly the content students needed to see.
The Sidebar Solution
We pivoted to a collapsible sidebar on the left. This gave us room to organize layers into logical categories—Administrative Aspects (Capitals, Borders, Political Division) and Geographical Features (Rivers & Bodies of Water).
The vertical space solved multiple problems: layers could breathe, we could group them meaningfully, and the design could scale as we added more layer types. Most importantly, the sidebar didn't compete with the map—it complemented it.
Early Testing: Validating the Pivot
Once we moved away from the 3D globe concept, we tested early layered-map prototypes with teachers to answer a key question:
Findings:
UI Refresh & Visual Direction
A year is a long time in design. When the project was revived twelve months later, I looked at what we'd built with fresh eyes and higher skills. The bones were good, but the aesthetic was stuck in 2010. It needed to feel like modern software.
With full ownership of the project, I led a UI refresh with three guiding principles:
Layout Design Iterations
I drew inspiration from tools like Miro and FigJam, which balance powerful collaboration features with visually quiet interfaces.
While analyzing how teachers used existing maps, I noticed recurring behaviors:
Drawing arrows
Circling regions
Marking routes
Highlighting features while explaining concepts
I translated these behaviors into a focused set of tools:
Drawing tools
Became essential for that kind of spontaneous markup. A teacher mid-lesson needs to circle the Fertile Crescent or trace a trade route without breaking their flow to search for a pre-made overlay.
Pin drops
Solved a different problem: our layer system covered major cities and features, but what about that specific battlefield, or the village where a historical figure was born? Teachers needed to mark locations our database didn't include.
Polygon Builder
Emerged from thinking about regions that don't fit neat borders—cultural areas, climate zones, ancient empires that expanded and contracted. Sometimes you need to define "approximately here" rather than point to an exact coordinate.
User Testing: Tool Use & Cognitive Load
As annotation and collaboration tools were introduced, testing revealed important behavioral patterns:
Impact
As of January 2026, quantitative metrics are still pending, but qualitative feedback has consistently reinforced that iterative testing meaningfully improved both confidence and classroom effectiveness.
Reflection
This project reinforced that strong educational tools aren’t about adding more features—they’re about removing friction at exactly the right moments. Continuous user testing helped us avoid over-designing and instead focus on how teachers actually think, move, and explain in real classrooms.
