Joanna Veloria
BHS
05

BHS

WebUX/UI DesignCognitive DesignNon-profit

Role

UX/UI Designer

Client

TYIA (non-profit)

Timeline

2023–2024

Team

Internationally distributed

Overview

TYIA (Transforming Youths into Adults) is a non-profit offering behavioral health services for children and adults with intellectual disabilities and mental illness. Their BHS services were buried inside a general website — we were brought in to give them a dedicated, standalone presence.

I worked within an international cross-functional team of PMs, researchers, and designers alongside the TYIA CEO and developers. My role spanned IA, mood boards, and low-to-high fidelity mockups — with a particular focus on getting the information architecture right for a highly sensitive audience.

The challenge

The previous site had no analytics — no qualitative data, no usage insights, nothing to build from. And given the sensitivity of the clientele — children and adults navigating mental illness and intellectual disabilities — extensive user interviews or surveys weren't feasible.

We had to design a 28-page website from scratch, on a tight timeline, without traditional research. Our solution: lean on cognitive design principles and established psychological research instead.

Homepage hero — desktop

Our approach

Instead of user research we couldn't do, we applied four cognitive design principles backed by psychological research. Each principle addressed a specific design problem — from first impressions to form complexity to navigation patterns.

This wasn't a workaround. It was a deliberate decision to use what we knew about human cognition to compensate for what we couldn't learn through primary research.

Design decisions

Aesthetic Usability Effect

Creating a positive first impression

A captivating hero grabs attention immediately — especially critical for a health services site where trust is everything. We designed for comfort and professionalism from the first scroll: intentional imagery, clear hierarchy, and a warm but clinical tone. Aesthetics here weren't decoration — they were a trust signal.

Hero section — before
Hero section — after

Jakob's Law

Accordion FAQ over sidebar navigation

We initially explored a sidebar with page anchors for the FAQ — useful for jumping between sections without scrolling. But for the size of our FAQ, the sidebar consumed valuable screen space and created responsive design challenges. We switched to accordion-style — a pattern users already know. Familiarity reduces friction, especially for users already navigating a stressful situation.

Original — sidebar nav

FAQ — sidebar layout

Occupied too much space, hard to implement responsively.

Revised — accordion ✓

FAQ — accordion layout

Familiar pattern. Frees space. Easier for developers.

Tesler's Law + Hick's Law

Reducing cognitive load on intake forms

Online medical forms are notorious for overwhelming users — complex terminology, too many fields, and decision fatigue. We applied Tesler's Law (absorb complexity on the system side) and Hick's Law (fewer choices = faster decisions) to redesign the intake flow. Pre-filled fields, smart suggestions, and progressive disclosure let users focus on one question at a time rather than facing a wall of inputs.

Intake form — original
Intake form — redesigned

Miller's Law + Jakob's Law

Chunking the events page

The events page had a potential edge case: what happens when there are many events? A long list overwhelms. We took cues from Instagram and Amazon — load a digestible set first, then reveal more on demand. Miller's Law tells us users can hold roughly 7 items in working memory at once. Combined with Jakob's Law (use patterns people already know), pagination felt natural, not limiting.

Events — long list
Events — paginated

Results

Despite limited research and a tight timeline, the team delivered a complete, handoff-ready design system with full documentation for the development team.

28

Page website design delivered

8

Distinct user flows documented with screen flow charts

32

Screens with full specs, annotations, and redlines

HIPAA

Compliance requirements called out throughout

Screen spec — homepage
Screen spec — events page
Screen spec — intake form
User flow — intake
User flow — event sign-up
Design system — components

My contribution

01

Information Architecture

Mapped the full IA for optimal functionality and user flow — ensuring that users navigating sensitive health decisions could always find what they needed without frustration.

02

Visual Direction

Contributed to mood boards that shaped the visual tone of the site — calm, trustworthy, and distinctly separate from the parent TYIA brand while remaining related.

03

Low to Hi-fi Mockups

Crafted the full range of mockups — from early wireframes communicating layout and flow, through to high-fidelity screens ready for developer handoff.

Reflection

This project taught me that constraints don't have to compromise quality — sometimes they force better decisions. Without user research to fall back on, every design choice had to be grounded in something defensible.

Cognitive design principles gave us that foundation. They're not a replacement for user research — but when research isn't possible, they're the most responsible alternative. Understanding human cognition and behaviour is design, at its core.

What's next

01

Post-launch monitoring

Once the TYIA BHS site is live, the team will monitor user experience through analytics and feedback — making design iterations to continuously improve the experience for a sensitive and underserved audience.

← All work01Una