Screen from a fictional website on a pink gradient background
Screen from a fictional website on a pink gradient background

CityFlow

UX/UI DESIGN

UX/UI DESIGN

PRODUCT DEFINITION

PRODUCT DEFINITION

STRATEGY

STRATEGY

Overview

CityFlow is a digital tool that helps City and Urban Planners better understand their city and where issues like high emission areas, high traffic congestion areas and possible accident-dense areas lie in their city. CityFlow helps locate these areas and via GenAI capabilities provide recommended projects to the city and urban planners to help solve these issues and then finally help them priorities them, through an impact assessment.

Over 5 weeks, I helped BCG, alongside my UX Research colleague to define CityFlow as a product, through UX research, concept development and final design which led to development a PoC concept of CityFlow.

Challange

  • By 2050, 70% of the world's population will live in cities, increasing urban challenges like traffic, accidents, and emissions.

  • Urban planners face complex, multi-faceted challenges, including traffic congestion, accidents, and rising emission

Urban planners struggle with:

  • Identifying Issues – Problems often have multiple causes.

  • Project Planning – Deciding how to address these challenges.

  • Slow Simulations – Impact assessments take months, delaying decisions.

  • High Costs & Long Timelines – Projects take years and cost millions.

  • Approval Hurdles – Requires clear, data-driven proposals for policymakers.

Abstract image used as a placeholder for this design project
Abstract image used as a placeholder for this design project

Solution

  • Democratizing Insights – Unique visualizations make data easy to understand, replacing months of complex simulations.

  • Estimated Scenario Creation – Provides quick estimations instead of time-consuming, detailed impact reports.

  • Scenario Management – Users can prioritize key factors like public opinion, ROI, or land use.

  • Automated Data Ingestion – Streamlines data flow, breaking down departmental silos.

  • Fast & Scalable Processing – Processes large datasets with speed, accuracy, and clarity.

  • Generative AI Queries – Translates user questions into SQL queries, delivering insights in a chat-based format.

Approach

We followed a structured Design Thinking & UX Design approach, dividing the 5-week timeline into distinct phases:

Week 1 – Research & Foundation
  • Gathered and analyzed existing materials from the team.

  • Conducted market and competitor research with the VA.

  • Defined product vision and key concepts through workshops.

  • Identified key features, target users, and drafted personas & user journeys.

Week 2 – Refinement & Ideation
  • Refined user personas and user journeys.

  • Conducted expert interviews (3 urban planners, 2 internal SMEs).

  • Ran ideation workshops, prioritizing features using the DVF framework (Desirability, Viability, Feasibility).

Week 3 – Wireframing & Concept Testing
  • Designed low-fidelity wireframes and modular UI components.

  • Prepared concept testing materials (screeners, discussion guides) to validate design direction.

Week 4 – Iteration & High-Fidelity Design
  • Refined designs based on user and stakeholder feedback.

  • Created high-fidelity screens illustrating key user journey moments.

  • Developed a video script & storyboard for concept validation.

  • Conducted usability testing to review wording & data visualizations.

Week 5 – Finalization & Handover
  • Built a high-fidelity clickable prototype & concept video.

  • Finalized UX research findings and refined data visualizations.

  • Led a 2-day walkthrough handover with the engineering team, resulting in a PoC build of the prototype.

Abstract image used as a placeholder for this design project
Abstract image used as a placeholder for this design project

Decisions

CityFlow Structure:
Built around Explore, Experiment & Prioritise to help secure funding.

  • Initial Design:

    • Adaptive dashboard adjusting KPIs as planners tweaked scenarios.

    • Aimed to simplify a months-long, tedious funding process.

  • Expert Feedback:

    • Liked the concept but felt it didn’t fully speed up funding approval.

  • Key Iteration:

    • Shifted focus to comparing multiple projects & showcasing ROI impact over time.

    • Avoided excessive data deep dives, which weren’t useful for planners.

  • Additional Feature:

    • Export function to generate executive summary reports for board meetings.

Result & Impact

  • Proof of Concept (PoC): Engineering team developed CityFlow into a working PoC.

  • Wider Adoption: Used in multiple BCG projects, driving city planning innovation projets.

  • Rapid Development: Progressed from brainstorming to functional code in just five weeks.

  • Lasting Impact: Showcased potential to enhance urban planning and decision-making.

Abstract image used as a placeholder for this design project
Abstract image used as a placeholder for this design project