Project Info
Photograph

Atrium Studio

An internal design studio website for Atrium Studio — Halcyon's in-house creative team covering brand, product, motion, and research. Built to centralize design intake and showcase the studio's capabilities to internal Halcyon product teams.

Next JSNext JS
SanitySanity
TypescriptTypescript

What I Built

Atrium Studio is a fictional internal design agency website I designed and built as a self-initiated portfolio project. The concept: an in-house creative team at a made-up company called Halcyon, serving 14 designers across 6 disciplines. The site includes a homepage, work archive, team grid, FAQ section, and a structured design brief intake form — everything a real internal agency would need to operate.

It's not a real client. Halcyon doesn't exist. Atrium doesn't exist. The whole thing is a sandbox I built to test a specific design and engineering problem end-to-end.

Why I Built It

I wanted a project that would force me to design for a specific, unusual audience — internal colleagues rather than external prospects. Most agency websites I'd studied were optimized for cold conversion: heavy on positioning copy, vague value propositions, marketing polish. I wanted to see what happened if I stripped all that out and designed for an audience that already works at the company and just needs to understand what the studio does and how to start an engagement.

The fictional framing gave me room to make sharper decisions than I could on a real project, where stakeholder opinions and brand constraints often soften the edges.

What Made Me Start

I wanted to take on the full scope of building a polished, production-grade site for a brand and audience I'd never worked with before — design, content, engineering, CMS, the whole thing — without the safety net of a real client telling me what to do. Self-direction was the point. Every decision had to be mine, and every decision had to be defensible.

The "internal agency" constraint was the most interesting design problem I could give myself with the time I had.

How I Did It

Defining the Brand and Audience

I started by writing the brief I would have wanted if a real internal studio had hired me — who Atrium serves, what kinds of projects they take on, what tone they speak in, how they're different from an external agency. That document then drove every design and copy decision downstream.

Designing the Page Sections

Each page is built from a set of distinct sections — hero, work archive, team grid, FAQ accordion, contact form. I designed each one with the specific content in mind, paying attention to how they'd sit next to each other on the page and how the rhythm of the site would feel as a visitor scrolled through.

Building Out the CMS

The whole site runs on Sanity, so every piece of content — work showcases, team members, FAQ answers, page copy — is editable from the studio interface. I wrote the schemas, built the React components, and wired everything together so the design and the content stay in sync. Even though no one will edit it in practice, I built it as if a real editorial team would.

Designing for a Fictional Internal Audience

The tone, navigation, and content structure were all calibrated as if the audience were colleagues rather than clients. This forced specific decisions: no generic agency speak, no marketing fluff, direct and functional copy. The constraint was the point — and pretending it was real was the only way to find out whether the constraint actually changed the design.

What Makes It Different

A Self-Imposed Constraint

Designing for a known internal audience is a very different exercise from designing for cold prospects. I wanted to see how much of the "agency website" pattern I'd internalized was actually load-bearing, and how much was just convention I'd absorbed from looking at other sites.

A Structured Brief Form, Not a Contact Form

Even though no one will ever submit it, I designed the intake as a structured design brief — the kind of form a real internal studio would use to triage and scope work. It's a small detail, but it's the kind of decision the fictional framing made possible.

Production-Grade Without a Real Client

A lot of portfolio sites cut corners because no one is paying for them. I wanted Atrium to feel like a real shipped product — fully editable CMS, considered information architecture, real attention to the small details — so I'd know I could deliver at the same level when a real client did show up.

What I Gained

  • A concrete portfolio piece that demonstrates design and engineering decisions in context
  • Practice taking a brand from a blank document all the way to a live, editable site
  • Practice designing for a specific, constrained audience rather than a generic "user"
  • A clearer sense of which design conventions actually serve the work and which ones I'd been copying out of habit
  • Reps on the full Next.js and Sanity production stack from schema design through deployment

The Bigger Picture

Atrium is part of a larger effort to push my own standard for what a self-directed project can look like — closer to a shipped product than a sketch. The longer I work on these, the more I care about the unglamorous parts: the CMS being genuinely usable, the content shape being right for the brand, the design holding up under real editorial changes rather than just on a polished launch screenshot.

Key Takeaway

A dummy project with a sharp self-imposed constraint can teach more than a real project with a vague brief. Pretending Atrium was real forced me to make actual design decisions, defend them to myself, and live with the consequences — which is the closest I can get to real client work without one.