MapVX

The Challenge

MapVX needed a complete frontend overhaul for their indoor navigation platform. The existing codebase had accumulated technical debt, inconsistent styling, and performance issues that were impacting user experience and team velocity.

The team was growing, but new engineers took months to become productive. CSS conflicts were common. There was no shared component language between design and engineering.

Key Decisions

Decision 1: BEM Methodology for CSS Architecture

The situation: CSS conflicts were constant. Different engineers had different naming conventions. Specificity wars made debugging painful.

Options considered:

• CSS Modules (would require build tooling changes)
• CSS-in-JS (team unfamiliar, performance concerns)
• BEM methodology (no tooling changes, widely understood)

What I chose: BEM methodology. It required no tooling changes, had a shallow learning curve, and solved the naming collision problem immediately.

Tradeoff accepted: Verbose class names. But predictability was worth the extra characters.

Decision 2: Design Token System Before Component Library

The situation: We needed a component library, but design kept changing colors and spacing mid-sprint.

What I chose: Build the token system first. 50+ tokens for colors, spacing, typography, and shadows. Components reference tokens, not hard-coded values.

Tradeoff accepted: Slowed initial component development by about a week. But design changes after that became trivial: update one token, see changes everywhere.

Decision 3: Incremental Migration Over Big Bang

The situation: Leadership wanted the new architecture deployed quickly. A full rewrite would take months.

What I chose: Incremental migration. New features used the new architecture. Old features were migrated opportunistically, prioritized by business value.

Tradeoff accepted: Temporary inconsistency. For about 3 months, two architectural patterns coexisted. But we shipped features continuously instead of going dark for a rewrite.

Technical Implementation

• Performance: Reduced page loading times by 90% through lazy loading, code splitting, and asset optimization
• Team Leadership: Led a 6-person frontend team, implementing agile practices and code review standards
• Stakeholder Communication: Presented feature roadmaps to C-level executives, translating technical concepts into business value
• External Integrations: Integrated 3+ external partner APIs seamlessly into the platform

What This Proves

1. Architecture decisions compound: The BEM + token system made every subsequent feature faster to build.
2. Incremental wins over heroic rewrites: Continuous delivery kept stakeholders happy while we improved the foundation.
3. Documentation is infrastructure: The component library documentation reduced onboarding time from months to weeks.
4. Technical leadership is communication: Translating architecture decisions into business value is as important as making the decisions.