HCIM CAPSTONE 2024-25

US HAB-CTI

Clearing House Website

Duration

Sept 2024 – May 2025 9 months

Role

Lead UX Designer and Researcher

Team/client

US HAB-CTI

At a glance

We collaborated with US HABCTI to design a centralized, user-friendly website that simplifies access to information on Harmful Algal Bloom (HAB) control technologies and federal regulatory pathways. The platform supports researchers, technology developers, and environmental managers working to address the growing threat of HABs.

Jambo Bento Background Dots
Jambo Bento Background Dots
Jambo Bento Background Dots

“Scattered information. Dense language. Missed steps.Users struggled to navigate, lost time, and often didn't know where to begin.”

Jambo Bento Background Dots
What Users Needed

Users wanted a system that guided them clearly, spoke in plain language, and gave them confidence they were doing the right thing. They needed visual help, task-focused flows, and a single place to trust — not pages of dense regulations.

Jambo Bento Background Dots
When Progress Meets Complexity

Even a simple task turned confusing fast. Users had to dig through unclear terms, scattered files, and conflicting guidance — all while trying to make urgent decisions. For most, the process felt less like a flow and more like a maze.

👉 Watch the visual walkthrough to see what we mean.

Jump Into the Prototype

Explore the full experience in Figma — no scrolling needed.

Explore Final Prototype on Figma
Information centralized. Navigation simplified.

Core Features of the Final Platform

Everything you need, up front
The homepage provides instant access to permits, consultants, research, and guidance — all surfaced clearly for action.
Know exactly where to start
Users walk through a tailored series of questions — tech type, usage, regulatory relevance — and get a customized output with linked actions
Every state, clearly compared
Select a state and view all related regulatory bodies in a clean table — no PDF scouring or mismatched definitions.
All the research, none of the clutter
Search across thousands of HAB studies by species, tech, impact, and scale — designed to support both researchers and policymakers.
A clear solution built through structured collaboration.

How We Got There

AUG
2024
sPRINT 1
Exploratory
Research
Identified core pain points through stakeholder interviews and early workflow mapping

We synthesized user needs from interviews and co-working sessions, setting the groundwork for defining clear information pathways.

NOV 2024
SPRINT 2
Information Architecture
Organized content around key user workflows and decision-making paths

Defined information structure, grouped resources, and created a framework aligned with user tasks.

JAN
2025
SPRINT 3
Mid-Fidelity
Design
Developed wireframes and tested layouts through collaborative feedback sessions

Created and refined design flows through co-working with stakeholders to improve clarity and usability.
‍

MAR
2025
SPRINT 4
High-Fidelity Design & Testing
Finalized visuals, validated usability, and ensured accessibility across user types.

Tested high-fidelity screens and refined the platform’s design system for production readiness.
‍

Sprint 1

Exploratory Research

We kicked off by exploring the space through a literature review and co-working sessions with stakeholders — uncovering real workflows, pain points, and process gaps directly from those navigating the system.

Early framing of the problem space: scattered sources, unclear pathways, and unmet user needs.

Tap or click the image to expand.

Jambo Bento Background Dots
Exploratory Research

Understanding Our Users Through Their Workflows

In our initial research phase, we focused on how stakeholders move through the permitting process. Rather than relying on traditional methods like personas or journey maps, we took a direct approach:

  • Co-created task flow charts with users to map real-world actions.

  • Captured key sticking points, search behaviors, and step-by-step progress.

  • Used this process to surface pain points grounded in lived experience.

  • These flows weren’t theoretical — they were built through actual conversations and collaboration.

This method gave us a clear, authentic foundation for structuring the platform around user needs.

Three User Types, Three Unique Needs
Environmental Manager

Implements approved solutions and needs clarity on permitted options in their region.
‍

Tap or click the image to expand.

Researcher

Develops new HAB control technologies and seeks permits for field testing.
‍

Tap or click the image to expand.

Technology Developer

Prepares products for deployment, navigating state and federal compliance.

Tap or click the image to expand.

Researchers

“I don’t even know where to begin.”

‍Researchers often struggle to identify which permits apply to their specific work. Without a clear entry point into the regulatory process, they face delays and risk missteps early in project planning.

Technology Developers

“Every agency says something different.”

Developers preparing for commercialization encounter conflicting information from federal and state bodies. The lack of harmonized guidance leads to uncertainty, stalled launches, and increased reliance on consultants.

Environmental Managers

“I just want to know what’s approved and usable.”

Managers need confidence that selected technologies are both effective and compliant. However, approval information is fragmented across multiple sources, making decision-making inefficient and risk-prone.

Who We Spoke To

0

Total Interview Participants

0

Researchers

0

Technology Developers

0

Environmental Managers

Exploratory Research

Understanding Our Users Through Their Workflows

“We honestly didn’t know what applied to us until we hired someone to figure it out.”

The permitting landscape felt opaque and overwhelming, with most researchers relying on informal consultations to move forward. There was a strong demand for structured, upfront clarity—particularly on which permits apply and when.

Researcher

“If I had a flowchart that just said: you're doing this kind of research, in this state, then these three things apply to you — that would change everything.”

Decision-making tools were missing. Researchers needed context-aware, conditional pathways that align with their use case, geographic location, and product tier.

Researcher

“The problem is you figure one thing out and then realize there’s five other things you didn’t know existed.”

Progress toward commercialization was often halted by unexpected policy hurdles, revealing the need for comprehensive, consolidated checklists and permission guidance.

Technology Developer

“We email around, wait for replies, and hope someone gives us the right document. It’s trial and error.”

The information search was inefficient and unscalable. Managers desired a verified, centralized resource for product approvals and applicable regulatory contacts.

Environmental Managers
Exploratory Research

Refined Pathways, Informed by Collaboration

Jambo Bento Background Dots
Before
After

Click or tap on the arrows and drag to view.

Sprint 2

Information Architecture

We mapped out real-world user behavior into decision-focused task flows  building the foundation for a structure users could truly follow.

Click and drag to move around the canvas. Zoom in to view details

Information Architecture

Breaking Down the Information Architecture by User Role

Designing for Researcher Clarity

Researchers needed a place to begin without getting lost in policy jargon. This flow prioritizes early guidance, regulated substance awareness, and context-aware permitting, so they can focus on experiments, not interpreting government websites.

Streamlining the Developer Flow

Developers often discovered regulatory gaps late in the process. This structure aligns checklists, state-specific requirements, and timeline expectations upfront—helping them move from prototype to deployment without backtracking.

Helping Managers Find What Works

Managers needed to quickly determine what tools were approved and applicable in their region. This IA filters solutions by location, system compatibility, and regulatory status, making trusted implementation easy.

Hover over the text to pause the rotation and read at your own pace. You can also click on the IA video to view an enlarged still image.

Information Architecture

From Architecture to Interface

To move from architecture to interface, we began with collaborative paper prototyping—not just sketching, but designing together as a team.

Rapid, Hands-On Ideation

We sketched screens directly from task flows—focusing on entry points, navigation logic, and layout clarity—without being slowed down by pixels.

Team-Driven Sessions

Instead of isolating sketch work, we held co-working sketch circles, where each team member proposed, critiqued, and iterated in real time.

Testing Flow on Paper

We translated user pathways into screen logic early—surfacing edge cases, visual clutter, and content prioritization issues before going digital.

Foundation for Wireframes

These sketches weren’t throwaways—they became the structural starting point for mid-fidelity wireframes in Sprint 3.

Three User Types, Three Unique Needs

Tap or click the image to expand.

Tap or click the image to expand.

Tap or click the image to expand.

Sprint 3

From Paper to Screen

With paper sketches as our foundation, we moved into mid-fidelity wireframing to explore layout structure, content hierarchy, and navigation logic. These wireframes helped us test how well our architecture held up when translated to actual user screens, keeping clarity, role specificity, and decision guidance at the core.

Click and drag to move around the canvas. Zoom in to view details

Leveraging the U.S. Web Design System

We utilized the U.S. Web Design System (USWDS) to ensure federal compliance and expedite development with accessible, pre-built components, allowing us to concentrate on clarity and content structure.

Explore USWDS Framework

Built with accessibility, clarity, and federal compliance in mind.

Visualizing the Source Data

We began with dense regulatory spreadsheets, scattered agency PDFs, and complex guidance structures. This visual captures the raw, unstructured foundation that our entire interface was built on—what users were expected to navigate before any design began.

Abstract Image Asset
Screens Built from Data

The original content and workflows were transformed into clear, usable interface screens. Every element was shaped by the source material, user pain points, and stakeholder feedback—resulting in a system that is both practical and purposeful.

Abstract Image Asset
Sprint 4

High-Fidelity Design & Testing

We synthesized everything into a unified system view that could flexibly accommodate all three user types. The final flows not only reduced ambiguity but also clarified points of convergence and divergence between roles. Every decision was informed by direct stakeholder input—ensuring the output wasn’t just theoretically sound, but genuinely usable by the people it was built for.

How it Works

This is how it
works seamlessly

01
Home Page

Your Launchpad for Everything HAB

Unified HAB Dashboard

All essential tools in one place — users can jump directly to permits, products, research summaries, or mitigation tech via the homepage dashboard. It reduces time spent searching and ensures quicker access to critical actions.

Quick. Connected. Centralized.

Stairs
Permit Steps

Find the right process and agency for your product, all mapped out clearly.

Strategy
Strategy Match

Pick your HAB tech type to view specific approval and registration steps.

Home Page
02
A tech-driven legal solutions

Echo is a perfect partner for businesses in digital compliance, governance, and workforce management.

Well-structured

Extract structured data from hundreds of documents.

Workplace Policy

Extract structured data from hundreds of documents.

2
03
Every drafts
and review matters

Echo is a perfect partner for businesses in digital compliance, governance, and workforce management.

Law Solutions

Delivering agile and tech-driven legal solutions for any type of businesses challenges.

Learn more
3
Law Solutions

Extract structured data from millions of documents.

03
Every drafts
and review matters

Echo is a perfect partner for businesses in digital compliance, governance, and workforce management.

Law Solutions

Delivering agile and tech-driven legal solutions for any type of businesses challenges.

Learn more
3
Law Solutions

Extract structured data from millions of documents.

High-Fidelity Design & Testing

Testing Through Collaboration

We extended our co-design approach into testing—inviting users to think aloud, reflect, and help shape the interface in real time.

📊 9 Sessions · 3 Roles

Tested with researchers, developers, and managers. Feedback sharpened clarity and improved confidence across every major interaction.

Flow Clarity

Guidance Gaps Found

Users followed flows well, but 60% paused at permit and map entry points, prompting us to refine labels and cues for smoother guidance.

Content Structure

Task Over Role

Initial role-based grouping caused confusion. A card sort revealed users prefer task-based access, leading to a cleaner, more intuitive structure.

Jambo Content Placeholder
High-Fidelity Design & Testing

What We Refined

Research Requirements
Field
Studies
Regulatory Agencies
Getting an Approval
Literature
Search

How to capture any task

Use Donezo for free as long as you want, or upgrade to get access to our best features for work and team projects.

Before
Capture tasks super quick

Join millions to-doers tackle their task and organize their work and life.

After
Organize your daily task

Join millions to-doers tackle their task and organize their work and life.

Spark content placeholder image
Spark Call – a easy and quick tool for meetups.

Spark is an advanced analytics  and metric tools provide insights into team performance.

Learn more
Extra info can be added here. Link
Spark content placeholder image
Spark Call – a easy and quick tool for meetups.

Spark is an advanced analytics  and metric tools provide insights into team performance.

Learn more
Extra info can be added here. Link
Spark content placeholder image
Spark Call – a easy and quick tool for meetups.

Spark is an advanced analytics  and metric tools provide insights into team performance.

Learn more
Extra info can be added here. Link
Spark content placeholder image
Spark Call – a easy and quick tool for meetups.

Spark is an advanced analytics  and metric tools provide insights into team performance.

Learn more
Extra info can be added here. Link
Retrospective

Key Findings and Takeaways

We began by unpacking the problem space through a brief literature review and stakeholder interviews. But instead of treating these as isolated activities, we ran co-working sessions where participants mapped out their existing processes with us in real-time. These sessions allowed us to surface not just workflows, but confusion points, duplicated effort, and gaps in understanding.

US HAB-CTI
Sprint 1
Sprint 2
Sprint 3
Sprint 4
View All
Exploratory Research
01
Information Architecture
02
From Paper to Screen
03
High-Fidelity Design & Testing
04
01
02
03
Abstract Image Asset
01
Abstract Image Asset
02
Abstract Image Asset
03
Abstract Image Asset
01
Abstract Image Asset
02
Abstract Image Asset
03
Abstract Image Asset
01
Abstract Image Asset
02
Abstract Image Asset
03