Building a Design System and Website from the Ground Up
Establishing a brand identity and design system from scratch, then redesigning 20 pages and templates around it — now live in production.
Overview
H.R. MacMillan Space Centre had no defined visual identity and a website that hadn't kept pace, with the institution's long-term vision living in conversations rather than anything documented to design against.
I ran the engagement as a full design sprint (research, brand identity, design system) and led a team of students from wireframes to launch across 20 pages and templates.
A complete brand identity and design system now live in production at spacecentre.ca across 20 pages, carrying consistently into social and campaign materials beyond the site itself.
The problem
No brand to design within
H.R. MacMillan Space Centre — Vancouver's planetarium and space science museum — had an established social media presence but no defined visual identity behind it, and a website that hadn't kept pace with the institution. I was brought on as a contract lead designer to build the brand and website from the ground up: a full design system, applied across 20 pages and templates, over a 12-month engagement.
The Space Centre had some loose visual conventions for social media but nothing formalized beyond that, and nothing built for a 20-page website. I led two students through the project full-time, which meant the system had to be something I could hand off and teach, not just execute myself.
The Space Centre's long-term direction lived in conversations, not documentation. Before I could design anything, I needed to sit with the brand director and pull that vision into something concrete enough to design against.
With 20 pages and recurring templates like the blog, the site needed to hold up long after the engagement ended — usable by the students I was leading through it, and by whoever maintained the site after I left.
A brand strong enough to stand on its own. Success meant any future page, post, or campaign could be built confidently within the system — without someone re-deciding what the Space Centre looks like every time.
The discovery
Running it as a full design sprint
I structured the project like a full design sprint rather than jumping straight to visuals. Alongside the research, I met directly with the Space Centre's brand director to understand their long-term vision for the institution — context that shaped a brand identity meant to hold up well beyond this one redesign.
The brand
A brand identity built on their long-term vision
Rather than designing a brand in isolation, I anchored the identity in conversations with the brand director about where the Space Centre saw itself heading. From there, I built out moodboards to explore direction, aligned with stakeholders on one, and developed it into the full visual identity — colour, type, and imagery — that now underpins the design system across all 20 pages and templates.
Tone
Sophisticated yet approachable — confident, inspiring, and playful — inviting everyone to explore the beauty and mystery of the cosmos with curiosity and wonder.
Functional
Practical, clear, instructional. It organizes the content in an easy to understand way for the users. Primarily used for wayfinding and calls to action.
Expressive
Where brand personality shines. Used to convey brand values, spark curiosity and build connection: headlines, social media, marketing and more.
Typography
Discovery without limits
Archivo Black
The impactful typeface, used for headers.
CELEBRATE EARTH DAY
Bebas Neue
The condensed style, for headings and eyebrows. Always in all caps.
Plan your visit
Open Sans
The most versatile typeface, used for body copy.
360° immersive dome
Orbitron
The expressive typeface, used for accents.
Colour
Primary, for anything about the Space Centre
When Brand Blue doesn’t stand out enough
Secondary, when the other blues are too dark
Secondary, for a muted tone
The website
From wireframes to 20 pages, in phases
The project moved through three phases, each handing off cleanly into the next.
-
Wireframes
Student designers on my core team produced early low-fidelity wireframes covering the full 20-page sitemap, which I reviewed and directed before we moved to visual design.
-
High fidelity, together
I worked directly alongside two students to turn those wireframes into high-fidelity designs across every page and template, aligning with stakeholders as the designs took shape.
-
QA and brand identity
As the build came together, I QA'd the live site against the designs while leading development of the full visual brand identity — the piece that would tie every page and future post together.
Layer the brand onto the existing structure vs. fix structure first
With a 12-month engagement and a brand to build from zero, the faster path was applying new visual identity directly onto the site's existing navigation and content structure as each page came up.
The heuristic audit showed the content and IA problems were distinct from the identity problem, so I solved them separately — structure first, identity built in parallel.
More sequencing to manage across the engagement — in exchange for templates that didn't just inherit the site's old structural inconsistency once a brand was layered on top.
Leading the team
Mentorship at two levels
Mentorship ran at two levels across the four students involved in the broader program.
Two students worked with me through the full project, from discovery through delivery — handing off the initial wireframes, then designing every page alongside me through to final QA.
I also mentored two additional students outside my core team, giving them regular feedback on their UX and visual design work throughout the engagement.
One mentorship track vs. two
With four students involved across the program, applying one consistent level of guidance to all of them — either full direction or light feedback — would have been simpler to run.
Split into a core team of two, led end-to-end from wireframes through final QA, and a separate track of two more students coached with lighter feedback on their UX and craft outside the core project.
Running two different modes of leadership at once instead of one — in exchange for shipping a real project with a core team while still mentoring twice as many designers.
Impact and takeaways
With a design system in place, the Space Centre can add new pages, posts, and campaigns without re-deciding what the brand looks like each time. The identity now carries consistently from the website through to social, which gives the institution more credibility with every visitor who lands on the site. The redesign is live at spacecentre.ca today — 20 pages and templates built on a brand that didn't exist a year earlier.
Designing a brand from nothing is freeing and disorienting at once
Starting from zero meant no existing constraints to react against, which sounds easier than it is — without a brand to anchor to, every decision was mine to justify. Grounding the identity in the brand director's own words about where the Space Centre was headed gave me something firmer to design against than my own taste.
Leading is a different skill than designing
Running two students through the full project — wireframes to QA — meant turning my own process into something teachable in real time, while a separate pair of students needed a lighter touch of feedback instead of direction. In the future I'd build in a clearer kickoff for the core team specifically, since a lot of the early back-and-forth was me figuring out how much to lead versus how much to let them lead themselves.