Digital platform for a professional college
Discovery, editorial design direction, and a proposed architecture for a 50-year-old professional college that needed to modernize how it serves its members.
- Next.js 16 (proposed)
- Supabase (Postgres, Auth, RLS, Storage)
- Newsreader · Public Sans
- Vercel
At a glance
A professional college with more than fifty years of history needed to digitalize how it serves its members. The board wanted a member portal, a job board, an event-and-continuing-education system, and a public site that did not feel like the institutional templates they had been quoted by larger agencies. They wanted craft, not a CMS that looked like every other CMS.
I led discovery with the board, produced eleven editorial-grade mock screens that anchored the visual direction, and submitted a proposal that the board is currently evaluating.
This is not a shipped product. It is a worked example of how I scope and direct institutional work that has weight behind it.
The context
The college serves thousands of registered professionals. Its current digital footprint is the kind of WordPress site that grows organically over a decade: useful, dated, and unable to support the workflows the board wants next. Member services run on email and PDFs. Continuing-education credits are tracked in spreadsheets. The job board, when it exists at all, exists in a Facebook group.
Two pressures pushed the board to act:
- Members under thirty-five expect a digital experience that matches the rest of their professional lives.
- The institution has fifty years of credibility and brand weight. A bad digital surface erodes that.
The brief was generous: modernize, but do not feel like a startup. Look institutional in the sense of weight and seriousness, not in the sense of dated.
Discovery
I ran two sessions with the board. The first was open: where does it hurt, who carries the workload today, what have you tried, what felt off. The second was bounded: priorities, hard constraints, what cannot ship in phase one.
Three findings shaped the proposal:
Member onboarding is the chokepoint. New members go through a manual paper-and-email process that takes weeks. Automating onboarding would deliver visible value to both the staff and the new members. This became Phase 1.
The job board is a feature, not a product. They had been quoted a separate “job board platform” by another vendor. After mapping the actual flow, the job board is twelve database tables and three screens, not a separate system. Folding it into the member portal cut the vendor proposal roughly in half.
The visual brief was upstream of the technical brief. They had seen institutional templates from larger agencies and rejected them as “feels like a bank with a press release.” The right move was to lead the proposal with design direction, not architecture. That reframed the conversation from “how much” to “this is the only one that looks like us.”
Architecture
The proposed system is a single Next.js 16 application backed by Supabase, with a content layer for institutional pages and an authenticated portal for members.
Member identity model. Members are not generic users. They have a college-issued ID, a specialty, a status (active, suspended, retired), and a continuing-education ledger. Authentication is wired so that the member ID is the canonical identifier, with email and password as the access channel. Row-level security enforces the rule that members see only their own ledger and admin staff see the full roster.
Content model split. Institutional pages (about, leadership, history, news) sit in a content collection with editorial-friendly editing. Member-facing surfaces (portal, job board, events, education credits) sit on relational tables with proper migrations. The split keeps content writers out of the database and engineers out of the content review loop.
Phased delivery. Phase 1 ships member onboarding + portal + public site refresh. Phase 2 adds job board + events. Phase 3 adds the continuing-education credit system and integration with the existing financial records. Each phase is independently demoable and independently invoiced.
Design direction
The eleven mock screens were produced in two focused sessions. The direction was set early and held throughout:
- Editorial restraint. Newsreader serif for display, Public Sans for body. Cool white background. Single accent (a deep institutional navy, not the gold the prior agency had proposed and the board had visibly tired of).
- Anti-template moves. No carousels. No “hero with a stock photo of professionals shaking hands.” No badges. The home page is a structured editorial layout that respects the institution’s age without dressing it as a museum piece.
- Typography as the brand. With no logo redesign in scope, the typography was the brand expression. Newsreader at display sizes does most of the work; the navy accent is the punctuation.
- Mobile parity, not mobile afterthought. The same restraint translates to mobile by reducing, not redesigning. The grid collapses; the type adjusts; the editorial weight survives.
The board’s response, in their words: “this is the only one that feels like us.” That sentence is the discovery deliverable I optimize for. Architecture follows from there.
What I took from this
Lead with design direction when the client has been quoted by larger agencies. The technical proposal lands differently when the visual is already understood and welcomed.
Member ID models are different from user ID models. Treating members as first-class entities (with status, ledger, history) instead of as authenticated users would have been a refactor in phase two. Catching it in discovery saved the rebuild.
Phased delivery makes institutional clients comfortable. Each phase is small enough to approve and large enough to demo. The internal politics of approving a single large contract is much harder than three smaller ones.
Stack
Next.js 16 App Router on Vercel. Supabase for Postgres, authentication, storage, and row-level security. Newsreader and Public Sans loaded via Google Fonts with subset and display swap. Content layer for institutional pages, relational schema for member-facing surfaces. Sentry for observability. The boring infrastructure stays boring on purpose; the editorial UX is where the budget goes.