HUD inspector using the Housing Help platform on a tablet during a real inspection

SCADpro × Deloitte, Case Study

Housing Help

Deloitte × SCADpro Internship  ·  Prototyping Lead & Design Systems Lead

Design Systems Prototyping AI Integration Usability Testing Gov-Tech
All projects
Role Prototyping Lead · Design Systems Lead
Timeline January – April 2026 · 15 Weeks
Client HUD Atlanta Regional Office · Deloitte Digital via SCADpro
Tools Figma · Figma Make · Claude · Claude Code · NotebookLM · Granola.ai · Nanobanana · Google Stitch

The Challenge

HUD (U.S. Department of Housing and Urban Development) is the federal agency that funds and regulates affordable housing across the United States. Our primary stakeholder was HUD's Atlanta Regional Office, which oversees federal housing programs across eight southeastern states, including Georgia, Alabama, Florida, and Tennessee.

HUD doesn't operate the housing itself. It subcontracts the day-to-day management and operation of each property to landlords, who are legally responsible for keeping every unit in compliant condition. Inspectors enforce that contract, running annual inspections and responding whenever a deficiency is reported. If a landlord fails to repair within the regulated timeframes, they lose the right to operate the housing.

NSPIRE (National Standards for the Physical Inspection of Real Estate) is HUD's new federal inspection framework. The transition to NSPIRE created a fragmented, high-friction process between inspectors, landlords, and tenants, with no standardized digital platform connecting the three. Deloitte, working with HUD's Atlanta Regional Office, tasked our SCADpro team with designing an AI-powered mobile platform to bridge that gap. Because NSPIRE is a federal standard, the platform is designed to scale to any regulated housing group operating under it, nationwide, not just the Southeast.

Client

HUD Atlanta Regional Office · Deloitte Digital

Program

SCADpro Professional Internship

My Role

Prototyping Lead · Design Systems Lead

Team Size

~25 people (Design, Research, Marketing, Operations)

Duration

15 weeks (Jan – Apr 2026)

Tools

Figma · Figma Make · Claude · Claude Code · NotebookLM · Granola.ai · Nanobanana · Google Stitch

Deliverables

Design System · Interactive Prototypes · User Flows · Research Support

What I Owned

As Prototyping Lead and Design Systems Lead, I owned the structural backbone of the product, from component architecture to interactive prototypes. I also contributed to research using AI tools, designed the AI interaction model, and led the resolution of a branding crisis mid-project. My work spanned strategy, systems thinking, and hands-on design execution.

01

Design System Architecture

Modular, brand-agnostic system built from day one

02

Interactive Prototyping

Figma + Framer prototypes for 3 user roles

03

AI Interaction Design

Defined how AI assists inspectors without replacing judgment

04

Branding Strategy Resolution

Role-based color system that resolved team deadlock

05

Dev Handoff & Validation

Component structure praised by Deloitte's dev lead

The UX & Research Team

I worked inside a tight UX and research pod embedded in the broader ~25-person SCADpro × Deloitte team.

Prototyping · Design Systems Lead

Vicente Hernáiz

Component architecture, interactive prototypes, AI interaction model, branding resolution

UX Research Lead

Valeria Munera

Led user research across tenants, landlords, and inspectors

UX Logic Lead

Catelynn Kai

Owned UX logic and cross-role flow architecture

UX Designer

Xander Grant

UX/UI design execution across the three role experiences

UX Researcher

Alex Wang

Usability testing and research operations support

Understanding the Ecosystem

The inspection ecosystem involves tightly coupled stakeholders with conflicting needs. Our research revealed a vicious cycle: tenants distrust management, so they underreport issues. Landlords receive inaccurate data, so they can't prioritize repairs. Inspectors are buried in documentation overhead. The system erodes itself.

Stakeholder Mapping

Before jumping into personas, we mapped every actor in the NSPIRE ecosystem, how they depend on each other, and where the friction lived. Four roles carry the entire system.

Regulator

HUD Atlanta Regional Office

Sets NSPIRE standards, funds housing programs across 8 southeastern states, and revokes operation rights when landlords fail to comply.

Operator

Landlords

Subcontracted by HUD to manage and maintain the properties. Carry the repair responsibility and the legal liability.

Enforcer

Inspectors

Run annual and event-driven inspections. Trigger the compliance clock whenever a deficiency is found.

End user

Tenants

Live in the housing, report issues, and are the ones most affected when the system fails.

From Stakeholders to Personas

Mapping the ecosystem told us who was in the system. To design for them, we built short-form personas grounded in research, one per role, so every design decision could trace back to a specific motivation or pain point.

Maya Thompson

Tenant

Long-time renter in a HUD-regulated unit. Juggles two jobs and a family at home. Has reported issues before and watched them go unanswered.

  • A safe, compliant home for her family
  • Being heard when something breaks
  • Reported issues ignored or delayed
  • Fear of reprisal from the landlord
  • No visibility into whether an inspector will come

Derek Reyes

Inspector

Field inspector covering dozens of properties a month for a regional housing authority. Already uses his own inspection and team-management software.

  • Reduce travel time and paperwork
  • Focus expertise on real deficiencies, not minor ones
  • Reluctant to migrate from existing tools
  • Duplicate data entry across systems
  • Unnecessary on-site visits for minor issues

Angela Carter

Landlord

Manages a small portfolio of HUD-regulated rental properties. Operates on tight margins and cannot afford to lose her right to operate.

  • Keep every unit NSPIRE-compliant
  • Preserve the right to operate the housing
  • Prioritize repairs with clear, accurate data
  • Inaccurate or late information on deficiencies
  • 24-hour compliance window on life-threatening issues
  • Penalty and loss of license if repairs miss the regulated timeframe

HUD Atlanta Regional Office

Authority

Federal body regulating HUD housing across eight southeastern states. Accountable to Congress and to the residents the program is meant to protect.

  • NSPIRE compliance at national scale
  • Auditable data trail across jurisdictions
  • Reduce reporting fraud and blind spots
  • Fragmented data across landlords and inspectors
  • No unified digital trail before NSPIRE
  • Delayed remediation of life-threatening deficiencies
01
"Lack of faith in management to solve issues.", Tenant survey response. Tenants felt ignored and feared reprisal for reporting deficiencies.
02
Data Imbalance Constraint, Strong tenant research data, but limited direct access to inspectors (controlled by Deloitte). This shaped our validation strategy.
03
Competitive Gap, Legacy systems (Emphasys) serve housing authorities but exclude tenants and landlords. Modern tools (Spectora) suffer from feature bloat. No solution connects all three stakeholders.
04
24-Hour Compliance Window, NSPIRE mandates life-threatening deficiencies be corrected within 24 hours. This became the platform's core value proposition.
05
Visual-First Inspection Behavior, Inspectors don't work through a point-by-point checklist. They scan each space visually, look for deficiencies, and annotate as they go. This reframed the entire inspection logic: we redesigned the flow around visual capture and on-the-spot annotation instead of linear form completion.
06
Inspectors Resist System Migration, Across multiple interviews, inspectors told us they already rely on their own inspection and team-management software and had no intention of switching, the complexity of transitioning outweighed any upside. Their real pain points were reducing travel time and the hours lost inspecting minor issues, not the inspection workflow itself. This pushed us to design around their existing habits, not replace them.
07
Tenant Incentive Asymmetry, Getting tenants to adopt a self-inspection app was extremely difficult. But the same tenants were highly motivated to use an app to report problems and have inspectors mediate resolution. This flipped our tenant feature priority from self-audit to reporting & escalation.
User simplified flow diagram showing the NSPIRE standard failure scenario across tenant, inspector, and landlord workflows
NSPIRE Standard Failure Scenario Flow, Tenant, Inspector, and Landlord paths

Designing the AI Layer

AI wasn't a feature, it was an architectural decision. I defined three core AI functions: a Documentation Assistant that guides photo capture with real-time angle and lighting feedback, a Metric Interpreter that translates regulatory language into plain terms, and a Compliance Decision Support system that predicts violations from historical patterns. The key principle: AI advises, humans decide. Every AI output is subject to inspector confirmation.

Before

"User controls, AI validates after the fact"

After, from usability testing

"AI guides in real-time, User confirms"

"
"I don't know if the AI is happy with the photo", and, "What is it looking for?" This shift came directly from users during testing. Real-time guidance replaced post-validation.

Building for Scale and Complexity

A modular design system built from day one, before branding existed

We (I and my teammate, Catelynn Kai) started the design system on the first day of the project, intentionally decoupled from final branding. This decision saved weeks of rework later. The system was architected for three user roles, a glass morphism visual language, and national-scale deployment with jurisdiction-level customization.

The Branding Crisis

Mid-project, the branding team hit a deadlock. Stakeholders were split between a purple-turquoise palette and a green-dominant direction. No consensus was possible. I proposed a role-based color strategy: green for tenants (trust, accessibility), teal-blue for landlords (professional, compliance), and blue-purple for inspectors (authority, expertise). Same components, different color theming. The branding team adopted this framework and built the complete visual identity on top of it.

Side-by-side comparison of Housing Help's three user roles, tenant (green), landlord (teal-blue), and inspector (blue-purple), showing identical components themed for each profile
Role-based color strategy, three profiles, three palettes, one component library

Device-First by Role

A parallel research study revealed that each role had a clear device preference: tenants reach for the phone, inspectors work on the tablet in the field, and landlords split between tablet and desktop when managing portfolios. Instead of designing every flow for every screen size, we focused our effort on each profile's dominant device, a phone-first, one-handed flow for tenants; tablet-scale photo capture and annotation for inspectors; larger-canvas portfolio management for landlords.

Adaptive Background component in Figma, a single component whose role variant automatically re-themes every screen between tenant green, landlord teal-blue, and inspector blue-purple
Adaptive Background component, one component, three role variants. Switch the variant and every screen in that flow re-themes instantly, collapsing hours of manual color work into a single prop change.

Why Glass Morphism

Client feedback on early flat designs was direct: "It feels soulless." I implemented a glass morphism aesthetic inspired by Apple's design language, but adapted for a compliance context, reduced blur for focus, increased font weights for readability, and semi-transparent surfaces that work across all three color profiles. Accessibility verified across every theme.

Housing Help design system stylesheet, typography scale, color tokens, spacing, and foundational components
Stylesheet (Part 1), foundations: type scale, color tokens, spacing, elevation
Housing Help design system stylesheet, component library, buttons, inputs, cards, and interaction states
Stylesheet (Part 2), components: buttons, inputs, cards, navigation, interaction states

Accessibility as a Federal Requirement

Any website or digital product built for a U.S. government function must meet WCAG AAA accessibility, the strictest federal tier. We audited every color combination, verified contrast across all three role palettes, and simulated low-vision and color-blindness conditions (protanopia, deuteranopia, tritanopia) against the live UI. Every screen was validated against AAA before it shipped.

Accessibility AAA audit and vision simulation, color contrast verification and protanopia, deuteranopia, and tritanopia simulations applied to Housing Help screens
AAA audit & vision simulation, contrast checks and color-blindness tests across every role theme
Three convention roll-up banners showing Housing Help's role-based color system, purple for inspectors, blue for AI-guided reporting, green for tenants
Convention roll-up banners, role-based color system in a real-world marketing context
Figma prototype structure organized by user role with annotated flows for developer handoff
Figma file structure, organized by role, annotated for developer handoff

Structuring Three Experiences in One App

The app is organized into five modules: Inspection, Remediation, Role-Based Dashboards, AI Assistant Layer, and Analytics. I designed mid-fidelity wireframes for all three user flows before committing to visual design, validating structure with Google Design experts and Deloitte stakeholders before investing in pixels.

Expert reviewers: Russell Matsuo (Google UX Lead), Roque Silva (Google Product Design), Mike Buzzard (Google Design Systems) + Deloitte product stakeholders.
Mid-fidelity wireframes showing the tenant status flow, from dashboard notification through photo capture to repair confirmation
Tenant Part 2 (Status), 8-screen wireframe flow validated with client and Google experts

Testing Assumptions, Fixing What Broke

We tested mid-to-high fidelity prototypes with a mix of landlords, tenants, and limited inspector access. Three critical issues surfaced that reshaped the product.

Issue 01, AI Documentation Confusion

Users couldn't tell if the AI had what it needed

Finding: Users expected real-time feedback during photo capture. The AI felt invisible.

"I don't know if the AI is happy with the photo."

Fix: Overlaid AI guidance directly on the camera view, angle prompts, lighting checks, real-time requirement checklists.

Issue 02, Photo Visibility Gap

Captured photos disappeared with no confirmation

Finding: Captured photos disappeared into the system with no preview or confirmation.

"Where did my photo go?"

Fix: Added live preview + explicit confirmation checkpoint before submission.

Issue 03, Missing Confidence Signals

No clear signal that documentation was sufficient

Finding: Users couldn't tell if AI was assisting or if their documentation was sufficient.

Fix: Added checkmarks for approved captures, clear warnings for insufficient ones, and plain-language explanations for rejections.

Competitive reference: Studied Instagram (preview patterns), Google Lens (real-time AI feedback), and professional documentation tools to inform the redesign.

The Product

Three role-based experiences unified under one design system. Glass morphism surfaces, AI-guided workflows, and a component architecture built for national deployment.

Complete UI overview of Housing Help, inspector dashboard, tenant reporting, landlord compliance, photo capture with AI guidance, and property management screens
Complete UI overview, all three roles unified under one design system
Housing Help marketing website mockups on laptop showing landing page design and feature sections
Marketing website, landing page mockups on laptop
Tenant interface shown across three phone mockups demonstrating the mobile-first experience
Tenant UI, mobile-first experience across three phones

Beyond the Screen

The role-based color strategy extended beyond the app into a complete brand and marketing system, convention materials, street advertising, office collateral, and promotional products. This demonstrated how a design system decision can scale from UI components to physical brand presence.

Housing Help brand posters in office and waiting room environments
Office & waiting room posters
Housing Help outdoor advertising, bus stop billboard and indoor poster with app screens
Street advertising, bus stop billboard and indoor poster
Housing Help branded merchandise, polo shirts, water bottles, event table setup, and tote bags
Branded merchandise, polo shirts, water bottles, tote bags
Housing Help promotional banner, Making Reporting Easy with phone mockup
Promotional banner, "Making Reporting Easy"

Navigating Complexity

Deloitte's organizational structure meant multiple decision-making bodies with competing priorities. Scope creep from housing authorities' wish lists constantly pulled against the need for a focused MVP. I learned to navigate this by presenting design decisions as strategic trade-offs, not aesthetic preferences, which built trust and accelerated consensus.

The component structure is exceptionally well-organized. The information flow between components is intuitive for developers. This level of structure is uncommon in designer-developer handoffs.

, Deloitte Development Lead, during prototype review
Deloitte × SCADpro team at the Housing Help final presentation event
Deloitte × SCADpro, team at the final presentation event

What This Project Taught Me

01

Client Management at Enterprise Scale

Working with Deloitte meant navigating multiple stakeholders with competing visions. I learned that design decisions must be framed as business trade-offs to build alignment across complex organizations.

02

Cross-Team Coordination

Leading design systems work while syncing with research, branding, marketing, and operations teams taught me how to maintain system coherence when dozens of people are making parallel decisions.

03

Scalable Design Systems with High Visual Complexity

Building a modular system that supports three color profiles, glass morphism aesthetics, and jurisdiction-level customization, without breaking, was the hardest technical challenge. The key was radical modularity from day one.

04

Product Iteration Under Constraints

Limited inspector access forced creative validation strategies. I learned to maximize signal from the data available rather than waiting for ideal research conditions.

05

Usability Testing with Stakeholders and Experts

Combining expert review (Google design leads) with real user testing created a powerful feedback loop. Expert reviews caught structural issues; user testing caught experiential ones.

06

Final Client Interaction & Presentation

Delivering interactive prototypes to Deloitte executives and housing authority officials taught me how to present design work as business value, not design artifacts.

View the Work

The complete process book and final presentation deck are available below.

Interested in how I approach complex design systems?

I'm open to internships, freelance projects, and collaborations.

Portfolio coded with craftsmanship & Claude Code