Tennessee Coalition for Better Aging
A coalition only works when people can participate
Overview
I designed a public site, an Organization Portal, and an Admin Portal for the Tennessee Coalition for Better Aging, a statewide coalition of more than 45 nonprofits serving over a million Tennesseans. The project ran through Change++, Vanderbilt's student software group for nonprofits.
As the only designer on a team of ten, I owned the product design from the requirements through developer handoff: structure, interaction and visual design, the design system, and accessibility.
The Challenge
Three surfaces that couldn't feel like three products.
TCBA needed a public website, a workspace for member organizations, and an administrative system. Our product manager interviewed the coalition's leadership and wrote the requirements. I took it from there through developer handoff, which meant inferring much of the structure from the requirements and defending it as stakeholder feedback came in.
The hard part was making each surface work for its own audience without the three feeling like unrelated products. A single event, for example, is something an administrator creates, a member sees on their dashboard, and the public finds on the site.
Accessibility
I could use it. That didn't make it accessible.
Midway through the project, TCBA's director shared a WCAG primer and a guide written by a woman with rod-cone dystrophy. She described what gets in her way: gray text on white, text over images, highlights she can't tell apart, and "click here" links that give her screen reader no destination.
The primer gave me thresholds, and her account showed why they mattered. From then on, I stopped asking only whether a screen passed. I asked whether the person it was for could actually use it.
What changed
The Platform
Public site: explain the work without burying what's new
The public site had to explain TCBA's work without burying timely updates. I separated educational content from announcements and events, then gave joining, subscribing, and contacting TCBA their own clear paths. Visitors can tell the mission, the current activity, and their next step apart at a glance.
Organization Portal: start where returning members left off
Not every feature needed equal attention. The dashboard is the starting point for returning members, with alerts, upcoming events, and unfinished tasks first. Profiles, surveys, the directory, and dues stay one step away in the navigation.
Admin Portal: show detail only when a task begins
Administrators do complex work, but they shouldn't see every option at once. Lists are for reviewing information, and focused forms are for creating or editing it. Detailed controls appear only once a task starts.
Shared type, color rules, components, and content patterns keep the three surfaces visually connected. The workflows connect them functionally: an administrator can publish an event once, then choose whether it appears publicly or only to members.
Handoff
Developers needed values, not pictures.
As seven engineers built from my designs, inconsistencies appeared in spacing, color, and component states. The engineers weren't careless. I was handing them pictures of the result without always defining the values behind it.
I created named color variables, a type scale, and documented component states. That same system kept the accessibility rules consistent across all three surfaces. Once it was documented, the mismatches largely stopped.
Next time, I'd define spacing earlier. That's where the visual drift lasted longest.
- 194B90
- 346FC0
- EBF3FF
- 88242C
- D54242
- FFD0D0
- 3C3C3C
- 717171
- 848482
- B1B1B1
- D9D9D9
- F1F1F1
- Header 1
- Open Sans, Bold, 40pt, Grey 90
- Header 2
- Open Sans, Semi-bold, 30pt, Grey 90
- Body
- Open Sans, Regular, 18pt, Grey 90
- Body small
- Open Sans, Regular, 16pt, Grey 90
- Open Sans, Medium, 18pt, Grey 90
- Caption
- Open Sans, Regular, 14pt, Grey 75
Color variables, the type scale, and component states
Outcome
Built, deployed, and handed off.
By the end of the year, our team had built and deployed the public site, the Organization Portal, and the Admin Portal. It runs on React and TypeScript on the front end, Node and PostgreSQL on the back end, and Clerk, Stripe, and AWS for supporting services.
At handoff, the code moved to TCBA's GitHub account with Vercel connected for deployment. A handoff document covered the user roles, services, and main workflows.