LanternhouseA porch light, left on.

Most portfolio concepts are a few beautiful screens. I wanted the opposite: a whole organization, with the depth that a board, a funder and a 19-year-old would each test in their own way.

So the brief came first, written as if a client had handed it to me. Invent a Charlotte nonprofit for young adults aging out of foster care. Give it a founder with lived experience, a leadership team, a board, six programs, a drop-in center, financials and job postings. Then build every page those things imply.

Two guardrails were set before any design work, because a fictional help site carries a real risk. The only working phone numbers are real crisis lines (988, 911 and 211); the organization's own numbers use the 555 range reserved for fiction. And the site asks search engines not to index it.

• A written brief with scope, audiences and success criteria
• A complete organization: leaders, board, programs, numbers
• Safety guardrails decided before the first sketch

The most important person who visits this site is 19, on a cracked phone with a weak signal, at night, with nowhere to sleep. If the site works for her, it works for the caseworker, the volunteer and the donor too.

Every page keeps a way to reach a person within one tap: a utility bar with the phone number, a Text us button that stays on screen on phones, and a help strip at the end of program pages. The home page asks one question, Where do you want to start?, and gets anyone to the right place in three clicks or fewer.

A three-question eligibility check tells young people what they qualify for without ever asking for a name.

• One question, four plain answers, three clicks to anywhere
• A Somewhere to sleep tonight page written as numbered steps
• Eligibility without identity: no name, no email, nothing saved

The organization is built on one image, a porch light left on for someone coming home late. The visual system grows from it: deep dusk blues, a single lamplight yellow, and an arched window frame that holds every key photograph.

On load, the window on the home page warms up as if someone just switched on the light. It is the only motion on the site that happens without the visitor doing anything.

Headlines are set in Bricolage Grotesque for warmth and a little youthful irregularity. Body text uses Atkinson Hyperlegible Next, designed by the Braille Institute, because many young people leaving care have had interrupted schooling or uncorrected vision.

• Two colours, used with discipline
• Arched frames that make every photograph feel like a window
• A typeface chosen for the reader, not the designer

A believable nonprofit site is mostly content, so I wrote it as content strategy before it became pages. Every program page answers the same three questions in the same order: who it's for, what you get, and how to start.

Around the programs sit the pages a real organization needs and concept sites usually skip: a transparency page with spending and revenue, a wishlist for household items, careers, press, an accessibility statement that lists known issues, and a donor privacy policy.

Stories are written about outcomes, not rescue. Each one leads with the young person's own words.

• Six programs on one consistent template
• Financials, careers, press and policies, not only marketing pages
• Site search across every page, opened with the slash key

The donate page leads with monthly giving, because a steady gift is worth more to an organization like this than a larger single one. Choosing an amount changes the line beneath it to say what that amount does: $100 covers a week of dinners at The Porch for 15 young adults.

Tribute gifts, covering the processing fee and other ways to give sit on the same page. People who would rather give things than money get a wishlist instead of a dead end.

• Monthly first, with one-time a tap away
• Impact language that changes with the amount
• A next step for every kind of donor

There was no photo library, so I wrote one. Every image began as written art direction: a house style describing camera, lens, light and film stock, then a shot brief for each frame saying who is in it, what they are doing and how it should feel.

The house style asks for documentary realism: candid, unposed, natural skin texture, Charlotte in the evening, deep blue shadows and warm lamplight. The seven leadership portraits were made in one session so light and background match across the series.

Like the organization, every person pictured is invented. In a real engagement the same document becomes the brief for a photographer and the people the organization serves.

• 33 frames, each with a written purpose and an exact crop
• A house style that keeps every image in one visual world
• Every person pictured is invented, like the organization

After the first build I layered five current design trends on top: smooth page transitions, a paragraph that lights up word by word as you read, a photo bento grid, headlines that settle into weight as they arrive, and a fine film grain on the dusk bands.

The first version stuttered. Scroll-driven shape animations on photographs were forcing the browser to repaint constantly. I replaced them with simple fades and rises that run once, and repaints while scrolling the home page dropped from 2,959 to 319.

Testing in Safari found two more problems: moving photographs escaping their rounded frames, and an animated blur that now and then crashed the page. Both were fixed, and both became written rules for every site that came after.

• Photographs only fade and move. Nothing animates a shape.
• Every moving image sits inside a static clip
• Reduced motion turns all of it off

All 50 pages were checked at 360 and 390 pixels wide: no sideways scrolling, every control at least 44 pixels to tap, and no form field small enough to make an iPhone zoom in.

Hover effects only run on devices that hover, so nothing sticks after a tap, and phones get smaller images than desktops. On a throttled mid-range phone over slow 4G, the home page shows its main content in about 1.5 seconds, with nothing jumping as it loads.

• No horizontal overflow on any of the 50 pages
• Touch targets of 44 pixels or more, footer links included
• About 1.5 seconds to main content on throttled slow 4G

A young person looking for help should not be followed around the internet for it. The site sets no cookies, loads no trackers or analytics, embeds no social widgets and makes no requests to any other domain. I checked that on twenty page loads, and the count was zero.

Privacy doesn't have to cost findability. Every page carries structured data, canonical URLs, share images and English and Spanish alternates, so a real version would be well described to search engines and AI answer tools alike. A Spanish landing page serves families and young adults who prefer Spanish.

• No cookies, trackers or third-party requests
• A strict Content Security Policy and HSTS
• Structured data and language alternates on every page

On October 30, 2026 I ran an automated accessibility check (axe-core, WCAG 2.2 AA rules) over ten pages at desktop and phone sizes. Most pages came back clean. Two findings are worth telling you about.

The paragraph that lights up as you read starts its unread words dimmed, and dimmed text fails contrast until it is lit. The fix keeps the effect: start every word at full contrast and light it with colour and weight instead. Separately, the Text us button's accessible name doesn't contain its visible words, which can trip up voice-control users. That one is a single-line fix.

A real engagement would add what a study can't: content shaped with young people who have lived it, testing on their own phones, a real payment processor, and a content system the staff can run.

• Measured, then written down, including what failed
• Two findings, each with a clear remedy
• A plain list of what real work adds that a study cannot