Reimagining ADID’s
Wayfinding System
A More Accessible, Connected Atlanta
Design Role
Senior UX Designer
Contribution
UX Research
UI Design
Design Systems
Duration
Winter Quarter
10 Weeks
Team
Ilayda Ozcan
+ 20 Others
Tools
Figma
Linear
As a Senior UX Designer, I collaborated on a 10-week project with the Atlanta Downtown Improvement District (ADID) to reimagine the city’s outdated information kiosk. Working within a multidisciplinary team, I led junior designers on the UX team and contributed across all phases of the project—from early research and branding, to UI design, usability testing, and final delivery. We created a modern, intuitive, and accessible wayfinding experience tailored to Atlanta’s diverse and growing audience, with a focus on improving usability, strengthening visual clarity, and supporting visitors as the city prepares for the upcoming World Cup.
The Problem
What Happens When an Outdated System Meets a Growing City?
ADID (Atlanta Downtown Improvement District) tasked us with improving downtown wayfinding. The existing information kiosk was outdated, visually unclear, and failed to effectively guide Atlanta’s diverse visitors.
To address these challenges, we delivered a modernized information desk and an intuitive digital kiosk interface designed for clarity, accessibility, and seamless integration into the urban environment.
The Problem
What Happens When an Outdated System Meets a Growing City?
ADID (Atlanta Downtown Improvement District) tasked us with improving downtown wayfinding. The existing information kiosk was outdated, visually unclear, and failed to effectively guide Atlanta’s diverse visitors.
To address these challenges, we delivered a modernized information desk and an intuitive digital kiosk interface designed for clarity, accessibility, and seamless integration into the urban environment.
Design a digital kiosk
creating the interface, ensuring it fits seamlessly into the environment next to the information desk.
Redesign the information desk
to create a more inviting, intuitive, and accessible experience for visitors.
What We Struggled With:
19
did not find the kiosk
useful enough to continue use.
individuals
5
faced accessibility barriers
that limited their interaction.
individuals
22
preferred digital kiosks over information desks,
but the existing kiosks did not meet their expectations.
individuals
Users knew what they needed. Our job was to turn those insights into a kiosk experience that felt intuitive, accessible, and truly helpful.
These usability challenges highlighted the need for a better kiosk experience. To refine our approach, we put out a survey and received 105 responses. With these challenges in mind, we asked users what would make kiosks more useful, uncovering key features they wanted most to enhance effectiveness and engagement.
We began our process by conducting an in-house observational survey, where 25 multidisciplinary design students explored downtown Atlanta firsthand. This immersive experience helped our team empathize with kiosk users, identify usability pain points, and better understand the urban context we were designing for.
While we recognize the limitations and potential bias of testing within our own class, this exercise helped shape our initial direction and informed the broader primary research that followed.
Surveys:
Research
How Do Visitors Really Navigate Downtown Atlanta?
To design kiosks that genuinely serve the public, we began by listening. Through surveys and interviews with commuters, visitors, and locals, we uncovered real moments of need—what confuses people, what delights them, and how they move through the city. As Atlanta prepares for the 2026 FIFA World Cup, these insights became the foundation for our design decisions, grounding every feature in lived experience.
These insights provided a clear roadmap for our design process, allowing us to prioritize the most valued kiosk features. By directly addressing user preferences, we ensured our solutions were genuinely aligned with visitor expectations and city goals.
To better understand how the information booth and digital kiosk operate today and what they need to become, we interviewed kiosk staff and key downtown stakeholders. These conversations revealed operational gaps, safety concerns, and how these two touchpoints shape a visitor’s first impression of Atlanta.
Interviews:
Inside Perspectives That Shaped Our Design:
Safety Officer
"We rely on our phones to look things up. It’s not ideal when someone needs help fast.”
"For many visitors, this kiosk is the first thing they’ll engage with. It should reflect the best of Atlanta.”
Staff rely on personal phones and paper pamphlets to help visitors.
There’s no mounted screen or digital tool to quickly find information during peak moments.
Visual storytelling, multilingual support, and consistent branding were recurring themes.
The kiosk must seamlessly connect people to nearby businesses, events, and hotels.
Stakeholder
What Users Currently Expect From Kiosks:
Maps & Directions
92%
Transportation Schedules
63%
Local Events
52%
What Features Users Want in Kiosks:
#1
Real-Time
Updates
#2
Accessibility
Features
#3
Translation
Services
#4
Nearby
Businesses
#5
QR Code for Mobile
These quotes reflect real feedback from the people who interact with or manage the kiosks every day. Their insights helped us prioritize usability, access, and storytelling by grounding our design decisions in the real needs of downtown Atlanta and the people it serves. These perspectives ultimately guided our team in crafting a more human-centered experience for both staff and visitors.
Designing with Purpose
We anchored our design process in four clear pillars, translating pain points into purposeful interactions for both visitors and support staff.
Design & usability
How Can Design Bridge the Gaps We Discovered?
Grounded in user research and stakeholder insight, we designed a dual solution: a reimagined information booth and a digital kiosk system that responds to real needs. Our goal was to create a wayfinding experience that feels intuitive, accessible, and alive with relevant, real-time information.
Intuitive Wayfinding
#1
Universal Accessibility
#2
Live & Relevant Information
#3
Frictionless Interaction
#4
From Sketch to Screen
We began with layout explorations to bring our design priorities to life. These early wireframes built the foundation for an interface that gradually improved through structure, branding, and interaction. This phase set the stage for user testing and meaningful iteration.
Low-fi
Early sketches exploring layout, navigation flow, and content hierarchy.
Mid-fi
Basic wireframes defining structure, touch targets, and core interactions.
High-fi Exploration 1
Applied brand elements and structure to enhance clarity and support accessible content delivery.
High-fi Exploration 2
Introduced dark mode, refined headers, and restructured categories for better hierarchy.
Validating Through Feedback
After finalizing our layout in the second high-fidelity exploration, we were eager to start testing. Since we didn’t yet have access to a physical screen, we built a full-scale paper prototype of the kiosk to begin evaluating the design early.
We tested 7 individuals, asking them to interact with the layout, rearrange UI elements, and complete tasks based on real-world scenarios. Their input revealed natural interaction patterns and helped us refine the interface.
Physical Usability Testing:
User 1
User 2
User 3
User 1
User 2
User 3
User 1
User 2
User 3
User 1
User 2
User 3
After gathering insights from physical testing, we refined the interface and ran three rounds of Maze tests. Each round built on the last, helping us evaluate clarity, uncover usability issues, and fine-tune layout and interactions.
Usability Testing on Maze:
Heatmap: Home Screen
Heatmap: Selected Event Screen
Heatmap: Transit Screen
Heatmap: Language Screen
Out of 26 users, 84.6% located the concert by using either the nav bar’s search or the on-screen search bar, confirming that multiple entry points (including the “Happening Near You” carousel) support quick discovery.
Maze Task: Locate a concert.
An 88.1% misclick rate on the original language icon indicated user confusion. Replacing it with a more recognizable symbol boosted success rates, showing how vital clear visuals are for language toggles.
Maze Task: Switch the kiosk language to English.
20 out of 26 users consistently found the “Get Directions” option, indicating a layout that effectively guides visitors to the next step without confusion.
Maze Task: Get directions to the concert.
Users easily located navigation options through intuitive icons. However, 10 users expressed small images and unclear labels caused confusion, highlighting a need for clearer visuals and improved hierarchy.
Maze Task: Locate all available navigation routes.
Maze testing revealed specific usability issues. We made targeted adjustments by improving language toggles, clarifying icon meaning, and refining layout hierarchy to support smoother user flows. One significant change was shifting the navigation bar from the right to the left, which aligned better with natural hand placement and eye-scanning behavior, leading to improved icon discoverability and fewer missed clicks across core tasks.
Designing with Purpose
We anchored our design process in four clear pillars, translating pain points into purposeful interactions for both visitors and support staff.
Final Outcome
What Does an Inclusive, City-Ready Solution Look Like?
After months of research, design, and iteration, we delivered a final experience that connects user needs with city infrastructure, including transportation, public safety, and information access. The redesigned kiosk interface and information booth prioritize real-time support, clarity, and accessibility. The result is a smarter, more human-centered wayfinding system for downtown Atlanta. Below are a few final screens and flows that bring this vision to life.
Transit & Map
Built for speed and clarity, this screen simplifies city navigation with live maps, key transit icons, and intuitive directions.
Home & Accessibility
Quick access to key destinations, live updates, and events. Built-in accessibility options like font sizing and wheelchair mode support inclusive use.
Design System
To support a consistent, accessible, and future-ready experience, we created a design system tailored for the kiosk and information desk. This system brought structure to our components, clarity to our visuals, and flexibility for developer handoff. Inspired by real-world wayfinding, it was designed not just to look good, but to guide users and grow with the city.
I grounded our system in a simple metaphor — Signals, Paths, and Systems — reflecting how urban wayfinding works. Each layer helps users navigate, understand, and move through the interface with ease.
Signals:
Visual cues that speak without explanation. Like city signs, these elements create instant recognition and reduce cognitive load.
Includes: color, typography, icons, and key components.
Paths:
Reusable layouts that shape how users move through the interface. Like roads and intersections, they guide navigation and define structure.
Includes: screen templates, modals, and documentation.
Systems:
The layer that connects it all. Like a city’s transit system, it ensures the experience is accessible, cohesive, and ready to scale.
Includes: flows, animations, accessibility, and branding.
Signals:
Signals are the foundational UI elements in our design system—visual building blocks like color, typography, icons, and core components that can’t be broken down any further. They’re the first things users notice, designed to guide attention, build recognition, and reduce friction from the very first interaction.
Up Next:
Paths
Icons
Components
Back to:
Systems
Documentation: Home Screen
Snippet Of
Paths are the reusable layouts and structural patterns that guide how users move through the interface. Just like roads and intersections in a city, they create flow, set expectations, and help users navigate confidently. These include screen templates, modal patterns, and documentation that define layout logic and ensure consistency across every interaction.
Paths:
Modals
Templates
Back to:
Signals
Lastly:
Systems
Systems are the connective layer that brings everything together. Like a city's public infrastructure, this layer ensures every part of the interface is accessible, coordinated, and built to scale. It includes flows, animations, branding, and accessibility modes—covering edge cases, enhancing usability, and preparing the product for real-world use and developer handoff.
Flows
Branding
Systems:
Accessibility Modes
Wheelchair Mode Animation
Back to:
Paths
Start Again:
Signals
Signals:
Signals are the foundational UI elements in our design system—visual building blocks like color, typography, icons, and core components that can’t be broken down any further. They’re the first things users notice, designed to guide attention, build recognition, and reduce friction from the very first interaction.
Up Next:
Paths
Icons
Components
Back to:
Systems
Documentation: Home Screen
Snippet Of
Paths are the reusable layouts and structural patterns that guide how users move through the interface. Just like roads and intersections in a city, they create flow, set expectations, and help users navigate confidently. These include screen templates, modal patterns, and documentation that define layout logic and ensure consistency across every interaction.
Paths:
Modals
Templates
Back to:
Signals
Lastly:
Systems
Systems are the connective layer that brings everything together. Like a city's public infrastructure, this layer ensures every part of the interface is accessible, coordinated, and built to scale. It includes flows, animations, branding, and accessibility modes—covering edge cases, enhancing usability, and preparing the product for real-world use and developer handoff.
Flows
Branding
Systems:
Accessibility Modes
Wheelchair Mode Animation
Back to:
Paths
Start Again:
Signals
Signals:
Signals are the foundational UI elements in our design system—visual building blocks like color, typography, icons, and core components that can’t be broken down any further. They’re the first things users notice, designed to guide attention, build recognition, and reduce friction from the very first interaction.
Up Next:
Paths
Icons
Components
Back to:
Systems
Documentation: Home Screen
Snippet Of
Paths are the reusable layouts and structural patterns that guide how users move through the interface. Just like roads and intersections in a city, they create flow, set expectations, and help users navigate confidently. These include screen templates, modal patterns, and documentation that define layout logic and ensure consistency across every interaction.
Paths:
Modals
Templates
Back to:
Signals
Lastly:
Systems
Systems are the connective layer that brings everything together. Like a city's public infrastructure, this layer ensures every part of the interface is accessible, coordinated, and built to scale. It includes flows, animations, branding, and accessibility modes—covering edge cases, enhancing usability, and preparing the product for real-world use and developer handoff.
Flows
Branding
Systems:
Accessibility Modes
Wheelchair Mode Animation
Back to:
Paths
Start Again:
Signals
Signals:
Signals are the foundational UI elements in our design system—visual building blocks like color, typography, icons, and core components that can’t be broken down any further. They’re the first things users notice, designed to guide attention, build recognition, and reduce friction from the very first interaction.
Up Next:
Paths
Icons
Components
Back to:
Systems
Documentation: Home Screen
Snippet Of
Paths are the reusable layouts and structural patterns that guide how users move through the interface. Just like roads and intersections in a city, they create flow, set expectations, and help users navigate confidently. These include screen templates, modal patterns, and documentation that define layout logic and ensure consistency across every interaction.
Paths:
Modals
Templates
Back to:
Signals
Lastly:
Systems
Systems are the connective layer that brings everything together. Like a city's public infrastructure, this layer ensures every part of the interface is accessible, coordinated, and built to scale. It includes flows, animations, branding, and accessibility modes—covering edge cases, enhancing usability, and preparing the product for real-world use and developer handoff.
Flows
Branding
Systems:
Accessibility Modes
Wheelchair Mode Animation
Back to:
Paths
Start Again:
Signals
Information Kiosk
Redesigned to be approachable and practical, the new information kiosk features a modern layout, expanded storage, and improved visibility. Built with both staff and visitors in mind, the structure adheres to accessibility guidelines and height standards, ensuring ease of use for all. This design brings clarity, comfort, and inclusivity to the heart of downtown wayfinding.
Key Takeaways:
Stakeholders valued the depth of our research and how user insights were seamlessly translated into design. The presentations from all teams showcased a holistic vision of impact, sparking meaningful conversations around feasibility, implementation, and real-world use.
What I Learned:
This project pushed me to grow as both a designer and a teammate. I learned how to stay grounded in user needs while balancing practical constraints and creative goals. Collaborating across disciplines taught me how to navigate different perspectives and work toward a shared vision. I also gained a clearer understanding of how design systems function in real settings—building something consistent, adaptable, and genuinely useful to those maintaining it. This hands-on experience brought my design education into focus and gave me confidence moving forward!
Bringing It To Life!
Our final presentation showcased the full scope of our work—from initial research and ideation to testing and implementation. We walked stakeholders through the design rationale, usability improvements, and the real-world impact of our digital kiosk and reimagined information desk. Here's a glimpse into how we brought the vision to life.
CONTACT
NAVIGATE
Ready to build a better experience?
Rukhsar Khundmiri © 2025
Crafted between airport gates and timezones!
CONTACT
NAVIGATE
Ready to build a better experience?
Rukhsar Khundmiri © 2025
Crafted between airport gates and timezones!
Google feather
Reimagining the Google Nest and app as Google Feather, blending eco-conscious functionality with mindful design.
Interaction Design
Design Systems
UI Design
Looking For More?
Check out my next featured projects...
What We Struggled With:
19
did not find the kiosk
useful enough to continue use.
individuals
5
faced accessibility barriers
that limited their interaction.
individuals
22
preferred digital kiosks over information desks,
but the existing kiosks did not meet their expectations.
individuals
Users knew what they needed. Our job was to turn those insights into a kiosk experience that felt intuitive, accessible, and truly helpful.
These usability challenges highlighted the need for a better kiosk experience. To refine our approach, we put out a survey and received 105 responses. With these challenges in mind, we asked users what would make kiosks more useful, uncovering key features they wanted most to enhance effectiveness and engagement.
We began our process by conducting an in-house observational survey, where 25 multidisciplinary design students explored downtown Atlanta firsthand. This immersive experience helped our team empathize with kiosk users, identify usability pain points, and better understand the urban context we were designing for.
While we recognize the limitations and potential bias of testing within our own class, this exercise helped shape our initial direction and informed the broader primary research that followed.
Surveys:
Research
How Do Visitors Really Navigate Downtown Atlanta?
To design kiosks that genuinely serve the public, we began by listening. Through surveys and interviews with commuters, visitors, and locals, we uncovered real moments of need—what confuses people, what delights them, and how they move through the city. As Atlanta prepares for the 2026 FIFA World Cup, these insights became the foundation for our design decisions, grounding every feature in lived experience.
What Users Currently Expect From Kiosks:
Maps & Directions
92%
Transportation Schedules
63%
Local Events
52%
These insights provided a clear roadmap for our design process, allowing us to prioritize the most valued kiosk features. By directly addressing user preferences, we ensured our solutions were genuinely aligned with visitor expectations and city goals.
To better understand how the information booth and digital kiosk operate today and what they need to become, we interviewed kiosk staff and key downtown stakeholders. These conversations revealed operational gaps, safety concerns, and how these two touchpoints shape a visitor’s first impression of Atlanta.
Interviews:
Inside Perspectives That Shaped Our Design:
Safety Officer
"We rely on our phones to look things up. It’s not ideal when someone needs help fast.”
"For many visitors, this kiosk is the first thing they’ll engage with. It should reflect the best of Atlanta.”
Staff rely on personal phones and paper pamphlets to help visitors.
There’s no mounted screen or digital tool to quickly find information during peak moments.
Visual storytelling, multilingual support, and consistent branding were recurring themes.
The kiosk must seamlessly connect people to nearby businesses, events, and hotels.
Stakeholder
What Features Users Want in Kiosks:
#1
Real-Time
Updates
#2
Accessibility
Features
#3
Translation
Services
#4
Nearby
Businesses
#5
QR Code for Mobile
These quotes reflect real feedback from the people who interact with or manage the kiosks every day. Their insights helped us prioritize usability, access, and storytelling by grounding our design decisions in the real needs of downtown Atlanta and the people it serves. These perspectives ultimately guided our team in crafting a more human-centered experience for both staff and visitors.
Design & usability
How Can Design Bridge the Gaps We Discovered?
Grounded in user research and stakeholder insight, we designed a dual solution: a reimagined information booth and a digital kiosk system that responds to real needs. Our goal was to create a wayfinding experience that feels intuitive, accessible, and alive with relevant, real-time information.
Intuitive Wayfinding
#1
Universal Accessibility
#2
Live & Relevant Information
#3
Frictionless Interaction
#4
From Sketch to Screen
We began with layout explorations to bring our design priorities to life. These early wireframes built the foundation for an interface that gradually improved through structure, branding, and interaction. This phase set the stage for user testing and meaningful iteration.
Validating Through Feedback
After finalizing our layout in the second high-fidelity exploration, we were eager to start testing. Since we didn’t yet have access to a physical screen, we built a full-scale paper prototype of the kiosk to begin evaluating the design early.
We tested 7 individuals, asking them to interact with the layout, rearrange UI elements, and complete tasks based on real-world scenarios. Their input revealed natural interaction patterns and helped us refine the interface.
Physical Usability Testing:
User 1
User 2
User 3
User 1
User 2
User 3
User 1
User 2
User 3
User 1
User 2
User 3
After gathering insights from physical testing, we refined the interface and ran three rounds of Maze tests. Each round built on the last, helping us evaluate clarity, uncover usability issues, and fine-tune layout and interactions.
Usability Testing on Maze:
Heatmap: Home Screen
Heatmap: Selected Event Screen
Heatmap: Transit Screen
Heatmap: Language Screen
Out of 26 users, 84.6% located the concert by using either the nav bar’s search or the on-screen search bar, confirming that multiple entry points (including the “Happening Near You” carousel) support quick discovery.
Maze Task: Locate a concert.
An 88.1% misclick rate on the original language icon indicated user confusion. Replacing it with a more recognizable symbol boosted success rates, showing how vital clear visuals are for language toggles.
Maze Task: Switch the kiosk language to English.
20 out of 26 users consistently found the “Get Directions” option, indicating a layout that effectively guides visitors to the next step without confusion.
Maze Task: Get directions to the concert.
Users easily located navigation options through intuitive icons. However, 10 users expressed small images and unclear labels caused confusion, highlighting a need for clearer visuals and improved hierarchy.
Maze Task: Locate all available navigation routes.
Maze testing revealed specific usability issues. We made targeted adjustments by improving language toggles, clarifying icon meaning, and refining layout hierarchy to support smoother user flows. One significant change was shifting the navigation bar from the right to the left, which aligned better with natural hand placement and eye-scanning behavior, leading to improved icon discoverability and fewer missed clicks across core tasks.
Designing with Purpose
We anchored our design process in four clear pillars, translating pain points into purposeful interactions for both visitors and support staff.
Low-fi
Early sketches exploring layout, navigation flow, and content hierarchy.
Mid-fi
Basic wireframes defining structure, touch targets, and core interactions.
High-fi Exploration 1
Applied brand elements and structure to enhance clarity and support accessible content delivery.
Introduced dark mode, refined headers, and restructured categories for better hierarchy.
High-fi Exploration 2
Final Outcome
What Does an Inclusive, City-Ready Solution Look Like?
After months of research, design, and iteration, we delivered a final experience that connects user needs with city infrastructure, including transportation, public safety, and information access. The redesigned kiosk interface and information booth prioritize real-time support, clarity, and accessibility. The result is a smarter, more human-centered wayfinding system for downtown Atlanta. Below are a few final screens and flows that bring this vision to life.
Transit & Map
Built for speed and clarity, this screen simplifies city navigation with live maps, key transit icons, and intuitive directions.
Home & Accessibility
Quick access to key destinations, live updates, and events. Built-in accessibility options like font sizing and wheelchair mode support inclusive use.
Design System
To support a consistent, accessible, and future-ready experience, we created a design system tailored for the kiosk and information desk. This system brought structure to our components, clarity to our visuals, and flexibility for developer handoff. Inspired by real-world wayfinding, it was designed not just to look good, but to guide users and grow with the city.
I grounded our system in a simple metaphor — Signals, Paths, and Systems — reflecting how urban wayfinding works. Each layer helps users navigate, understand, and move through the interface with ease.
Signals:
Visual cues that speak without explanation. Like city signs, these elements create instant recognition and reduce cognitive load.
Includes: color, typography, icons, and key components.
Paths:
Reusable layouts that shape how users move through the interface. Like roads and intersections, they guide navigation and define structure.
Includes: screen templates, modals, and documentation.
Systems:
The layer that connects it all. Like a city’s transit system, it ensures the experience is accessible, cohesive, and ready to scale.
Includes: flows, animations, accessibility, and branding.
Signals:
Signals are the foundational UI elements in our design system—visual building blocks like color, typography, icons, and core components that can’t be broken down any further. They’re the first things users notice, designed to guide attention, build recognition, and reduce friction from the very first interaction.
Up Next:
Paths
Icons
Components
Back to:
Systems
Paths:
Paths are the reusable layouts and structural patterns that guide how users move through the interface. Just like roads and intersections in a city, they create flow, set expectations, and help users navigate confidently. These include screen templates, modal patterns, and documentation that define layout logic and ensure consistency across every interaction.
Lastly:
Systems
Back to:
Signals
Documentation: Home Screen
Snippet Of
Modals
Templates
Systems:
Systems are the connective layer that brings everything together. Like a city's public infrastructure, this layer ensures every part of the interface is accessible, coordinated, and built to scale. It includes flows, animations, branding, and accessibility modes—covering edge cases, enhancing usability, and preparing the product for real-world use and developer handoff.
Start Again:
Signals
Back to:
Paths
Flows
Branding
Accessibility Modes
Wheelchair Mode Animation
Signals:
Signals are the foundational UI elements in our design system—visual building blocks like color, typography, icons, and core components that can’t be broken down any further. They’re the first things users notice, designed to guide attention, build recognition, and reduce friction from the very first interaction.
Up Next:
Paths
Icons
Components
Back to:
Systems
Paths:
Paths are the reusable layouts and structural patterns that guide how users move through the interface. Just like roads and intersections in a city, they create flow, set expectations, and help users navigate confidently. These include screen templates, modal patterns, and documentation that define layout logic and ensure consistency across every interaction.
Lastly:
Systems
Back to:
Signals
Documentation: Home Screen
Snippet Of
Modals
Templates
Systems:
Systems are the connective layer that brings everything together. Like a city's public infrastructure, this layer ensures every part of the interface is accessible, coordinated, and built to scale. It includes flows, animations, branding, and accessibility modes—covering edge cases, enhancing usability, and preparing the product for real-world use and developer handoff.
Start Again:
Signals
Back to:
Paths
Flows
Branding
Accessibility Modes
Wheelchair Mode Animation
Signals:
Signals are the foundational UI elements in our design system—visual building blocks like color, typography, icons, and core components that can’t be broken down any further. They’re the first things users notice, designed to guide attention, build recognition, and reduce friction from the very first interaction.
Up Next:
Paths
Icons
Components
Back to:
Systems
Paths:
Paths are the reusable layouts and structural patterns that guide how users move through the interface. Just like roads and intersections in a city, they create flow, set expectations, and help users navigate confidently. These include screen templates, modal patterns, and documentation that define layout logic and ensure consistency across every interaction.
Lastly:
Systems
Back to:
Signals
Documentation: Home Screen
Snippet Of
Modals
Templates
Systems:
Systems are the connective layer that brings everything together. Like a city's public infrastructure, this layer ensures every part of the interface is accessible, coordinated, and built to scale. It includes flows, animations, branding, and accessibility modes—covering edge cases, enhancing usability, and preparing the product for real-world use and developer handoff.
Start Again:
Signals
Back to:
Paths
Flows
Branding
Accessibility Modes
Wheelchair Mode Animation
Signals:
Signals are the foundational UI elements in our design system—visual building blocks like color, typography, icons, and core components that can’t be broken down any further. They’re the first things users notice, designed to guide attention, build recognition, and reduce friction from the very first interaction.
Up Next:
Paths
Icons
Components
Back to:
Systems
Paths:
Paths are the reusable layouts and structural patterns that guide how users move through the interface. Just like roads and intersections in a city, they create flow, set expectations, and help users navigate confidently. These include screen templates, modal patterns, and documentation that define layout logic and ensure consistency across every interaction.
Lastly:
Systems
Back to:
Signals
Documentation: Home Screen
Snippet Of
Modals
Templates
Systems:
Systems are the connective layer that brings everything together. Like a city's public infrastructure, this layer ensures every part of the interface is accessible, coordinated, and built to scale. It includes flows, animations, branding, and accessibility modes—covering edge cases, enhancing usability, and preparing the product for real-world use and developer handoff.
Start Again:
Signals
Back to:
Paths
Flows
Branding
Accessibility Modes
Wheelchair Mode Animation