FriendshipSchools.org is a charter school district website serving multiple users and purposes. The website had become very difficult to navigate after years without strategy. Because there were no guidelines for adding pages or content to the site, there was an ample amount of redundant content and non-existent hierarchy. There were multiple low-resolution images and it lacked brand guidelines.
I led the research, stakeholder meetings and strategy for the website. Additionally, I designed the initial UI for all of the high-impact pages.
The priorities for the site were to increase teacher applications and student enrollment. Google Analytics now shows that the new school directory page I designed is the second most visited page on the site, after the home page with 71,401 page views last year.
What I did
UX, UI, Research, Information Architecture, Content Strategy
Friendship Public Charter School
I started by talking to leaders at the organization to get a better idea of what our most important goals were for the site. It would be crucial to meet organization goals, offer the content our users were seeking, and develop a strong brand to strongly position the school system alongside multiple competitors.
I sent surveys to target users, including teachers, parents, and current staff. I learned about what teachers decided what school they wanted to work at. I also read about how parents chose where they wanted to send their children. I asked:
Who are our target users?
How can we meet their needs?
How can we meet organization goals?
The personas represent the target users of the site. They are based on survey answers, conversations with key leaders and research. The most important site users are the teacher job seeker and parent school seeker. The teacher job seeker is important because every year there is a need to fill multiple teacher vacancies. The parent school seeker is important because every year, we work to increase student enrollment across our schools.
These personas were used to inform the design and content of the most important pages on the website.
School Directory Page
Before this new page was designed, parents had to click around to multiple pages to find what they were looking for. There was a “map” page with links to each campus. On another page, there was general information about charter schools with links to the campuses on the right. And lastly, there was a very long dropdown menu for parents to navigate. None of these pages offered information about what grade levels were offered at each school.
This is the most important pages on the site. It is where parents go to learn about each school and decide where to enroll. It is where teacher candidates visit to learn about options as well.
Because it was previously difficult for parents to learn about the grades available at each school from the previous design, I created a color code. The schools are grouped according to grade level and a color key shows users at a glance the grades at each school. At a glance, on one page, users are able to access all the information the need. They can then click on each school to learn more.
Since the redesign, per Google Analytics, this is the most visited page of the site. Success! I am thrilled to know that parents and candidates can now easily find what they are looking for!
The new homepage begins with an inviting header, showing high quality images of learning. The CTA encourages prospective parents to learn more about enrollment – one of the most important functions of the site. As the user scrolls down, they are presented with impressive statistics, CTAs for enrollment or recruitment purposes, news and events. The page finishes with testimonials and personal anecdotes from teachers, staff, alum, and students.
While the old page did offer a snapshot of upcoming events and news, it lacked strategy to help users accomplish their main goals or positively market the school network. It did not effectively use space, nor guide users to enroll or apply.
It is important to make a good first impression on prospective teachers! Icons provide quick visual overview of why users will enjoy working at Friendship PCS. Quotes provide website visitors with authentic testimonials from the community. Videos showcase top teachers within the network. Icons illustrate selection process.
Randomly scattered low quality photos and multiple fonts make this a difficult to read and uninspiring page.