CATHOLIC SCHOOLS OFFICE
Archdiocese of Boston
TEAM
Liberty Concepts
MY ROLE
Design Lead, UI/UX
TIMELINE
Jun 2018 - May 2019
Catholic schools in the Archdiocese of Boston educate more than 34,000 students in 112 schools. The Catholic School Office (CSO) provides professional development opportunities for school faculty and staff; budget strategy and long-term planning for schools. As their previous site is out of date, the need for rebuilding a new responsive site is increasing.
Problem
The previous Catholic Schools Office (CSO) website was built in Weebly in 2015 which is out-of-date. Since the limited school information, poor function and usability of the site, the site was not a great way to showcase the value of Catholic education or build-up audience engagement. The increasing need for bridging a divide to a younger generation who has an expectation that quality online information and interaction, the client decided to recreate a new website.
Goal
The purpose of creating a new website was helping CSO to showcase the value of Catholic education, increase brand awareness, drive audience engagement, and eventually increase enrollment. To do this, we need to build an attractive-looking website with several core features, optimize the site’s SEO, and integrate social media into the site.
Challenge
Since increasing the brand awareness of Catholic schools is one of the primary goals of the project, creating an appealing visual design that aligned with the Catholic Church’s brand guidelines and meets usability needs was a challenge.
Who Do We Design For?
Four primary audience groups:
1. Parents who are in the Archdiocese of Boston community
2. Students: current middle or high school student, prospective student, and alumni
3. Teachers and leaders in the Catholic education system
Primary Audiences Needs:
-
As a parent, I want to search for catholic schools in my community so that I can find the right school for my child.
-
As a parent, I want to subscribe to CSO’s newsletter so that I can keep the information from CSO updated.
-
As a current student, I want to register for the Catholic School events so that I can engage in my children’s school life.
-
As a teacher, I want to browse job opportunities on the CSO website so that I can apply for a position in Catholic schools.
As a content-exhibition website, there are also needs and requirements from the client-side. So that they can better create and manage the content in WordPress template we built.
Scenic Hudson Needs:
-
As a content editor at CSO, I want to create the testimonial content from school teachers, students, and alumni so that I can provide audiences with information about the value of Catholic schools.
-
As a content editor at CSO, I want to put the Key Stats of Catholic education so that I can provide audiences with a quick overview of the value of Catholic education.
-
As a content editor at CSO, I want to embed our Twitter feed into the new site so that I can increase the online engagement of our organization.
DIGITAL EXPERIENCE
Previous Catholic Schools Office Website
Problem
-
Lack of Schools Search feature and the value of Catholic Schools content.
-
Visually outdated to attract audiences engagement.
-
The site is not responsive.
Primary audiences motivation
In the user groups, Parents and Students are the target audience that CSO try to engage in the new website. Their primary motivation to visit the site including:
A. Learn the value of Catholic schools
B. Search for Catholic schools in the community
C. Browsing school news
D. Register for school events
E. Sign up an email newsletter
Based on that, we incorporated with the client to determine the digital experience components and the information hierarchy on the homepage.
Key features on homepage:
1. Slideshow
Full-screen school life photos and text to engage audiences with more content
2. Key Stats
Outline the value of Catholic schools
3. Faces of Catholic Education
Provide testimonials from catholic school teachers, current students, alumni, and parents
4. Find A School
Search catholic schools based on certain fields
5. School News
6. Upcoming Events
7. Careers in Catholic Schools
8. Twitter feed
9. Newsletter registration
DESIGN ITERATION
Initial Wireframe and Design
Feedback & Problem
1. Difficult to see the menu and prefer a cleaner layout of the start area
2. The overall layout looks empty
3. The “Face of Catholic Education” section is not strong enough
4. "Finding a school" section is not visually attractive
5. “News” and “Events” section looks like unfinished design
6. Move the Twitter feed to a higher position on the page and put the email registration in the footer to show on all pages
Starting Slideshow Iteration
Problem
Difficult to see the menu and prefer a cleaner layout of the start area
Improvement
Changed to hidden menus and left navigation to increase visibility and make the layout cleaner
Improvement
Updated color scheme to red as required
Improvement
Eventually updated color scheme to purple as required
“Faces of Catholic Education” Iteration
Problem
The “Face of Catholic Education” section is not strong enough
Improvement
Updated to a stronger style with more detail content
Problem
Faces section is too long and needs a more delightful style.
Improvement
Applied a bright style and made it shorter
Problem
Prefer not to change the photo color on hovering and a cleaner section background
Improvement
Updated color scheme and hover state, and removed the watermark background
“Find A School” Iteration
Problem
"Finding a school" section is not visually attractive
Improvement
Updated to a stronger style with more detail
Problem
It needs to provide audiences with default schools to discover before the search step
Improvement
Inserted an interactive map to the Find a School section allowing audiences to discover schools directly on the map
Problem
Need a simpler searching process
Improvement
Simplified the searching steps in the Find a School section to reduce the interaction cost for audiences
News and Events Iteration
Problem
“News” and “Events” section looks like unfinished design
Improvement
Updated to a stronger style with a fun interaction
Problem
Need a default background style for News section if a post has no image and text only
Improvement
Provided a default solid color background with the CSO’s icon
Problem
“News” and “Events” section looks like an unfinished design
Improvement
Called out the date to catch the audiences’ eyes. The hover state shows more detail event information
Career, Twitter, and Footer Iteration
Problem
Move the Twitter feed to a higher position on the page and put the email registration in the footer to show on all pages
Improvement
Moved the Twitter feed below “Find A School” section as required
Improvement
Updated a more attractive design for Career section and put the email registration into the footer
DESIGN DECISION
What Did I Learned?
Our client was very pleased with the outcome of the website redesign project. From this project experience, two things that I learned can benefit my future works are:
-
Enhance the efficiency of communication with the client to figure out the real problem when the client provides vague feedback.
-
Ensure the responsive experiences works well across different devices and browser