Marian Middle School

Website redesign for an all-girls faith-based middle school

Site marianmiddleschool.org

Role Freelance at Good Citizens

Type Client website

Evidence Project record + archive

Measurement None retained

Archive View before →

Overview

Freelance designer on the Website 2.0 redesign, working through Good Citizens: I did the information architecture, the design, and the front-end build. Marian Middle School is an all-girls, faith-based school in Saint Louis, Missouri. The Website 2.0 redesign replaced a navigation-heavy legacy site with a structure built around three audiences: prospective families evaluating enrollment, community volunteers and donors, and current faculty. Every primary user action needed to be reachable in one or two clicks.

The Challenge

The original site's navigation followed internal school departments instead of how each audience thinks about Marian. Critical conversion paths were buried: enrollment, volunteer sign-up, and event attendance. There was no visual hierarchy, no measurable outcome data to anchor credibility with college-track families, and no event system to drive community engagement around fundraising.

Redesigned Marian Middle School homepage. The five-item global navigation reads About Us, Admission, News & Events, Get Involved, Donate. Below, a full-bleed student photograph with three call-to-action cards: Innovative Programs, Get Involved, and Enroll Now

Before

marianmiddleschool.org before redesign: April 2016

View archived site →

After

marianmiddleschool.org after redesign: Website 2.0, 2017

Visit current site →

Approach

The redesign started with an IA audit of the legacy site, mapping each audience to the tasks they actually arrived to complete. That audit set the structure and everything downstream. It decided which paths belonged in the global navigation and what the homepage had to resolve above the fold. The school could present its identity without forcing every reader through the same door. Each screen below shows the assumption it was built on and the check it had to survive.

Footer of the redesigned site showing four navigation columns: Get in Touch, Get Involved, Our School, and News & Events, alongside the school address, phone number, and a Website 2.0 by Bobby attribution — Information architecture: four stakeholder-oriented navigation groups

01 Information Architecture

Six department-shaped sections became five audience-shaped ones. Amber marks the single promotion: Donate, lifted out of Support Marian to stand alone. Dashed red marks what left the primary navigation for the footer.

02 Content Strategy

Three doors, opened before the scroll

Homepage: three above-fold CTAs for enrollment and volunteer conversion

observed Capture of the shipped homepage, 2017. Placement was checked by visual QA at 1280px; no analytics were instrumented against the new structure, so nothing here claims conversion.

Design input: Homepage must drive enrollment and volunteer conversion above the fold
Action: D-001 Three CTA cards
Verification: Visual QA: CTA cards present above the fold at 1280px desktop
Outcome: H-001Not measured
Why: Lead the homepage hero with student photography over illustrated graphics or empty color field. Authentic photography creates emotional connection faster than abstraction for prospective families evaluating a school. Benchmark review of peer faith-based school sites

Impact section displaying four headline statistics: 87% interested in STEM, 233 alumnae, 96% graduate high school, 84% attend college, with the Educating Girls for Life tagline — The numbers the school already had

Outcome data anchors academic credibility

observed Capture of the shipped impact section, 2017. The figures came from a printed packet the school gave new parents; what was verified is that they were shown and attributed, not that they are correct.

Design input

Academic outcomes must anchor credibility for college-track families

Actions

D-005 Impact metrics section with 4 headline stats above foldD-008 Student outcome story: named student with attributed administrator quote

Verification

Display and attribution verified from the artifact. The figures themselves were supplied by the school and their accuracy was assumed

Outcome

H-005Not measured

Why

Add an impact metrics section with hard outcome numbers. Prospective college-track families evaluate school quality through measurable academic outcomes not marketing language. Enrollment manager provided outcome data from school records

Testimonials section headed Marian supporters share their stories, featuring Phil Treacy labeled as Volunteer with a quote about his 10 years of involvement, alongside four other community member headshots in a carousel — Named neighbours, not institutional copy

Social proof: community testimonials carousel

observed Capture of the shipped testimonials carousel, 2017. Including named voices at all was the designer's call; which voices appeared was the school's.

Design input

Social proof needed to support volunteer recruitment and family trust

Action

D-004 Testimonials carousel with named community members labeled by role

Verification

Presence of named voices with roles and photographs verified from the artifact. Selection of the individual voices was the school’s

Outcome

H-004Not measured

Why

Build testimonials as a photo carousel with named community members and explicit role labels. Volunteer recruitment requires trust signals from named peers; anonymous quotes have no social weight. No direct research; pattern borrowed from nonprofit sector best practice

03 Brand Development

One superfamily, two registers, and a palette that separates identity from action. Navy stands for the institution, gold marks what matters, and teal is reserved almost entirely for things you can click. That distinction lets a parent scan a page and find the interactive parts instantly.

Freight Text Pro · 400

Educating Girls for Life

Marian is an all-girls, family-focused, faith-based school. Students receive a transformational education throughout middle school and graduate support through high school and college.

AaAaAaAa

Freight Sans Pro · navigation

01 / 05 Freight Text Pro · 400

The Marian wordmark is set in a serif. That serif was already doing the school's talking: a slightly academic register a family reads before they read a word. The typeface had to extend that voice without competing with it. It also had to survive digital interfaces, where a text serif by itself becomes a liability. Navigation, labels, buttons and form fields all need a face built for short bursts at small sizes. Freight answers both. Freight Text Pro is a book face doing school work: sturdy serifs, moderate contrast, and a generous x-height that holds a long paragraph together for a parent reading admission policy on a phone. The sans, Freight Sans Pro, takes the interface in the same proportions. One family, two registers, so the character of the wordmark survives all the way down to a button label.

Grid

Root: 10px: html { font-size: 62.5% }
Body: 20px / 32px body: 1.6 ratio
Baseline: 32px
Step: 4px

Contrast audit

Pair	Ratio	WCAG
Aa White on Brand Navy hero, footer	19.30:1	AAA
Aa Brand Navy on White body copy	19.30:1	AAA
Aa Gold on Brand Navy eyebrow labels	12.91:1	AAA
Aa Teal on Brand Navy links on dark	7.86:1	AAA
Aa Teal on White link text, default	2.45:1	FAIL
Aa White on Teal button label, default	2.45:1	FAIL
Aa Teal Deep on White link, hover	5.08:1	AA
Aa White on Teal Deep button, hover	5.08:1	AA

02 / 05 Foundations · grid & colour

A 10px root made every authored rem evenly divisible, and the type was set at 20px on a 32px line, the baseline everything else answers to. Spacing runs a quarter/half/whole ladder off that baseline and holds at 90% across authored selectors. The colour layer was tokenised too: named utilities, no raw hex. Enforcement was absent. Nothing measured grid adherence, so the framework's scale drifted in below 4px. No check computed contrast, so the default link colour shipped at 2.45:1 while the compliant value sat unused on hover. Both failures are visible a decade later in the stylesheet itself.

FaithEducationCommunityRespectService

Faith-Filled Life

While respecting the religious tradition and heritage of each of our students, Marian manifests those values in all our efforts and models what it means to live a life grounded in living one's faith.

Learn more about Marian →

1 Sans · uppercase · teal marks the active pillar
2 Serif headline · the only display step
3 Serif body · 2rem / 3.2rem
4 Sans link · teal, the interactive colour

03 / 05 Value pillar · Faith

Four typographic levels do all the work inside a value tab: a sans tab label in teal to mark the active pillar, a serif headline, serif body at the reading setting, and a sans link back out. No rules, boxes or colour blocks; hierarchy comes from face, size and space alone. That is why five pillars can share one panel without competing for the same attention.

H-003 · tested Brand must communicate faith identity without alienating non-Catholic prospective families. Verified by stakeholder content review against the brand brief.

Type scale

DisplayEducating Girls

HeadlineFaith-Filled Life

Body2rem / 3.2rem reading setting

LabelNAVIGATION · UPPERCASE

Palette

Brand Navy #000f1f
Navy Darker #002142
Gold #fece06
Teal #24b5cc
Teal Deep #1b7988

Buttons

I'm Going! I'm Going! default · hover

Form

your@email.com Sign up

Iconography

Innovative Programs
Get Involved
Enroll Now

Single-weight line · gold · always paired with a sans label

04 / 05 Icons · buttons · forms

Iconography is single-weight line at a consistent stroke, drawn in gold so it reads as emphasis, and always paired with a sans label plus LEARN MORE microcopy; never asked to hold meaning alone. Teal does exactly one job: if it is teal, it is interactive. Buttons deepen to teal-base on hover, form fields take the same treatment, and every card resolves to a single action.

W1 · recorded Palette adopted from the client brand brief and existing logo. Logged with its assumption, but never verified against a stated threshold.

Open Graph card image for Marian Middle School — 05 / 05 Canonical presence · search & social

The surfaces nobody art-directs still show the identity. This page ships a canonical URL, a full Open Graph set and a summary_large_image Twitter card pointed at @Marian_Middle, so a link pasted into a feed renders as a designed object. Its description is written for a parent scanning a results page. It leads with what the school is before what it offers. The card image is one of the three homepage hero slides, doing double duty. One photograph serves the hero, the share card and the search thumbnail. The identity survives contexts the designer never sees.

Value positioning page with five horizontal tabs: Faith, Education, Community, Respect, Service. The Faith-Filled Life panel is open, with a Learn More about Marian CTA and a news feed below — Faith leads without becoming a filter

Brand positioning: tabbed value pillars

observed Capture of the shipped positioning page, 2017. The position was argued by the designer and adopted by the school, not derived from audience research.

Design input

Brand must communicate faith identity without alienating non-Catholic prospective families

Action

D-003 Tabbed value pillars: Faith · Education · Community · Respect · Service with individual deep-dives

Verification

Designer-argued brand position, adopted by the school. Content checked against the brand brief. Not independently verified

Outcome

H-003Not measured

Why

Organize brand values as horizontal tabs rather than a list or separate pages. Multiple stakeholder types (families / donors / alumni) need distinct entry points into the school's identity without landing on separate pages. Stakeholder workshop; 4 staff roles represented

Success story section with full-bleed photo of a student and a school administrator, overlaid with the quote: Paola is a woman of high integrity and she works extremely hard — One student, told by name

Student outcome stories

observed Capture of the shipped success story, 2017. The student, the photograph and the administrator's quote were supplied by the school.

Design input

Academic outcomes must anchor credibility for college-track families

Actions

D-005 Impact metrics section with 4 headline stats above foldD-008 Student outcome story: named student with attributed administrator quote

Verification

Display and attribution verified from the artifact. The figures themselves were supplied by the school and their accuracy was assumed

Outcome

H-005Not measured

Outcome

Website 2.0 launched in 2017. Enrollment and fundraising each got a separate path to walk. The school's outcome record was surfaced as a credibility anchor for college-track families, no longer left in a PDF: 87% STEM interest, 96% high school graduation, 84% college attendance. Community engagement gained an event system built around a live countdown for fundraisers like Girls Night Out.

Measurement note

This record holds no post-launch measurement. No analytics were instrumented against the new structure, so every claim here is about what shipped and how it was verified, not about what it moved. The outcome figures quoted (87% STEM interest, 96% high school graduation, 84% college attendance) are the school's own published record, surfaced by the redesign rather than produced by it. The durability claim is read from the Internet Archive.

Traceability

Seven design inputs. Each names what satisfies it, how that was verified, and what the record says happened afterwards. The record shows one reflected, six not measured.

7 of 7 items

ID	Hypothesis	Acceptance Criteria	Verification Method	Outcome
H-001	Homepage must drive enrollment and volunteer conversion above the fold Assumed	All three primary conversion paths reachable in one click from the homepage	Visual QA: CTA cards present above the fold at 1280px desktop	Not measured
H-002	Navigation must surface all stakeholder paths without deep drilling Evidenced	Every key user journey reachable in ≤2 clicks from any page	IA audit of every navigation item against the site map, scored against a ceiling set before designing	Reflected 2026
H-003	Brand must communicate faith identity without alienating non-Catholic prospective families Assumed	All 5 pillars visible; Faith tab leads but does not dominate	Designer-argued brand position, adopted by the school. Content checked against the brand brief. Not independently verified	Not measured
H-004	Social proof needed to support volunteer recruitment and family trust Assumed	≥1 volunteer and ≥1 parent or alum voice present; names and photos visible	Presence of named voices with roles and photographs verified from the artifact. Selection of the individual voices was the school’s	Not measured
H-005	Academic outcomes must anchor credibility for college-track families Assumed	87% STEM interest, 233 alumnae, 96% HS graduation and 84% college attendance are displayed and attributed, and at least one named student outcome story is present	Display and attribution verified from the artifact. The figures themselves were supplied by the school and their accuracy was assumed	Not measured
H-006	Event engagement requires low-friction RSVP and real-time urgency Assumed	Event page live with functional countdown; email capture form present	Functional QA on the countdown widget and the email capture form	Not measured
H-007	Footer must serve as a secondary navigation hub and primary contact source Assumed	All major site sections reachable from footer; phone and address visible; faculty portal linked	IA audit: footer columns checked against every top-nav destination plus secondary paths	Not measured

Decision Log

Every decision with its date, the assumption it tested, and what came back. Kept as a running record, written at the time.

Date	Decision	Rationale	Assumptions	Outcome	Evidence
Week 1
Jan 1	Adopt navy blue (#1e3a8a) and gold as the primary brand palette	Color anchors all UI elements; gold used for interactive states and CTAs to create visual hierarchy against the navy	School identity ties to traditional Marian blue and gold	Confirmed	Client brand brief + existing logo
Week 2
Jan 8	Elevate Donate to a standalone top-nav item	Moved from footer to rightmost top-nav position alongside Get Involved; both actions visible at all times without interaction	Fundraising is a survival-level priority that cannot be buried in a sub-menu	Confirmed	Stakeholder kickoff; development director present
Week 3
Jan 15	Lead the homepage hero with student photography over illustrated graphics or empty color field	Two students in school uniforms in front of the Marian star logo anchors hero; immediate brand identity and community signal	Authentic photography creates emotional connection faster than abstraction for prospective families evaluating a school	Confirmed	Benchmark review of peer faith-based school sites
Week 5
Feb 1	Organize brand values as horizontal tabs rather than a list or separate pages	Tabs: Faith · Education · Community · Respect · Service; each links to deeper content; scanning without scrolling	Multiple stakeholder types (families / donors / alumni) need distinct entry points into the school's identity without landing on separate pages	Confirmed	Stakeholder workshop; 4 staff roles represented
Week 7
Feb 15	Add an impact metrics section with hard outcome numbers	87% STEM interest · 233 alumnae · 96% HS graduation · 84% college attendance; data sourced and stakeholder-approved	Prospective college-track families evaluate school quality through measurable academic outcomes not marketing language	Confirmed	Enrollment manager provided outcome data from school records
Week 9
Mar 1	Build testimonials as a photo carousel with named community members and explicit role labels	Phil Treacy (Volunteer) and 4+ others shown with headshots; carousel keeps page length manageable	Volunteer recruitment requires trust signals from named peers; anonymous quotes have no social weight	Confirmed	No direct research; pattern borrowed from nonprofit sector best practice
Week 13
Apr 1	Add a live event countdown widget to the engagement page	Countdown live and confirmed functional by ~June 26 2017 (81 days before Sept 15 event based on screenshot)	Time-limited visibility drives RSVP conversion for high-value fundraising events like Girls Night Out	Confirmed	Client request; Girls Night Out historically undershoots attendance goals
Week 15
Apr 15	Pair event countdown with an email newsletter capture below it	Envelope illustration and email input directly below countdown; visual hierarchy from urgency to sustained engagement	Event attendees are the highest-intent community members; capturing email extends the relationship beyond the single event	Confirmed	Conversion pattern from comparable nonprofit and school sites; client approval
Week 17
May 1	Structure footer as a 4-column navigation hub mirroring top nav	Columns map exactly to top nav categories + Get in Touch; Teacher Ease portal retained; address and phone prominent	Users reaching page bottom have highest intent and need secondary wayfinding without scrolling back; faculty need a direct portal link	Confirmed	IA audit of legacy site showed footer was a single column with no hierarchy