Stratford Schools
A multi-site website redesign to increase web and phone conversions
PROJECT OVERVIEW
What is Stratford Schools?
Stratford Schools is a private, college-preparatory school serving students from preschool
through high school across the Bay Area. The school combines a rigorous academic curriculum
with opportunities for creativity, exploration, and personal growth.
My Role & Responsibilities
UX/UI Designer & Researcher
I co-led the end-to-end UX process, partnering with my colleague, team, and Stratford stakeholders to conduct research and design four scalable website templates across the school’s different age groups.
Team
2 UX/UI Designer & Researchers
1 Director of Web Product Marketing
1 Web Product Marketing Manager
3 Developers
Timeline
1 month / June 2025 for research
3 months / July - October 2025 to design 4 scalable websites
Tools
Figma
Figma Slides
Zoom
Google workspace
EXPLORING THE PROBLEM & DEFINING BUSINESS NEEDS
Our team met with the stakeholders to understand the problem, learn their goals, and what
they wanted to accomplish with this website redesign.
“What is Stratford Schools trying
to achieve through this redesign?”
The challenge:
Translate the Stratford experience families know and value into four scalable website templates for preschool, elementary/middle school, high school, and the umbrella site that feel equally welcoming, engaging, and authentic.
Design each template to be flexible enough to scale across multiple Stratford campuses.
Increase web and phone conversion rate.
Drive more direct and organic traffic to attract new prospective families
SOLUTION
We designed four flexible website templates for Stratford’s preschool, elementary/middle school,
high school, and umbrella sites, allowing multiple campuses to share a consistent experience while
highlighting what makes each school unique. The new experiences bring Stratford’s students, community,
academics, and campus life to the forefront in a way that feels warm, engaging, and student-centered.
Stratford Umbrella Site
Stratford Preschool Site
Stratford Elementary/Middle School Site
Stratford Prep High School Site
UNDERSTANDING THE FAMILIES BEHIND THE EXPERIENCE
Before redesigning the websites, we wanted to understand what families needed from Stratford’s
digital experience and where the existing experience was falling short. My colleague and I used a range
of research methods, including user interviews, a stakeholder survey, competitive analysis, and an audit
of the existing website, to uncover key needs, pain points, and opportunities that would guide the redesign.
Key Findings from the User Interviews
Our conversations with 9 families revealed key themes that helped us identify gaps in the
existing experience and opportunities to make meaningful improvements.
“Having a strong curriculum was important but we still wanted it to be flexible enough to allow our daughter to explore other interests.”
Key Themes:
Balanced curriculum: strong academics, SEL, arts/music, sports
A warm, comforting, safe environment, where students are happy
Knowledgeable, warm, caring teachers and admin
Peer groups for their children and a like-minded parent community
These insights became the foundation for the new website templates
and guided our design decisions throughout the project.
HEARING FROM THE SCHOOL STAFF
While my team and I met with key stakeholders weekly throughout the project, we also
wanted to hear from the broader Stratford community. We sent a survey to school staff
to understand what they valued about the current site, what they felt could be improved,
and ensure their perspectives were represented in the redesign.
One of our questions was:
“What would you like to see on the websites
that is currently missing?”
Make the Info More Visible
Programs and club options are not represented on the website; add more details about the curriculum and schedules.
Specific Campus Info
Each page should be individualized with specific content that relates to that particular campus.
Tuition Page Pricing
Pricing is not currently shown for all grades and should be.
More Warmth
Have a more family, same, nurturing feel; show partnership
between parents and teachers.
Modern Aesthetic
Website is outdated and needs a more modern feel.
Professional Photos
Larger, more professional-looking images, showcasing all the
age groups taught, from preschool to high school.
AUDITING THE EXISTING EXPERIENCE
To complement what we heard from families and stakeholders, we audited the existing site’s
content and structure to understand what information each school needed and where there
were opportunities to simplify and consolidate. We then mapped shared content across
campuses to create a scalable structure for each website template.
The sitemap shows the shared pages across campuses using the Elementary/Middle School template. Each school is represented by its school number across the top row, with each “X” indicating which pages were included each school’s website.
BRAND IDENTITY: A COLOR PALETTE FOR EVERY STAGE
My colleague and I evolved Stratford’s existing color palette to create distinct visual identities for each school
experience while maintaining a cohesive brand. The umbrella and elementary/middle school sites stayed closest
to the core navy and dark red colors, while the high school used deeper, more mature tones and the preschool
incorporated brighter reds and Stratford’s secondary yellow, orange, green, and blue as playful accents.
BRINGING THE RESEARCH TO LIFE
With the research and design direction established, we translated these insights into
warmer, more modern digital experiences. Professional photography, a refreshed visual aesthetic,
and key pieces of information that were previously missing, helped create experiences that feel
welcoming, trustworthy, and reflective of the caring school community.
Umbrella Site: Homepage
After
Before
Preschool Site: Program Page
Before
After
Elementary/Middle School: Admissions Process Page
After
Before
High School: College Counseling Page
After
Before
DESIGN IMPACT
A scalable foundation for four distinct school experiences
Four responsive website templates
Distinct visual identities within one brand
Age-group-specific visual/content approaches
Stakeholder-approved designs
Development-ready handoff
Project Status
Following stakeholder design approval and developer handoff, the project is currently on hold
due to development budget and bandwidth constraints, with conversations ongoing about
resuming implementation.
REFLECTIONS MOVING FORWARD
Designing with the bigger picture in mind
Designing four related multi-site experiences pushed me to think beyond individual pages and consider how design decisions would work across an entire ecosystem. I learned to identify patterns that could create consistency without limiting the needs of each site and its audience.
Balancing competing needs
Working closely with stakeholders throughout the research and design process helped balance business goals, user needs, and the practical requirements of creating a cohesive multi-site experience.
View More Projects:
