Vanguard Prep School Website Redesign
Vanguard wanted a clearer way to tell their story. Their website didn’t show the strength of their programs, student success, or staff and leadership expertise. It lacked visual storytelling and a content base for ongoing stories and thought leadership. They also opened a second campus in Aledo, TExas and needed a cohesive, easy-to-navigate site that represents both locations.
Project Type
Custom Wordpress design, custom illustrations, site architecture redesign, SEO optimization, copywriting, photography, creative direction, and user support.
Role
UX/UI Designer, Visual Designer
Timeline
3 months
Tools
Figma, Wordpress, Adobe Illustrator, Google Analytics
Original Landing Page
First plan of attack was to address the site’s architecture. After an extensive audit we discovered several unnecessary and empty pages, and concluded the overall navigation needed a refresh to make the site easier to use and more intuitive for visitors.
Problem Statement
After interviewing stakeholders, we understood the site's hierarchy, which information needed to be front and which could be removed. We then created a sitemap to guide the site's build.
Research
Methods Used
Industry trend analysis completed to find a solid style direction. We also did a deep dive into the current site.
Key Insights
At first glance there was a lack of understanding what the school’s strengths and offerings.
Homepage was lacking hierarchy and solid user flow.
Over use of copy and lack of high quality imagery. The site felt outdated and was overwhelming.
Defining the User
The stakeholders goal was to increase enrollments and drive higher traffic to the site, especially around enrollment dates. So our user focus was potential families enrolling in the school with an emphasis on current families and alumni.
Personas included:
The prospective parent: Looking for a program that fits for their child’s needs
The current parent: Easily accessible login to their account, information about the school and upcoming events. Easy enrollment options.
Alumni: Information on upcoming alumni events.
Design Process
Ideation
After the site architecture was established. Testing styles, colors, illustration styles, layouts through mockups in Figma.
Design Implementation
We hired a photographer to capture high res imagery and videos of the students, teachers, ands school.
The original site was built in Wordpress and the stakeholders wanted to keep the site on the same platform. Once the mocks were completed and signed off, we started to build out the new and improved pages within Wordpress.
My Contributions
All UX and design was done by me.
Icons and illustrations
Creative direction on photo shoot
Accessibility and user testing done online through AccessiBe and Userbrain
Before
After
Accessibility Testing: Ensured compliance with WCAG standards.
Online User testing: Online user testing on the UserBrain platform. We also asked friends and family members to test out the site and give feedback based on a guided questionnaire.
Testing & Iteration
Outcomes
Impact
We reimagined Vanguard’s website in WordPress with a refined visual system that brings together rich photography, custom illustrations, and story-forward design, all supported by a strong technical foundation.
The homepage, navigation, and key interior pages were redesigned with intention, creating a structure that feels intuitive for users and built to scale over time.
Results
844 ranking gains
9 new keywords started ranking
410 keywords no rank on page one of Google
Multiple #1 rankings for key searches