Capacidad, an after-school childcare and enrichment program, needs a new responsive website. Capacidad’s website hasn’t had a substantial overhaul since 2014. Because they haven’t needed to recruit students, as their roster is full, it hasn’t been a priority. However, some parents have expressed difficulty finding information they’re looking for.
I wanted to find out if there were audiences for the website other than parents and determine how new content and design could be attractive to all users. Additionally, I wanted to know what parts of the mission and values of the program resonated with the most users so that the website could be attractive to all audiences while providing important information and resources to parents and guardians whose children are already in the program.
I successfully designed and enhanced a mobile-first responsive website prototype for the after-school program, which garnered encouraging feedback from prototype testers and validated my data-driven approach.
The after-school programs available in the Amherst-Pelham area are challenged with too many kids and not enough resources or employees. Perhaps because of this, many of them don’t have much, if any, information available on the web and don’t have dedicated websites. Of the programs that have any online presence, many lack basic information, such as subsidy options or if they provide transportation.
The haphazard state of the sites that do exist could also be due to the effort of upkeep—administrators of these programs are overstretched.
The independent People’s Institute has the best website of the local bunch, and yet there is a lack of information about costs, subsidies, etc. on their site.
I interviewed 5 people for my primary research: Danielle, 2 parents, and 2 employees. Motivations and values had strong overlap for all 5 interviewees; pain points varied by audience.
One of the three personas that came out of the interviews was slightly different than expected: while the "parent" persona and the "director" persona were directly related to the interviews with those audiences, the interviews with employees made it clear that while current employees might not find much value in the website themselves, it could be valuable to potential employees and motivate them to apply.
“I want to understand the day-to-day of the program and feel connected to what my child is doing when I’m at work.”
“I want something more interesting than a desk job that gives me time for school and career development”
“My passion for our mission motivates me to improve our communications. However, efficiency is key.”
How might we leverage the website to inform and include parents while making it easy to maintain?
How might we create an engaging website experience that makes a good impression on job-seekers?
How might we make the site align with the school’s Spanish immersion program?
How might we make the website accessible and easy to navigate for parents with disabilities?
The project constraints included a short timeline, a limited development budget, and a need for additional and refreshed content. Lightly updating the existing branding was also within the scope of the project.
After trying several sitemaps and clarifying my thinking by diagramming some user flows, I created a sitemap with the goal of making the primary details, operating hours and costs for the after-school program, available from almost every scroll position on the homepage.
For my user flows, I diagrammed the most common task performed on the site, looking up operating dates and costs, and also did several iterations on the user flow of filling out the enrollment and registration form(s) online.
Legend:
Scenario 1: Laura, a parent, wants to know the costs for the after-school program
Scenario 2: Laura wants to fill out her child's enrollment documents online and pay initial fees
I created low fidelity wireframes for the main task flows, as well as some additional flows to clarify how they might work.
.png)
While Danielle had no desire for a complete overhaul to the brand she had been using, the existing branding was limited to a wordmark that she didn’t have a high-resolution or vectorized version of.
I created several options for expanding the brand, from simply recreating the original logomark with an available font so that it could be resizable to changing the typeface more drastically and updating the color and placement of the existing stick figures.
I could tell that the typeface was a goudy style font, and chose Sorts Mill Goudy as a good free option. I also recreated the stick figures and ornaments as vectors:
As an alternative to keeping the logomark and ornaments as close to the existing branding as possible, I proposed a slightly different brand system:
After going through the user flow and low fidelity wireframe processes, it was clear to me that the online enrollment and registration user flow was going to be too ambitious for the scope of this project. I chose to focus on the task flow that Danielle first expressed concern about: making sure users find the costs and hours of the after-school program with no errors. I also developed a contact page based on the contact form at the bottom of the home page, a donation page, and an about us page that would attract potential employees by highlighting the vision, mission, and values of Capacidad Programs.
View prototypeMy metrics of success were mixed: although 5 completed the tasks with few errors, only 2 testers completed the flow as intended. Three testers said they had no difficulties using the site, but two said the navigation was confusing. Two testers felt that different information was more relevant on the after-school page.
Based on feedback regarding the search flow, I decided to make the secondary navigation bar text larger and make the pre-header slightly taller. I also tried different background colors for the pre-header (secondary navigation) and decided on the Mystic Indigo brand color. Additionally, I did more work on the hours and costs tabs on the after-school program page to try to improve the readability of the tabs and moved the cost info up.
Overall, the redesigned website has the potential to greatly enhance Capacidad's online presence, effectively inform parents, and create a stronger sense of community and engagement. By delivering an informative and visually appealing website, Capacidad can continue to serve its mission and provide valuable resources to parents and guardians, as well as attract employees whose values align with the program’s.
I would have liked to concentrate more on the entirely-online registration and enrollment workflow, but it felt like biting off more than I could chew. I’d love to solve that problem as its own project, but it wasn’t the pressing need that the client expressed.
