BFI’s goal with Buffi is to leverage public-purpose AI and civic technology to help leaders build more sustainable, resilient, and equitable cities.
As a Product Designer at the Better Futures Institute, I worked alongside two designers and multiple engineers to build the platform and its foundational design system from the ground up. My primary focus was leading the end-to-end design for the sources intake flow and live-chat file editing capabilities, transforming dense data management into a low-friction, intuitive experience with the ultimate vision of scaling to cities nationwide.
PROBLEM SPACE
City governments generate massive volumes of unstructured data across departments, making institutional knowledge difficult to access and manage. Non-technical municipal staff needed a centralized workspace where they could upload, label, and interact with complex datasets through natural language chat—without breaking their workflow or relying on complex database queries.
CORE OBJECTIVES
Build 0 to 1
Establish a cohesive web interface and underlying design system from scratch.
Streamline Data Intake
Create an intuitive source-labeling architecture that gives users real-time visibility into file processing
In-Context File Management
Design an inline editing experience within the live chat interface so users can edit and manage uploaded sources directly.
To support the platform's rapid evolution, we built a modular design system in Figma. I contributed to defining core component libraries, visual tokens, state behaviors and accessible UI patterns to ensure scalability across both desktop and mobile platforms.
RESEARCH & DISCOVERY
Analyzed patterns across modern AI tools (like Claude Artifacts, ChatGPT, and Notion AI) to evaluate how platforms handle live document references, inline file previews, and chat-adjacent workspaces.
Identified a common pattern gap: most tools force users to open separate modal overlays or tab windows to view or edit files, breaking the conversational flow.
How might we enable municipal staff to seamlessly upload, manage, and edit internal datasets directly within an AI chat interface without breaking their operational flow?
MAPPING THE WORKFLOW: DESIGNING A ZERO-FAIL DATA PIPELINE
To bridge the gap between messy raw government files and clean AI assets, I engineered a highly structured asynchronous pipeline that visualizes data states in real-time. The interaction flow follows a strict 5 step logic:
ESTABLISHING A BRAND THAT’S STILL TAKING SHAPE
In the midst of architecting these complex flows and figuring out the system as whole, we also had to place emphasis on visual styling and establishing brand consistencies, since not only the product was taking shape but the brand was as well.
FROM CONCEPT TO LAUNCH
Building Buffi AI meant taking ambiguous platform requirements and translating them into a structured, production-ready system through rapid design sprints. By co-creating a foundational design system and partnering closely with engineers on technical constraints, we successfully shipped the platform’s core interface baseline—laying a scalable foundation for future municipal rollouts.
Review Queue
The Review Queue isolates datasets that require human attention. By providing clear summaries of files needing review alongside flagged issues, users can efficiently triage errors, verify metadata, and approve transit data for AI integration.
9
Issues
32
Needs Review
Human-in-the-Loop
An interactive split workspace that pairs AI error-detection with human oversight. The system highlights data discrepancies directly within spreadsheet sources, offers suggested fixes, and lets users approve or adjust records before submitting verified datasets to the AI context.
Interactive AI Chat & Visualization Canvas
An intelligent conversational interface that transforms complex civic queries into dynamic visual outputs. Beyond standard text responses, the chat canvas generates real-time data visualizers—such as donut charts, GIS map overlays, and interactive split-screen panels—allowing users to explore spatial and statistical data directly within their conversation.
How did service levels change?
During Period B, Route 20 operated fewer average scheduled trips and service hours than during Period A. I’ve created a breakdown of the changes below.
Scheduled Trips, Service Hours and Productivity
Data Governance & Terms Compliance
A data governance checkpoint that ensures legal compliance and privacy standards before file ingestion. Users define submission metadata, set AI training permissions, and accept terms to maintain ethical data handling across the platform.
Sources — Drag and drop your files
Designed an intuitive entry point for data intake featuring clear drag-and-drop file targets, flexible view controls (grid/list), and quick-action filters (Type, People, Edited) to help municipal teams structure raw datasets efficiently.
Design System
Built a foundational Figma design system to unify Buffi AI’s interface across web and mobile. Designed a complete library of accessible UI components, custom data visualizers, interactive chat states, and design tokens to streamline developer handoff and support future feature expansions.
Better Futures Institute
PRODUCT DESIGNER
Designing Trustworthy Governance for Civic AI Platforms.
Public agencies collect astronomical quantities of municipal information, but getting that data into a clean, compliant, and trustworthy state for AI models is where most civic tech initiatives break down. Partnering with San Antonio government officials, our design team applied design thinking methodologies to build a robust system that guarantees data integrity and security before an AI model ever touches it.
DURATION
Feb - May 2026
PLATFORMS
Desktop, Web
COLLABORATORS
Jon Rodz, Alex Bazan
10+
STAKEHOLDERS VALIDATED
0-100
PLATFORM
100+
COMPONENTS BUILT
10
WEEKS TO BUILD
Key Takeaways & Design Strategy
Building a public-purpose AI platform proved that human-in-the-loop design is essential for establishing user trust in civic technology. By pairing upfront data governance with side-by-side visualization tools, we gave non-technical city staff full control over AI inputs while seamlessly converting static municipal datasets into actionable policy insights.
How did i grow
I drove design strategy by pairing industry-standard AI patterns with constant engineering alignment to design around LLM and dataset constraints. By facilitating feedback sessions directly with municipal partners, I validated edge cases early to ensure every shipped flow served the real-world operational needs of city staff.
Live product showcase
I presented Buffi AI’s data ingestion and human-in-the-loop workflows to civic leaders and stakeholders at BFI Demo Day—validating core interaction patterns and securing leadership alignment on data governance. Click here to learn more about my experience!
FEEDBACK FROM TEAM AND STAKEHOLDERS
Beto Gomez
CEO of Better Futures Institute
“Itzel took feedback from engineering and stakeholders and translated it into thoughtful, polished designs that strengthened both our product vision and presentations”
Jon Rodz
Founding Product Designer
“Itzél joined us early and helped drive our product from 0 to 100 with incredible design craft. She is the exact kind of collaborative partner you want anchoring a product team.”
Ruchika Sharma
Software Engineer
“Itzel is the kind of designer who makes collaboration easy and constantly raises the quality of the entire team!