Creating Accessible Digital Maps for Malls
Transforming static directories into accessible, touch-friendly, and visually rich map interfaces for malls.
We studied how users interact with mall websites to inform a mobile-first, map-based store locating experience.
We built a scalable, accessible system for consistent interactive map creation across all malls.
Maps were designed as responsive SVGs embedded into store pages for seamless mobile and desktop use.
Standardized SVG grouping enabled easy updates and replication across multiple properties.
Role & Responsibilities
As the UX designer, I created interactive maps for dozens of malls, focusing on responsive design, visual clarity, and accessibility.
I established the design system, developed the SVG asset structure, and collaborated with developers to integrate the maps into live websites.
User Needs & Research
Users browsing mall websites often want to see where a store is located before visiting in person.
Through feedback and behavioral patterns, we learned that embedding maps directly within each store page offered instant spatial context, eliminating the need for separate wayfinding interfaces.
The focus was on quick visibility and clarity, especially for mobile users.
UX Challenges & Solutions
Each store or facility on the map was drawn as a unique vector shape, grouped and labeled within the SVG. This structure allowed code to dynamically highlight store zones based on the store being viewed.
We avoided pathfinding and focused purely on location clarity. The maps were responsive, mobile-optimized, and easy to navigate by touch, enabling quick spatial understanding without added friction.
Accessibility
Accessibility was baked into the map system from day one. We ensured all text and visual elements met WCAG AA standards and built maps that worked well on touchscreens for users with limited dexterity.
Icons were used to clearly mark accessible amenities like elevators, ramps, and restrooms. Visual contrast, generous hit areas, and responsive behavior helped ensure these maps served all users, regardless of device or ability.
Design Process
Wireframing & Prototyping
We designed early prototypes to validate zoom levels, layout spacing, and tap target sizes, ensuring a clean and usable layout across screen sizes.
SVG Development & Integration
Each map was built using vector software and exported as grouped, named SVGs. This allowed developers to dynamically match store units to the backend system and highlight them on the live site based on user interaction.
Results & Takeaways
We created a flexible, repeatable system that supported dozens of interactive maps across mall websites. Embedding the map in store pages improved orientation and store visibility while keeping the interface simple.
Teams could update maps with minimal effort, and users got the clarity they needed with zero onboarding.
Goals
We aimed to improve the store-finding experience on mall websites through a reusable, accessible mapping system.
- Embed responsive maps in store pages
- Ensure accessibility for all users
- Create a scalable system for long-term maintenance
Accomplishments
The system was deployed across dozens of mall websites with minimal friction.
- Built a repeatable workflow using grouped SVG layers
- Improved store visibility and user orientation
- Enabled fast updates without needing full redesigns
