SBA - Website Redesign
UI/UX & Marketing Case Study
Redesign Saint Brigid Academy’s website to simplify navigation, modernize its visual identity, and create a welcoming online experience for parents and prospective families.
Headquarters
San Francisco, California
Founded
1852 (transition to academy 2023)
Industry
Catholic Education K - 8
Revenue
Non-Profit
Company size
50+
Challenge
The existing website lacked a clear information hierarchy and engaging visuals. Parents struggled to locate key details such as admissions steps, program information, and contact links.
Challenge: rebuild the architecture and design while ensuring the interface felt friendly, organized, and aligned with the Academy’s Catholic values.
Outcome & Learning
This project served as a complete hands-on experience in applying a full design workflow for a live school environment from research and strategy to user testing and final delivery.
The final website presented a simplified menu structure, improved page hierarchy, and a welcoming visual tone aligned with Saint Brigid Academy’s community values. Through continual iteration and real user input, each phase of the project contributed to refining both navigation and aesthetics.
User-testing feedback highlighted:
Easier navigation and clearer page hierarchy after restructuring the menu
Noticeably improved readability with darker backgrounds and adjusted text size
Stronger engagement after adding visual elements such as looping video and mission-statement sections on the homepage
Process
Research
Researched other school websites and surveyed parents to identify what design styles and navigation structures felt most intuitive and engaging for families.
Strategy
Redefined the site’s information architecture and created user journeys to simplify navigation, focusing on quick access to the most-visited pages.
Design
Developed low- and high-fidelity prototypes based on feedback, improving layout hierarchy, readability, and overall visual appeal.
Testing
Conducted user testing with parents and staff, gathering feedback that guided the final design adjustments before publishing the new website.
Research & Analysis
During this phase, focus was placed on understanding how parents navigate school websites. Research included analyzing multiple schools, noting design structures that improved usability, and surveying parents to determine preferences.
Persona
During this phase, focus was placed on understanding how parents navigate school websites. Research included analyzing multiple schools, noting design structures that improved usability, and surveying parents to determine preferences.
Maria, 45
Print Media Designer
Goal: provide best education to her child
Challenge: Information overload makes it
hard to scout for suitable schools
Sarah, 40
Print Media Designer
Goal: find schools with extra curricular
Challenge: Wishes to have a preview
of the day to day school life
Jessica, 36
IT Business Analyst
Goal: SE accommodation Catholic school
Challenge: Doesn't know where to start in
order to find an accommodating school
Understanding Traffic
Page Data
Website analytics revealed which pages parents visited most frequently Admissions, Summer Programs, Tuition, and Contact ranking among the top. This data guided decisions on menu hierarchy and homepage layout, ensuring the most accessed pages were placed at the forefront.
Page Visits Data 2023 - Wix
|
Data Sorting & Information Architecture
Before rebuilding the menu, analytics were reviewed to identify the most visited pages. This helped prioritize content and eliminate unnecessary sections.
Strategy & Wireframing
During this phase, focus was placed on understanding how parents navigate school websites. Research included analyzing multiple schools, noting design structures that improved usability, and surveying parents to determine preferences.
Data Sorting & Information Architecture
Using insights from page-traffic data, the website’s structure was reorganized to make navigation more intuitive and user-focused. The goal was to reduce steps to reach essential pages and create a logical flow for both new and returning visitors.
Key pages such as Admissions, Tuition, and Summer Programs were moved to the main navigation bar, while less-frequented sections were consolidated under broader categories like About and Academics.
Before
After
Wireframing & Prototyping
With the new information architecture in place, low-fidelity wireframes were created to explore layout flow and content hierarchy for key pages such as Home, Admissions, and Summer Programs.
Layout Concepts
Before developing high-fidelity prototypes, a series of low-fidelity wireframes were created to test layout structure and content hierarchy across key pages, including Home, Admissions, School Life, and Summer Programs.
After receiving feedback from user testing and the necessary adjustments implemented, it is time to convert it into hi-fi design, for this showcase, you will see the end design for admissions page.
Design & Testing
After the completion of the wireframes, throughout the design process (hi-fi version of the low-fi mockups, constant user testing was conducted to ensure a prestige end product.
Admissions Page
Original
Revised 1.0
Revised 2.0
Final Ver
User Tester 1 “the admission process is still tedious and textually overwhelming.”
User Tester 2 “the white background is making it harder to read the text.”
Original Pages
User Tester 1 “although it provides great info, it doesn't look as welcoming”
User Tester 2 “the white background is making it harder to read the text.”
Redesigned Pages
Final Mockup Showcase
After all of the user testing and necessary adjustments, here's the final preview of the end-product
Style Guide
Typography
Raleway is the main typeface used across the Saint Brigid Academy website for its clean geometric style, giving a modern yet welcoming tone that reflects the school’s academic and community-focused identity.
Color
The color palette draws directly from the school’s brand identity, deep navy blue represents trust, stability, and tradition, while gold symbolizes excellence and faith. Light neutrals are incorporated throughout the interface to ensure clarity and contrast across pages.
Corner Radius
Throughout the SBA pages, images, paragraphs, and buttons will consist of a corner radius of 30 - 50px. Unlike traditional school websites, this makes the page appear both modern and most importantly welcoming/friendly to the visitor.
Aa
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!-+=?
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!-+=?
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!-+=?
Soft Navy Blue
152E64
21 46 100
Off Beige Yellow
E6E793
230 231 147
Baby Blue
3D9BE9
61 55 233
White
FFFFF
255 255 255
Button
r = 50px
r = 30px
r = 30px
