top of page
blue hero metro sim citi.png

MetroSim

Desktop SaaS Urban Simulation Tool UX Design

        Due to an NDA, I’ve renamed the project [MetroSim] for this case study. 

Quick Summary​

Challenge: MetroSim's powerful simulation platform was held back by confusing navigation and an incomplete interface.

​

Outcome: Newly designed workflows and interfaces led to a 94% task success rate in usability tests, with users describing the experience as intuitive and even “fun.”

Overview

MetroSim is an interactive community simulation platform designed for urban planners, policymakers, and researchers to model scenarios like traffic patterns, urban development, and pandemic responses.

By visualizing how changes impact communities, it helps stakeholders make data-driven decisions. The platform needed a user-friendly, engaging interface to support complex workflows without intimidating its diverse audience.

UI/UX Design for Urban Simulation Tool

Example of one of the Problems

The original interface made it difficult for users to navigate the map editor and understand how to create, import, or modify maps effectively.

Solution

I designed the Edit Maps experience to prioritize clarity and flow. I created visually distinct icons, reorganized user pathways, and added visual hierarchy to help users understand their options at a glance. 

Edit Maps: Interface Evolution

Early Design

​

The ask was to continue with a pinball game look, but to show the user the three options, and where to go next.

image.png
image.png

After Testing and Prototypes

​

Users said they needed a more clear indication of what they were supposed to do.  Adding the large circle in the middle with Maps and the icons helped.

citisketch edit-3_edited.jpg

The Challenge

While MetroSim's core concept was solid, it only existed as a collection of ideas and early concepts. The existing prototype suffered from confusing navigation, unclear visual hierarchy, and poor accessibility. Stakeholders wanted the tool to feel approachable—even “fun”—but also robust enough for professional research and planning. The challenge was to bring these complex ideas to life on screen in a way that guided users smoothly through intricate tasks like building scenarios with layered datasets.

Role​

​

Sole UI/UX Designer

​​

My Contributions​

​

  • Conducted heuristic evaluations to identify usability pain points.

  • Mapped user journeys and created new user flows for key tasks.

  • Designed high-fidelity wireframes and interactive prototypes covering ~20 screens and over 50 custom icons.

  • Built an atomic design system to ensure visual consistency.

  • Led accessibility reviews to improve clarity and inclusivity.

  • Created walkthroughs and documentation to onboard new users.

  • Collaborated closely with a developer, a graphic designer, and a project manager—all working remotely—communicating through detailed documentation and regular video calls.

The Outcome

  • Achieved a 94% task success rate in usability tests, demonstrating that redesigned flows significantly improved learnability and efficiency.

  • User testing participants described the interface as intuitive and enjoyable, thanks to engaging visual elements.

  • Delivered comprehensive UI assets and prototypes, ready for development integration.

  • The redesigned platform supported complex tasks like importing maps, filtering community elements, and comparing “what-if” scenarios across time ranges, helping users visualize outcomes of interventions like school closures or transit changes.

How might we configure a pandemic scenario from the map?

  • We used an A/B comparison for two scenarios

  • This screen is one of the final stages in building the scenario.

  •  The pandemic settings were to be configured and set on this screen.

Pandemic-Settings-Metrics_edited.jpg

​Tools & Skills Used

  • Figma & XD (design system, wireframes, prototypes)

  • Adobe Illustrator & Photoshop (custom icon design)

  • User research & heuristic evaluation

  • Accessibility best practices 

  • Remote collaboration tools (Zoom, Slack, shared drives)

What I Learned

  • Testing revealed that small changes to icon spacing and text labels greatly improved task success.

  • Collaborating with many developers on this project helped me to understand their challenges when I would ask for something new and over the time we worked together, I learned a lot.

  • In general, there is a lot to convey in this year long project which I enjoyed working on, and would be happy to discuss more.

bottom of page