All work

UNCF TechHub and Ernest E. Just Life Science Society

Two professional networks for the United Negro College Fund, one for the life sciences and one for technology careers, built on one design system. I led the design of both: 967 screens, from onboarding to hiring, summits, grants and the emails that hold it together.

Client
UNCF (United Negro College Fund)
Role
Design Lead, via Brickroad (US agency)
Years
2021 to 2024
Outcome
Merged into HBCUv, UNCF's digital learning platform

Ernest Everett Just was a pioneering Black biologist working at the start of the twentieth century. UNCF, the largest private scholarship provider to minority students in the United States, put his name on a network where Black scientists, from an undergraduate to a tenured professor, could find each other, their research and their next position. TechHub carried the same idea into technology careers.

General networks already existed. These had to encode how academic and technical careers actually work: papers as credentials, grants as career fuel, employers as part of the community, and an annual summit as the room where the community becomes real. The decisions below are that encoding.

The career ladder is the data model

Registration asks one structural question: where are you on the ladder. Undergraduate, graduate, postgraduate fellow, corporate researcher, academic researcher, plus a role for university administrators. Each role gets its own profile template, and the fields grow with seniority. An undergraduate profile asks for a school and research interests. A graduate profile adds the principal investigator, because in science that relationship is the credential. A faculty profile carries publications, presentations and a full CV. A network that shows a first-year student the same form as a professor has misunderstood both.

Ernest E. Just onboarding: six role cards from undergraduate student to university administrator, with a three-step progress bar.
Ernest E. Just onboarding. The role chosen here decides which profile template and which fields follow.

Two products, one structure

Set this screen beside the one above. One is TechHub onboarding an organization, the other is Ernest E. Just onboarding a person. The navigation, the cards, the three-step progress and the spacing are the same. The brand color and the vocabulary change. The component library was kept as two copies, one per product, each adjusted to its own brand on the same structure. That is how 967 screens stayed consistent across two products with different audiences. It is the system that started on Possip and was rebuilt for Productions.com, developed further here.

TechHub onboarding: choosing an organization type between companies, research centers and schools, with a three-step progress bar.
TechHub onboarding for organizations. The same structure as the person flow on the other product, in a different brand.

Papers and funding are infrastructure, not decoration

A social network shows you people. This one also shows you the two currencies of a scientific career and wires both to your identity. Researchers search PubMed, the federal index of biomedical literature, inside the platform and claim their own papers onto their profiles. Grants get a full directory, filtered the way funding is actually organized: by issuing agency and institute, activity code, type of research and type of opportunity, with a tracking dashboard and reminder emails before deadlines. The filters use the federal vocabulary as it is, because that is the vocabulary researchers already search in.

Ernest E. Just grants list: filters for agency, activity code, type of research and funding type beside grant cards with amounts, deadlines and award dates.
The grants directory. Filters follow the structure of federal funding rather than a simplified version of it.

An announcement is only useful to the right people

Sending to everyone is easy and mostly noise. The recipients step builds the audience as a sentence: send to all of these groups, or only to this one, then narrow by interest, by skill and by proficiency. Each narrowing step hangs off the one before it, so the audience can be read back like a sentence before anything is sent.

Ernest E. Just announcement form: recipients narrowed from member groups to an interest, a skill and a proficiency level.
Announcement recipients. Each line narrows the line above it.

Hiring happens inside the network

Employers are members, not advertisers. A company joins with its own onboarding and gets a full profile, and its jobs live inside the same network as the students it wants to reach. Each position is worked as a pipeline: new, shortlisted, invited, archived, hired, with a count on every stage. Every candidate carries their place on the career ladder from registration, so a hiring manager sees a graduate student or a corporate researcher at a glance, without opening a profile.

TechHub candidate manager: stage counts above a list of candidates, each tagged with a member role.
One position, five stages and a total. The role tag under each name comes from the ladder set at registration.

The summit is the flagship, and the design treats it that way

Fifty-two screens serve the summit system in the Ernest E. Just file alone, more than jobs or messaging. A summit is a selective, in-person event for students, so the design gives it the rigor of an admissions process and the logistics of an airline: applications with deadlines, team review with notes per applicant, acceptance and rejection emails, then emergency contacts, dietary needs, travel information and a schedule builder for multi-day agendas. The builder treats a day as data, not as a page: each session has its times, a live or virtual format and a speaker or panel type.

TechHub summit builder: one day of the timetable with session times, live or virtual format and speaker type.
Building one day of a summit. Every session is a structured row, not free text.

The inbox is part of the product

Busy academics live in their email, so email was designed as a surface, not an afterthought: thirty-eight transactional templates, from verification codes to daily agendas. Staff can also see what each member was sent and what happened to it: sent, delivered, opened, clicked. Whether someone received a message is answered on one screen.

TechHub email log: messages sent to one member with date, subject and a delivery status for each.
The email log for one member, with delivery status on every message.

The people who run the platform are users too

Version one of the analytics put every chart on one page. Version two splits it by the things an institution actually manages: users, companies, schools, research centers, jobs, communities, groups and events, each with its own view. It also measures the platform against its own purpose, including the share of members with published articles on their profiles.

Ernest E. Just analytics: eight entity counts, monthly users by subscription, and the share of members in communities, in groups and with published articles.
Platform analytics, split by entity. All figures are sample data.

What the redesign trail shows

The design file holds two visible eras, and the changes between them are legible decisions.

Navigation moved from a left sidebar to a top bar. The sidebar era had five modules and spent a seventh of the screen on them. By the second era there were seven and growing, and the sidebar had become a list problem. The top bar gave the full width back to content and let the vocabulary follow the strategy: Papers stepped back and Jobs stepped forward.

The summit page dropped its gate. The early version blocked registration until a profile was complete, which filtered out the people the summit exists to reach, students at the moment of highest intent. The redesign lets anyone answer first and asks for the profile afterwards. Intent first, paperwork second.

Company pages grew from a sidebar card into a full profile with publications, posts, team and jobs, and the connections a visitor already has there. The analytics split by audience, as shown above. Each change follows the same direction: give each kind of member, and each kind of operator, its own view of the same system.

How it was built

Designed in Figma at a 1440 pixel desktop width, with every email template drawn as its own 640 pixel frame. State coverage was part of the work rather than an afterthought: dedicated empty states for every kind of content, from users and companies to summits and schools, error pages with a way back, six states for the notification center and thirteen for a live webinar.

The component library existed in two copies, one for each product, each adjusted to its own brand while keeping the same structure. Engineering worked from Figma Dev Mode, and from a clickable prototype whenever a flow needed to be seen in motion before it was built. I led the design inside a product team of eight to ten people.

Outcome

The work later merged into HBCUv, UNCF's digital learning platform for historically Black colleges and universities. What the files leave behind is 967 screens of evidence that a mission-driven institution can be served with the same systems rigor as a venture-backed marketplace.