Education Website Redesign

This project was completed in collaboration with Creative & Creator as part of a larger team effort.

My Role: Associate UX Researcher and Designer

Duration: 10 months (June 2024-April 2025)

Tools: Figma, Miro, Google Slides, WordPress, Elementor

The project aimed to redesign and develop Capital City Public Charter School's (CCPCS) website to better represent its brand, enhance user experience, and improve engagement with key stakeholders. The website serves as a resource for families, students, educators, partners, and donors, providing clear navigation and a compelling user-friendly experience. By understanding the needs of these key audiences, we were able to make informed revisions that drove engagement and fostered stronger community connections.

Project Overview

A classroom scene with a teacher and students, one student holding a paper and smiling, others taking notes, on a school website screenshot.
Children drawing and coloring pictures of the Earth with markers at school.
Screenshot of a city website homepage showing upcoming events and photos of children.
Screenshot of a webpage titled 'The Capital City Difference' with a video player and five blue icons below it representing various concepts.

  1. Outdated

  2. Poor design/layout

  3. Hard to navigate

  4. Difficult access to resources

  5. Insufficient information on school programs

  6. Lacks uniformity

  7. Doesn’t meet accessibility needs

  8. Lack of information in Spanish

  9. Poor mobile experience

Current Challenges and Pain Points

Proposed Solution

  1. Modern redesign

  2. Responsive

  3. Ability to be fully translated into Spanish

  4. User Friendly

  5. Streamlined navigation

  6. Restructured IA

  1. Centralized location for educational resources

  2. Integration, accessibility, and support for digital tools

  3. Fully translated website content

  4. Basic orientation and guidance for new parents

  5. Simplified navigation

  6. Integration and support for digital tools

  7. School newsletter integration

Recommendations and Areas of Opportunity

A research timeline infographic with four stages: Strategy Development, Data Collection, Stakeholder Engagement, and Exploration Methods. Each stage has a description of activities involved.

Competitor Analysis - What we were looking for?

  1. How well do competitor schools convey their mission through their website?

  2. What are the strengths and weaknesses of the user experienced on competitor school websites?

  3. What features and functionalities do competitor school websites provide to engage users, and how do they accommodate accessibility needs?

  4. How easily can current and prospective families access relevant information on these sites?

A comparison chart titled 'How we compare' showing different schools and their features in categories such as K-12 Education, Mission Statement, Language Accessibility, Search Capability, Up to date Information, and Consistent Design. The chart uses colored circles and symbols to indicate the level of implementation for each school. The right side has a legend explaining the symbols: a red circle means the school fully implements the feature, a black X means the school does not implement the feature, and a green triangle means the school implements the feature partially or inconsistently. There are decorative elements like cactus and abstract shapes.

  1. Keep it Current: While CCPCS offers a blog, it is not consistently updated. Parents and families highly value timely information about the school, students, and staff. Keeping content fresh and up-to-date is crucial.

  2. Structure is Crucial: Users reported difficulty finding necessary resources due to the websites layout and structure. Improving the information architecture on the CCPCS website will help parents and staff quickly, easily, and effectively access the information they need.

  3. Inclusivity and Accessibility Matter: Although the CCPCS website offers Spanish translation, several pages remain untranslated, which can prevent Spanish-speaking families from obtaining important information. Ensuring full and accurate translations across all pages is essential for inclusivity.

Initial Takeaways

We created and delivered user surveys to better understand the general needs of website users.

Survey

  1. What is the most important information you are looking for as a student, current or prospective parent, current or prospective teacher?

  2. What is your primary reason for visiting the CCPCS website?

  3. What device do you most often use to access the CCPCS website?

  4. What pain points or challenges have you experienced when using the CCPCS website?

Examples of questions that users answered in the survey:

Bar chart titled 'Survey Demographics' showing percentages of survey respondents: 12% Current Students, 35% Current Teachers, 53% Current and Prospective Parents, with decorative illustrations of cacti, a circle, and a yellow shape with black lines.
Screenshot of a survey titled 'What are users saying?' with four quotes from current parents about communication and organization on a website, each in colored text bubbles, and a small target icon in the top right corner.

Interview

Survey results graphic showing user comments about website and advertisement. Comments include suggestions for instructional videos, criticism of advertising, desire for clearer layout, and praise for visual appeal.
“There’s no way to find information about who the coaches are, how to contact them, or what the sports schedule [is].”
“It was a little tricky to find the link to the library site. ”
“Capital City hasn’t had a lacrosse team in probably five years, so I think [that] should be updated.”
“At least half of our families speak Spanish...and I think that it should be represented on the website. I think there needs to be language accessibility”
“I think if the newsletter were easier to find that I think the website would be a better tool.”
A digital infographic about Gloria, a tech-adapting mom. It includes sections on background, motivation, behaviors, pain points, and scenarios. Background mentions her daily routine and language challenges. Motivation lists her educational and support needs. Behaviors describe her technology usage, website interaction, and communication preferences. Pain points highlight challenges with untransliterated content and broken links. Scenarios detail her attempts to use a Spanish website and her strategies for staying informed and supported.

Personas

A presentation slide about Karina, a non-profit manager with a background in U.S. college education. The slide covers her motivation to help her son graduate high school, behaviors like using technology and checking newsletters, and her challenges with finding coach contacts and accessing resources for homeschooling.
Infographic presenting a profile for Jason, a techie, including background, motivation, behaviors, pain points, and scenarios, with a pink circle, purple blocks, and black text on a lilac background.
Homepage of Capital City Public Charter School featuring students in a classroom and library, with sections on admissions, family resources, career opportunities, and reasons to choose CCPCS, emphasizing serving students of all ages and backgrounds.
A colorful infographic advertising programs for all ages, featuring sections for pre-kindergarten, lower school, middle school, and high school, with images of children and students participating in outdoor and indoor activities, including a dance performance event scheduled for February 23.
Image of a flyer advertising an event celebrating Black Art at Capitol City on February 23rd, featuring a performance by dancers in black costumes with gold accents on stage. The flyer also promotes school events, a diverse and inclusive community, and the location in Washington D.C.

Based on this research, a redesign in both the web and mobile app was essential to stay competitive, as well as for families, students, educators, partners, and donors to use as a resource.

A young girl sitting on a mobility scooter outside a school building with brick and glass walls, with the words 'Empowering Lifelong Learners' shown on the image, and a website header for Capital City.
Mobile phone screen displaying a website with a job searching ad targeting students, featuring a group of ethnic diversity students reading a book, and texts highlighting opportunities for all ages and backgrounds.
Screenshot of a website for Capital City, featuring a young girl riding a bicycle at a school or community center with a navigation menu and the phrase "Empoderar a los estudiantes" on the page.