In this project, I designed and prototyped the “Crosswalks” experience using Figma, translating research insights into a visual UX concept and front-end-ready design system. The outcome is a clean, engaging, and accessible prototype that demonstrates my ability to bridge design thinking with development readiness.
As part of my studies in UX and Urban Technology, I recognized that pedestrian-infrastructure experiences (like crosswalks) often lack the user-centered design, clarity, and accessibility that digital interfaces receive. The challenge: how might we design a pedestrian crossing experience (or analogously, a web/digital interface) that elevates clarity, engagement, and inclusive usability?
Through the “Crosswalks” project, I aimed to apply UX design principles to a real-world “crossing” scenario—mapping behaviors, environments, and touchpoints—and then create a high-fidelity Figma design that could be implemented in code.
I conducted a competitive/analogous review of built-environment designs (crosswalks, pedestrian zones) and digital interface patterns to understand how people engage, move, pause, and orient themselves in transitional spaces. For instance, how cues like signals, stripped markings, and tactile feedback guide behavior in urban crossings.
I surveyed/observed users (or sketched behavior flows) of crossings and transitional journeys: arrival → wait → cross → departure. I asked: “What signals tell the user it’s safe to cross?” “What confusion points exist?”
I mapped the user journey for a “crossing scenario” — e.g., pedestrian arrives, waits, perceives signals/feedback, crosses, lands on other side.
I sketched layout options in Figma: hero board of “approach” screen, notification/feedback elements (e.g., “Ready to cross”), transition states, and landing/destination screens.
I created mind-maps linking user states (waiting, proceeding, arriving) with design components (visual indicator, progress feedback, accessibility cue).
Decision: adopt a minimalist, clean visual aesthetic: strong typography, ample white space, clear contrast, single accent colour for action/feedback. This aligns with my broader design/development approach—clean interface, user-centric, front-end readiness.
Structure of prototype:
Each screen is designed for clarity, accessibility, responsive adaptation, and developer handoff.
In Figma I created low-fidelity wireframes for each screen/state, then moved to mid-fidelity with content/layout refinement, and finally high-fidelity with full styling.
I invited a small set of users to interact with the Figma prototype on desktop and mobile and asked key tasks: “You’re at the approach screen; how do you know when to proceed?”, “How does the UI signal readiness?”, “How comfortable do you feel when you land on the destination screen?”
Iterations:
After iteration: Users found the flow more intuitive, transition cues clearer, and the prototype felt more inclusive and usable across devices.
The final Figma prototype delivers a compelling UX concept for “crossing” flows, bridging design and development readiness — reflecting my dual competency in UX design and front-end development.
The project strengthened my ability to: (a) translate behavioral research into design flows; (b) craft interactive prototypes in Figma that communicate state transitions and user journey; (c) define modular, developer-friendly components with accessibility and responsiveness in mind.
In my portfolio, this project showcases how I think beyond static pages — designing experiences that reflect interaction, motion, state, and user transitions, a valuable asset for roles that blend UX and front-end development.
For potential employers/internships, it underlines: I can handle full cycle from ideation → prototyping → design system → handoff, with an eye on accessibility and front-end implementation.
What I learned: Treating “state transitions” (approach → wait → action → land) as first-class design elements is essential. Bridging design to development early helps streamline handoff and ensures design integrity in code.
If I were to revisit this project: incorporate user testing with more diverse participants (including users with accessibility needs), gather metrics on flow intuitiveness, and build a lightweight coded prototype (HTML/CSS/JS) to validate real-world interaction. Subtle micro-animations could enhance feedback and motion cues while maintaining accessibility.
I’m proud of shaping this concept to function clearly for a range of users, aligning with my values of clarity, accessibility, clean front-end structure, and thoughtful UX. Moving forward, I’ll continue building on these competencies as I pursue UX + front-end development opportunities.