An advisory brand, shipped as one responsive system

Context

Good & Prosper is a one-person business-advisory practice for growth-minded owners: a strategic thinking partner, not a tactical one, built on decades of capital-markets experience. The work it sells is judgement and trust, so the brand was deliberately restrained, a single rippling mark, one serif, a nature-derived palette, an ethos of doing good and prospering as a consequence. I had designed that identity. The next job was to make it a product: the site at goodandprosper.com.

Problem

A calm brand is easy to admire and hard to operate. The site had to sell a high-trust, high-cost service to skeptical owners across six different journeys (what the practice does, who it is for, who is behind it, proof, ideas, contact), carry a podcast and an ongoing insights stream, and do all of it without the volume that advisory marketing usually reaches for. It also had to be a real responsive product, designed at both ends rather than a desktop layout left to reflow, and consistent enough that it could be built and extended without the brand quietly drifting.

Approach

The brand, made operable

The restraint only scales if the system is explicit. I built the Good & Prosper interface as a documented library, not a set of pages: navigation, hero variants, content and testimonial blocks, the podcast and insight cards, forms, and the button system, each defined once with its states so every page is an assembly, not a redraw.

Interaction was specified, not left to chance

A quiet product earns trust in the small moments: how a button answers, how a card lifts, how the page moves under you. I documented the interaction details as part of the system rather than leaving them to the build, so the calm survives contact with a real browser.

The whole site, end to end

Proof is the shipped page, not a crop. This is the live Good & Prosper homepage, the same system from the hero to the footer: the offer, the owner, the proof, the podcast, the insights, the consultation. It holds because it is all one library.

goodandprosper.com

Responsive, not reflowed

The phone is where most owners actually arrive, so it was designed, not derived. The 393 layout re-thinks density, hierarchy and tap targets against the same components, so the mobile site reads as deliberate rather than squeezed.

Outcome

Designed and shipped, end to end, and live at goodandprosper.com: the information architecture, the UX and UI, and the responsive component and interaction system underneath every page. The brand made it to launch without losing its quiet, which for a practice that sells judgement is the whole point.

6

Core journeys carried on one system

2

Breakpoints fully designed, 1728 and 393, not reflowed

0

Brand drift from identity to shipped site

The identity this product grew from, the mark, motion and brand system, lives in the visual archive.

Reflection

The hard part was holding the line. Advisory sites drift loud because loud feels safe; every section wants a bigger claim. Keeping it quiet only worked because the system made restraint the path of least resistance: when the components are this defined, the calm version is also the easy version, and the build stays honest. If I did it again I would document the interaction details before the first page, not alongside it, the same lesson the earlier brand work taught and the only thing I would change.

Brand identity created with Lea Leleta and Christopher Butler. Digital product, UX and UI system: mine, end to end.