AN INVITATION, REDESIGNED.

AN INVITATION, REDESIGNED.

AN INVITATION, REDESIGNED.

Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.

ST. CONSTANTINE SCHOOL

ST. CONSTANTINE SCHOOL

ST. CONSTANTINE SCHOOL

WEB DESIGN / UX / DESIGN SYSTEM LEAD WEB DESIGNER

WEB DESIGN / UX / DESIGN SYSTEM LEAD WEB DESIGNER

WEB DESIGN / UX / DESIGN SYSTEM LEAD WEB DESIGNER

2021

2021

2021

CONTEXT

CONTEXT

CONTEXT

The Saint Constantine School is a classical Christian school in Houston, educating students from early childhood through college around a vision of virtue, wisdom and joy. By 2021, it was adding roughly 50 students a year and preparing to grow beyond one campus. The website needed to welcome local families, speak to a wider educational community and make the character of the school immediately clear.

The Saint Constantine School is a classical Christian school in Houston, educating students from early childhood through college around a vision of virtue, wisdom and joy. By 2021, it was adding roughly 50 students a year and preparing to grow beyond one campus. The website needed to welcome local families, speak to a wider educational community and make the character of the school immediately clear.

The Saint Constantine School is a classical Christian school in Houston, educating students from early childhood through college around a vision of virtue, wisdom and joy. By 2021, it was adding roughly 50 students a year and preparing to grow beyond one campus. The website needed to welcome local families, speak to a wider educational community and make the character of the school immediately clear.

Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.

CHALLENGE

CHALLENGE

CHALLENGE

The school had outgrown its website. I started with an established crest, a basic color palette and a digital presence that no longer matched the warmth or ambition of the institution.
The new site had to feel classic, beautiful and friendly without becoming childish, overly modern or sterile. It also had to organize five stages of education, deep interior content and future campuses without turning the whole thing into a maze.
The school had outgrown its website. I started with an established crest, a basic color palette and a digital presence that no longer matched the warmth or ambition of the institution.
The new site had to feel classic, beautiful and friendly without becoming childish, overly modern or sterile. It also had to organize five stages of education, deep interior content and future campuses without turning the whole thing into a maze.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.

SOLUTION

SOLUTION

SOLUTION

I built the web system from scratch around the existing crest and palette. I designed the information architecture, navigation, responsive templates and visual system as one connected whole. Every page had to feel related without forcing very different content into the same box.
Large photography made school life feel immediate. Black, maroon and gold gave it structure. School tiers, testimonials, faculty stories and long-form content each had a clear place without losing the warmth of the whole.
The development team built the site from the Figma system. I stayed through implementation, ran several rounds of quality control and worked through the remaining accessibility adjustments before handoff.
The first presentation came back with an unusual amount of revision notes: none. Houston approved the design as presented. Within weeks, the same system was rolling out to the other campuses.
I built the web system from scratch around the existing crest and palette. I designed the information architecture, navigation, responsive templates and visual system as one connected whole. Every page had to feel related without forcing very different content into the same box.
Large photography made school life feel immediate. Black, maroon and gold gave it structure. School tiers, testimonials, faculty stories and long-form content each had a clear place without losing the warmth of the whole.
The development team built the site from the Figma system. I stayed through implementation, ran several rounds of quality control and worked through the remaining accessibility adjustments before handoff.
The first presentation came back with an unusual amount of revision notes: none. Houston approved the design as presented. Within weeks, the same system was rolling out to the other campuses.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.
Hiker in a yellow jacket resting on a mossy log in a forest.

KEEP LOOKING

KEEP LOOKING

KEEP LOOKING

Automation idle
DISPLAY FEEDBACK
DRIFT FIELD
RES: —
FPS: 00
FIELD: 0.00
INPUT: IDLE
AUTO / NONE
−∞
DBFS
MUNKI VOICE UNIT
EXPERIMENTAL DRONE SYNTH

REV X / BUILD 38

MATERIALBlends eight sound textures. Turn the dial or tap a material name.
VOICEBalances the voices, from a grounded foundation to brighter upper layers.
0
COUPLINGChanges how the voices interact. Left: sympathetic. Right: tangled.
0
MOTIONSets modulation depth. Left: organic. Right: coherent.
+12
MEMORYLets earlier sound return and evolve. Left: blurred trails. Right: distinct echoes.
0
SPACEPlaces the sound in a room or a larger, lingering atmosphere.
0
BETWEENSets the interval between the voices. With generated PULSE, steers the melody's center.
0
Automation idle
DISPLAY FEEDBACK
DRIFT FIELD
RES: —
FPS: 00
FIELD: 0.00
INPUT: IDLE
AUTO / NONE
−∞
DBFS
MUNKI VOICE UNIT
EXPERIMENTAL DRONE SYNTH

REV X / BUILD 38

MATERIALBlends eight sound textures. Turn the dial or tap a material name.
VOICEBalances the voices, from a grounded foundation to brighter upper layers.
0
COUPLINGChanges how the voices interact. Left: sympathetic. Right: tangled.
0
MOTIONSets modulation depth. Left: organic. Right: coherent.
+12
MEMORYLets earlier sound return and evolve. Left: blurred trails. Right: distinct echoes.
0
SPACEPlaces the sound in a room or a larger, lingering atmosphere.
0
BETWEENSets the interval between the voices. With generated PULSE, steers the melody's center.
0
Automation idle
DISPLAY FEEDBACK
DRIFT FIELD
RES: —
FPS: 00
FIELD: 0.00
INPUT: IDLE
AUTO / NONE
−∞
DBFS
MUNKI VOICE UNIT
EXPERIMENTAL DRONE SYNTH

REV X / BUILD 38

MATERIALBlends eight sound textures. Turn the dial or tap a material name.
VOICEBalances the voices, from a grounded foundation to brighter upper layers.
0
COUPLINGChanges how the voices interact. Left: sympathetic. Right: tangled.
0
MOTIONSets modulation depth. Left: organic. Right: coherent.
+12
MEMORYLets earlier sound return and evolve. Left: blurred trails. Right: distinct echoes.
0
SPACEPlaces the sound in a room or a larger, lingering atmosphere.
0
BETWEENSets the interval between the voices. With generated PULSE, steers the melody's center.
0