WEBSITE REDESIGN
A redesign of the entire Josephinum Academy school website in order to better reach their target audiences.
PROBLEM
Josephinum Academy is an all-girls independent high school in Chicago, IL. Josephinum is hoping to reach a new demographic of donors as well as communicate more effectively towards prospective families as to why their daughter should apply to Josephinum. However, the current website is a five-year-old template that does not allow for any flexibility in the UI, resulting in poor engagement and communication for their target audiences.
SOLUTION
Our solution for the Josephinum website redesign was to make it more intuitive for their three main target audiences: prospective families, donors, and current families by highlighting the functions and information they look for most. With these changes, we hope to draw more traffic to Josephinum's website and school amongst their target audiences.
INITIAL SITE ISSUES
After an exploratory call with a stakeholder from Josephinum, we were able to determine some of the main issues that they would like resolved with the new site.
DONORS
Trouble driving donors to the
donation pages.
COMMUNICATE TO DONORS:
-
Who we are
-
Why they want to support us
-
Where their donations are going
FAMILIES
Lack of content for prospective
families.
COMMUNICATE TO PROSPECTIVE FAMILIES:
-
The information they need so they are using the website for easy to find information, rather than calling
-
The results of going to Josephinum (e.g. college acceptance rate)
-
Drive them to the apply page
FUNCTIONS
Other issues with formatting, content, and
informational hierarchy.
OTHER SITE ISSUES:
-
IB Program is not highlighted on the site
-
Needs a more obvious path
-
CTA's and search bar are at the bottom of the page
RESEARCH
HEURISTIC ANALYSIS
Our first research method was a Heuristic Analysis of Josephinum.org conducted by each member of the team. This helped us to get to know the website and what needed to be changed.
UX guidelines were given for the following categories:
-
FEATURES & FUNCTIONALITY
-
HOMEPAGE
-
NAVIGATION
-
SEARCH
-
CONTROL & FEEDBACK
-
​FORMS
-
ERRORS
-
CONTENT & TEXT
-
HELP
-
PERFORMANCE
We were to score each one as very poor, poor, moderate, good, or excellent.
The overall heuristics score was 64%, which scores as moderate.
Areas of concern found through the results were:
SEARCH
INFORMATION ARCHITECTURE
FORMS
HELP
RESEARCH
COMPETITIVE ANALYSIS
We then ran a Competitive Analysis of eight similar private high schools, using a list of competitors given to us by a Josephinum supervisor.
The following schools were used in our Competitve Analysis:
-
ST. IGNATIUS CHICAGO
-
REGINA DOMINICAN
-
MERCY MCCAULEY
-
LAKE FOREST ACADEMY
-
NOBLE STREET COLLEGE PREP
-
CRISTO REY
-
HOLY TRINITY
-
STONE RIDGE
Each school website was evaluated based on their use of best UX practices in the following categories:
-
INFORMATION ARCHITECTURE
-
DONOR
-
CONTENT
-
HOW TO APPLY
-
FORMS
-
SEARCH​
-
HELP
-
INTUITIVENESS
-
DESIGN
-
CONTINUITY
We were to score each one as very poor, poor, moderate, good, or excellent.
After analyzing each competitor site, we created a report detailing the best practices established on each site that we hoped to incorporate in our new Josephinum design. See below for our key takeways.
CHANGING "DONATE"
TO "GIVE"
PROGRESS FEEDBACK ON FORMS
CONTENT (MORE INFOGRAPHICS/PHOTOS)
ADD HELP BUTTON
SEARCH PLACEMENT
UTILIZING THE FOOTER (SITEMAP)
MINIMALIST DESIGN
RESEARCH
IN-DEPTH INTERVIEWS
We interviewed 5 parents of children who are currently in the enrollment process for private schools in Chicago. Seven of the questions were focusing on the wants and needs of prospective parents and nine were targeted for donors.
WHAT WE LOOKED FOR
PROSPECTIVE PARENTS
-
What important qualities they look for in a school
-
If they look at high school websites
-
What they look for on there
-
What's the most important information to have on there
-
-
The most frustrating thing about high school websites
WHAT WE LOOKED FOR
DONORS
-
What entices them to donate
-
Process of deciding to be a donor
-
What's the most rewarding part
-
Pain points
-
How likely they are to donate to the school their child attends
-
What factors increase the likeliness​
-
KEY INSIGHTS
It is important for donors to see exactly where their money is going and that it is benefitting their daughter's education.
DONORS
"At the end of the day, you're hoping that the money is going to the education of the children and that your child is going to benefit from those funds."
-Karen
Word of mouth, social events, and contact information given on the website are the primary ways parents get information about the school.
PARENTS
"I mainly got information through word of mouth and also talking to the contacts given on the website."
-Dora
Donors want to see a mission statement, genuine school pictures throughout the site, recognition, and quantitative information about the donation programs.
DONORS
"I often visit the websites to do research before donating. I like to see a compelling mission statement, images, and data and numbers to see who it is effecting.
-Sarah
USER PERSONAS
We created two user personas based off of Josephinum's target audiences, as well as from our data gathered in our in-depth interviews with parents and potential donors.
The Jones Family, a low-income family who is currently looking at high schools for their two daughters. This persona helps us to understand how prospective families use the website.
​
​
Martha Laughlin, our prospective donor persona, is an alumna of a Sacred Heart school and helps us to understand what drives donors to give to a specific organization or school.
SKETCHING & SKETCHBOARD
After conducting the competitive analysis and determining what we like and don't like about competitor schools' websites, I developed five sketches to display new formatting and design ideas for the Josephinum site.
SKETCHES
We then compiled all of the sketches together (each team member sketched some as well) and created a sketchboard with comments about which design features we liked best from each.
STORYBOARD
From here, we began to create our low-fidelity prototype that was then used for usability testing.
Take a quick glance at the evolution of the Josephinum site with our stages of prototypes.
CURRENT SITE
LOW-FIDELITY PROTOTYPE (used during testing)
FINAL PROTOTYPE
PROTOTYPES
RESEARCH
USABILITY TESTING
Five usability tests were conducted on our low-fidelity prototype with a script asking participants to think aloud while completing nine tasks that were related to our primary user goals.
Most of our findings from the tests had to do with issues in our low-fidelity prototype. Here were some of the key insights:
Participants had trouble deciphering buttons and why they were there. Many noted that the give and apply buttons needed to stick out more.
BUTTONS
"I didn't even see the apply button the first time I looked at the site.."
-Graham
Many participants thought that the header was too cluttered. They could not identify what the icons were and noted that they wished contact was in the header.
HEADER
"Why are there so many icons and purple in the header?"
-Pam
Our sub-navigation design was not helpful to users and contributed to some of the stylizing issues in the prototype.
SUB NAV
Only one out of five participants used the sub-navigation regularly.
FINAL PROTOTYPE
After usability testing, we gathered our main key findings as well as issues found in our other main research methods and made the finishing touches to our final prototype.
Here are some of the main changes we made after the usability test based off of our key findings:
Scrolling header for extra buttons
Improved sub nav
Search and contact at top of page
Improved give and apply buttons
Improved give and apply buttons
LOW-FIDELITY PROTOTYPE
FINAL PROTOTYPE
Bookmark for header
Image carousel with statistics about Josephinum and college prep
News and Calendar accessible from the homepage
HOME PAGE
Cards with the most important links added to quickly be viewed above the fold
Donors noted they wanted to see a compelling mission
IB Program can be accessed directly from home page
GIVE PAGE
Gift amount and designation added to provide more information about their donation
Changed "donate" to "give"
APPLY PAGE
Parallax created to intuitively display more impages
Help button added
Infographic to show donors where their donations are going
FINAL PROTOTYPE
After usability testing, we gathered our main key findings as well as issues found in our other main research methods and made the finishing touches to our final prototype.
Here are some of the main changes we made after the usability test based off of our key findings:
Scrolling header for extra buttons
Improved sub nav
Search and contact at top of page
Improved give and apply buttons
Improved give and apply buttons
LOW-FIDELITY PROTOTYPE
FINAL PROTOTYPE
Bookmark for header
Image carousel with statistics about Josephinum and college prep
News and Calendar accessible from the homepage
HOME PAGE
Cards with the most important links added to quickly be viewed above the fold
Donors noted they wanted to see a compelling mission
IB Program can be accessed directly from home page
GIVE PAGE
Gift amount and designation added to provide more information about their donation
Changed "donate" to "give"
Infographic to show donors where their donations are going
APPLY PAGE
Parallax created to intuitively display more impages
Help button added
Form shows progress bar at top
Application information is more organized with dropdowns at the top
To view the rest of the final prototype, click here.