Online

Accessible Directory Boards for Shopping Centers

Designing an inclusive digital experience that helps all shoppers navigate with confidence and independence.

Problem Statement

Most digital directory boards in shopping centers do not support users with disabilities. They often lack accessible routing, customizable displays, or interfaces designed for various physical and cognitive needs. As a result, many users are left without a reliable way to navigate public spaces independently.

Solution Statement

We introduced an Accessibility Mode that adjusts the interface, prioritizes accessible routes, and surfaces nearby amenities like elevators, ramps, and accessible restrooms. The redesigned experience is intuitive, inclusive, and aligned with accessibility standards to support a wide range of user needs.

Project Hero Image
01
Research & Discovery

We audited existing boards and tested real-world screen measurements to uncover accessibility gaps and inform key layout decisions.

02
Define & Ideate

Mapped user challenges and explored ways to improve routing logic, display clarity, and physical usability.

03
Design & Prototype

Built wireframes and high-fidelity prototypes with features like accessible routing, assistive guidance, and visual adjustments.

04
Implement & Launch

Collaborated with developers to bring the design to life and validated the interface through usability testing in mall environments.

Overview

Digital directory boards are essential wayfinding tools in shopping centers, but most are not built to accommodate users with disabilities. This project focused on rethinking the directory experience to support independent navigation through an Accessibility Mode

The new mode adapts the interface to prioritize accessible routing, visibility, and physical interaction for all users.

Overview Visual

Role & Responsibilities

I led UX research, user testing, and interface design.

I conducted field studies and physical measurement tests, created wireframes and high-fidelity prototypes, and partnered with development teams to ensure that accessibility standards were met throughout the process.

Role & Responsibilities Visual

UX Goals

The goal was to create a navigation experience that was usable, intuitive, and inclusive for every visitor, regardless of ability.

Accessibility Mode needed to be easy to activate, easy to understand, and helpful in real time.

  • Provide step-free routing using ramps and elevators
  • Surface key accessible amenities like restrooms and seating areas
  • Offer adjustable visuals for better readability
  • Place controls within reach zones for seated and standing users
UX Goals Visual

User Research and Physical Testing

  • Enhance Accessibility: Integrate features that prioritize accessible routes and facilities within the directory boards.
  • Improve User Experience: Ensure that individuals with disabilities can navigate shopping centers independently and efficiently.
  • Compliance with Standards: Align the redesign with established accessibility guidelines and legal requirements.
Research Visual

Design Process

Accessibility Mode changes the structure of the interface to better support users with disabilities. When activated, the layout shifts so that all key inputs and controls appear near the bottom of the screen. This makes them easily reachable for users in wheelchairs or those with limited mobility.

The mode also adjusts contrast, font size, and content hierarchy for better readability and focus. Routing suggestions prioritize elevators and ramps, avoiding stairs and escalators, and clearly highlight accessible restrooms and support services.

Design Process Visual

Wireframing, Prototyping, and Documentation

We created wireframes to define the new layout logic and control positioning.

Prototypes were built to demonstrate Accessibility Mode in action and were used in testing with target users.

Documentation detailed layout behavior, touch target spacing, and accessibility compliance guidelines.

  • Mapped user flows for both standard and accessible navigation
  • Tested interface adjustments for seated vs. standing users
  • Documented layout rules and responsive behavior for scalability
Wireframing Visual

Key Features

Accessibility Mode simplifies and personalizes the experience, ensuring that users with disabilities can navigate comfortably and independently.

  • Accessible routing that avoids stairs and highlights elevator paths
  • Accessibility Mode controls repositioned to the bottom of the screen for easier reach
  • High-contrast mode and adjustable text size for visual clarity
  • Touch targets designed for optimal spacing and ease of use
Key Features Visual

Accessibility Achievements

Accessibility was embedded from the beginning and tested throughout development. The interface complies with WCAG and ADA guidelines, and the final design reflects both real-world testing and inclusive design best practices.

  • Key controls placed within proven reach zones for wheelchair users
  • Visual adjustments support a wide range of vision needs
  • Kiosk screen height and angle optimized for universal access
Accessibility Achievements

Goals

We wanted to design a system that made wayfinding feel effortless for everyone. Accessibility was not an add-on but a core function of the interface.

  • Empower users with disabilities to navigate independently
  • Align with accessibility laws and best practices
  • Improve usability for all visitors regardless of ability
  • Create a scalable system for future mall installations

Accomplishments

Accessibility Mode launched across redesigned directory boards with strong feedback from users and stakeholders. The design system is now reusable for future rollouts and has raised accessibility standards within the organization.

  • Introduced accessibility-focused routing into live mall systems
  • Validated usability through physical testing and user feedback
  • Increased accessibility awareness among stakeholders and developers
  • Established a repeatable design and implementation process for inclusive public tech
Placeholder Image 1
Placeholder Image 1
Placeholder Image 1
Placeholder Image 1
Placeholder Image 1
Placeholder Image 1