Working at Decision Theatre Network
My Journey as a UI/UX Designer at DT!
Role & Responsibilities
As a UX/UI Designer at Decision Theatre Network, I contributed to multiple projects including CuRVE, Helio, and NexView.
My key responsibilities included:
Interaction Design
Creating user flows, prototypes, and role-based experiences tailored to both technical and non-technical users.
Data Visualization
Designing dashboards and interactive charts to communicate complex datasets
Accessibility & Usability
Applying accessibility guidelines to ensure inclusivity and clarity across audiences.
Collaboration
Partnering closely with developers, researchers, and clients to align designs with stakeholder needs and technical feasibility.
What is CuRVE?
CuRVE (Colorado River Visualization Environment) is an interactive tool that displays the potential local impacts of Colorado River water shortages on:
-
Communities (e.g., HOAs, households),
-
Agricultural districts,
-
Tribal communities, and
-
Industries across Arizona.
Our client, the Kyl Water Center, asked us to redesign CuRVE with three goals:
-
Update data points to reflect new hydrological scenarios.
-
Improve usability for multiple types of users.
-
Enhance interactivity and client satisfaction.
Tools
-
Adobe XD
-
Miro
My Role
-
UI/UX Designer
-
UX Researcher
Team
-
2 UX/UI
Designers -
1 Graphic Designer
-
Product Manager
-
Developers
Partners
Kyl Water Center
Defining Problem
The original CuRVE tool provided raw data but had critical issues:
-
Dense, overwhelming visuals and data.
-
One-size-fits-all design that didn’t address different audiences’ needs.
-
Limited interactivity, making comparisons and forecasts difficult.
From prior + new data analysis, I extracted user questions such as:
-
“How much water will my community lose under shortages?”
-
“What sources of water will replace Colorado River supplies?”
-
“What is the biggest water use in my sector or community?”
I framed these as How Might We statements:
-
How might we help the general public make sense of water shortages without technical expertise?
-
How might we support water managers in scenario planning across years?
-
How might we give media professionals reliable, visual stories to report?
User Personas
We defined three personas representing the range of users:
-
Abdool (Community Member) -Limited knowledge of water law, wants to know how shortages will affect his daily life.
-
Michelle (Water Manager) - Technical expert, responsible for planning municipal water supply under multiple scenarios.
-
John (Journalist) - Moderate knowledge, needs clear visuals and credible data for public reporting.
This mix of technical vs non-technical users guided us to design two distinct user flows.
Design Process
To manage competing requirements, I used MoSCoW prioritization with stakeholders:
-
Must Have: Clear scenario comparisons, role-based views, interactive maps.
-
Should Have: Year slider, for past and future prediction data
-
Could Have: Rich infographics
-
Won’t Have (for now): Advanced 3D visualizations
Information Architecture & User Flows
We identified that one flow could not serve all audiences effectively, so we created two tailored experiences:
-
General Public View
-
Landing page with high-level stats: population served, % of water from Colorado River, portfolio pie chart.
-
Focused on accessibility and readability for non-technical users (large type, simplified terms, minimal filters).
-
Goal: Help users like Abdool answer “How will this affect my household/community?”
2. Technical View (Role-based login)
-
Side menu navigation with deeper info:
-
Supply portfolios over time,
-
Sectoral water usage (irrigation, mining, municipal),
-
Scenario planning by year.
-
-
Added filters so experts could toggle between sectors (e.g., irrigation vs power vs mining).
-
Goal: Empower water managers like Michelle with decision-support tools.
-
This IA structure helped users see only what’s relevant to their role, reducing cognitive overload while preserving data accuracy.
Wireframing
The initial phase involved creating a moodboard to align stakeholders on the design direction. We explored dashboard and landing page ideas from reference tools, focusing on layouts that balanced data density with readability.
-
Wireframing:
-
Created low- and high-fidelity wireframes in Adobe XD.
-
Iterated on layouts for maps and charts, testing multiple placements for legends, filters, and year sliders.
-
Compared dashboard vs landing page layouts to find the right balance between exploration and direct insights.
-
-
Design System & Material UI:
-
Extended an existing style guide (typography, color palette, spacing, margins/padding).
-
Created new icons and menu components consistent with the system (e.g., filter buttons for map sectors like power, irrigation, mining).
-
Applied Material UI standards for buttons, form inputs, and responsive behavior, ensuring consistency across devices.
-
Key Design Decisions & Trade-offs
Tile Map vs Geographic Map
-
Stakeholder need: An interactive, engaging map that highlighted Arizona cities.
-
Problem: Geographic maps became cluttered, especially with smaller towns.
-
Solution: I suggested a honeycomb tile map with equally sized hexagons for each city, easier comparison, and still visually engaging.
-
Reasoning: Based on cognitive load theory, the tile map reduced scanning effort. It also matched stakeholder desire for “something interactive” without overwhelming users.
This map depicts the Central Arizona Colorado River Water Users. Through a combination of HTML, CSS, and JavaScript coding on CodePen, I developed the map.
Chart Selection
-
Pie charts: Showed water portfolio composition clearly.
-
Stacked area: Compared usage across different cities in Central Arizona
-
Line/bar charts: Showed shortages across years 2022–2026.
-
Trade-off: Sankey diagrams looked impressive but confused non-technical users in testing. We prioritized clarity over visual novelty.
Yearly Slider
-
Added an interactive time slider (2022–2026) for year-by-year shortage projections.
-
Reduced clicks vs dropdown selection for faster decision-making.
-
Enabling Michelle to compare long-term scenarios quickly.
Role-Based Views & Navigation
-
Trade-off: Designing two views meant more development complexity.
-
Reasoning: Essential to support both non-technical comprehension and expert analysis.
Validation & Outcomes
Validation
-
Stakeholder Walkthroughs: Bi-weekly reviews would include taking feedback on the presented designs. Later on, conducted usability testing with tasks -
-
“Find how much water Scottsdale will lose in 2025.”
-
“Compare industrial vs agricultural usage in 2026.”
-
Observed completion time, number of clicks, and hesitation points.
-
Water managers tested filters, sliders, scenarios and accuracy of data
-
-
Cross-Browser QA: Validated on Chrome, Firefox, Safari to ensure consistent interactions.
Outcome
-
Qualitative: Stakeholders said the tool was “much easier to explain in presentations.”
-
Adoption: Used in community and organization meetings.
-
Efficiency: Reduced multi-step interactions to one click.
Metrics I Would Track
-
Task Success Rate: % of users completing a given task (e.g., find water loss for city).
-
Time-on-Task: Time taken to locate key insights (old vs redesigned tool).
-
Error Rate: Misinterpretation of charts or confusion using filters.
Learnings
01
Visualization choice impacts cognition, clarity beats novelty in data-heavy tools.
03
Progressive disclosure is essential when designing for mixed audiences.
02
Early collaboration with developers ensures fidelity between design intent and delivery
04
Prioritization builds alignment across stakeholders with competing goals
This project was not only a chance to enhance my skills but also a reminder of the ever-evolving nature of UX design. It reinforced the importance of constant learning and adaptability in this dynamic field.