World Geography
Web Application Design
Transformed an ambitious 3D globe request into a practical layered map system that became "the new standard for Abeka maps," complete with real-time annotation tools for classroom teaching.
Role
UX/UI Designer
Developer
Timeline
Fall 2024 - October 2025
Skills
Interaction Design
Visual Design
Prototyping
Tools
Figma
HTML
CSS
JavaScript
Building Bridges Between Vision and Reality
The project started the way many do at Abeka—with another team's big idea.
The History and Geography Editorial team wanted an interactive 3D globe, something students could spin and explore like the polished tools they'd seen from larger ed-tech companies.
It was exactly the kind of request that makes product design challenging: inspiring vision, genuine educational need, but completely mismatched to our technical capabilities and delivery infrastructure.
I didn't want to be the person who just says "no, we can't do that." But I also couldn't magic away our constraints. So the meeting became a conversation: What are you really trying to teach? What do teachers actually need to do with this? As they described toggling map layers, showing different types of boundaries, revealing physical features—I realized we were talking about the same goal, just different paths to get there.
Sometimes the designer's job isn't building what they asked for. It's building what they actually need.
The Reality Check
After setting expectations about what was technically feasible, we started asking better questions. What if instead of mimicking a globe, we built something that let teachers and students see geography the way geographers actually think about it—in layers?
We looked at existing mapping tools first, hoping to build on something rather than starting from scratch. But everything was either too stripped-down for educational use or so complex it needed a tutorial to understand. We'd have to design our own.
Building in Layers
The concept emerged from those 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?
The editorial team's response told us we were onto something.
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.
The editorial team preferred this version immediately. We had our layout.
The Interruption
Just as we settled on the sidebar approach, business priorities shifted. The project went dark.
A year is a long time in design. When we revived the project 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 2015. It needed to feel like modern software.
The Teacher Question
As I redesigned the interface, a new question emerged: what would make this actually useful in a classroom? I imagined a teacher trying to explain the Silk Road, or why Egypt developed along the Nile. Static maps can show where things are, but teaching requires emphasis—circling a region, drawing a route, highlighting a connection.
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.
But adding these features created a new problem: undo/redo and clear canvas became necessary the moment we let users make marks. One misplaced pin or accidental scribble shouldn't mean starting over. And that raised the real challenge—where do all these tools live without turning the map into a cluttered toolbar nightmare?
The Floating Solution
I sketched out options: a hidden drawer at the bottom, collapsible sidebars, dropdown menus. Each had merit, but each also had friction—extra clicks, hidden features, cognitive load.
Then I kept coming back to FigJam's floating toolbar. It was always accessible, never in the way, and felt natural to reach for. Sometimes the best answer is the one another designer already figured out. Why reinvent spatial UI patterns when someone's already solved for "tools that need to be everywhere and nowhere at once"?
What Students Taught Us
User testing is humbling. You think you've designed something intuitive, then you watch real people use it and realize you've been working in a bubble.
The Layer Fatigue Problem
Students wanted to see everything at once—all borders, all physical features, all labels. But our interface made them click through each layer individually. What felt like "giving users control" actually felt like tedious busywork when you just wanted to see the complete picture.
Solution: Added a "Toggle All" button in the sidebar. One click to see everything, one click to start fresh.
The Mystery Icon Problem
We'd designed clean zoom controls with minimal icons—a plus, a minus, and a re-center button. Beautiful, uncluttered. Also completely unclear. Students were clicking hesitantly, unsure what would happen, especially with that re-center icon.
Solution: Added tooltips to every control. Sometimes clarity beats minimalism.
The Nuclear Option Problem
Students would draw a circle around Europe, add a few pins, then accidentally place one pin wrong. Their only option? Clear the entire canvas and start over. They expected to select that one pin and delete it—the way every modern drawing tool works. Instead, we'd built a system where one mistake meant losing everything.
Solution: Wrapped each element in a selection box. Now students could click any pin, shape, or drawn line to select, drag, or delete it individually. Mistakes became fixable instead of fatal.
The Covered Map Problem
Our horizontal toolbar at the bottom? It was blocking the very map features students were trying to see. We'd been so focused on making the tools accessible that we hadn't noticed we were literally covering the content.
Solution: Switched to a vertical floating toolbar. Always reachable, never in the way.
From Impressive to Usable
Every piece of feedback made sense immediately. We'd been so focused on adding features that we'd forgotten to make them forgiving. The tool went from something that looked good in screenshots to something that actually worked in a classroom.
What It Became
“They are beautiful and well-thought-out, and I really think that they will become the new standard for Abeka maps.”
-Kimberly Harrington, Product Manager
But the real validation came from watching it used. Teachers weren't just displaying maps—they were thinking out loud with them, layering information to help students see connections that static textbook maps could never show. We'd built something that didn't just display geography. It helped people understand it.
