Inform parents about program details and engage potential employees

mobile mockup of capacidad contact us page
mobile mockup of capacidad homepage
mobile mockup of capacidad about us page
mobile mockup of capacidad after-school program page
mobile mockup of capacidad menu

Project overview


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.

My impact

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.

Capacidad Programs;
Danielle Phillips, Executive Director
120 hours
Figma, FigJam, Excalidraw, WordPress
View final prototype

01. Research

Research plan

Research goals


Secondary research

Competitive analysis

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.

Primary research

User interviews

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.

Logistics (4 of 5 users)
Convenient hours, transportation, specific date coverage, ability to enroll
Activities (4 of 5 users)
Has value for the children, enjoy participating and look forward to returning
Safe and Social (4 of 5 users)
Personal issues addressed promptly, children well-monitored, well-socialized
Frustrations and pain points
Can’t find the information
(3 of 5 users)
If parents can’t find hours or costs, they don’t know if it’s worth trying to enroll
Lack of visibility, awareness
(2 of 2 employees)
Employees want activities highlighted more, showcase value beyond just child-care
Lack of availability, expensive
(2 of 2 parents)
Not enough spots in the school-hosted programs, other programs are too expensive


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.

capacidad persona image Laura Benson

Laura Benson, 39

Inquisitive Parent

Laura is a detail-oriented parent who wants to stay informed about all aspects of the after-school program. Laura believes that a well-organized and visually appealing website would make it easier for her to make informed decisions.
“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.”
Needs and Goals
  • Quickly access important information about the program, like operating hours
  • Stay informed about schedule changes
  • Learn about program philosophy and staff qualifications
  • Program aligns with personal values and beliefs
  • Values transparency and open communication from the program staff and administration.
Frustrations and Pain Points
  • Important information isn’t as accessible as she’d like
  • Doesn’t know as much about daily operations and activities as she’d like
Persona headshot for Isabella Sawyer; young woman in jean jacket smiling with outdoor background

Isabella Sawyer, 19

Young job seeker

Isabella is looking for a job at an after-school program. She's interested in a company's values and philosophy and wants to learn more about them. Isabella values clear and easy-to-use websites, especially when it comes to checking her work schedule.
“I want something more interesting than a desk job that gives me time for school and career development”
Needs and Goals
  • Learn about the company's philosophy and values
  • Find info about work schedule and responsibilities to see if it's a good fit
  • Work for a company that values employees, provides a supportive work environment
  • Sees the website as an important tool
Frustrations and Pain Points
  • A hard-to-use or outdated website makes it less likely she’ll apply for the job
  • Current website is only geared toward parents; doesn’t give any information about what staff do
Headshot for persona Danielle Phillips, a black woman in a moto jacket

Danielle Phillips, 40

Busy director

Danielle is an executive director who oversees all aspects of the program. She's juggling multiple responsibilities and looking for ways to be more efficient. She values simplicity and ease of use, but also wants the site to be appealing and user-friendly.
“My passion for our mission motivates me to improve our communications. However, efficiency is key.”
Needs and Goals
  • Maintain website with ease
  • Free up time for other tasks
  • Ensure website provides accurate clear and easy-to-find
  • Streamline website tasks so she can focus on higher-level projects
  • Improve the website's user-friendliness to enhance experience for users.
Frustrations and Pain Points
  • Not enough time for everything
  • Not happy with aesthetics of current website; user-friendliness could also be improved


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?

02. Define

Ideation & prioritization

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.

I prioritized the highest-value features:

Information architecture sitemap

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.

User & task flows

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.


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

03. Design

Low fidelity wireframes

I created low fidelity wireframes for the main task flows, as well as some additional flows to clarify how they might work.


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.

Capacidad's long-standing logo: stick figure kids interacting with the wordmark

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:

a gently updated version of the wordmark

As an alternative to keeping the logomark and ornaments as close to the existing branding as possible, I proposed a slightly different brand system:

Proposed Capacidad brand system, lightly updated from previous version with new font and colors
mobile mockup for 4 wireframes

04. Prototype & test

High fidelity wireframes & prototype

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.


Wireframe side-by-side of desktop and mobile homepage for capacidad

After-school page

Capacidad after-school info page desktop and mobile wireframes

Donate page

High fidelity mockup of Capacidad donate pageView prototype

Usability testing

My 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.

Expected results

Unexpected results

Changes made based on feedback

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.

After-school hours and costs UI revision before and after

05. Final thoughts & next steps

Final thoughts

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.

Next steps

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.

Freeflow for Instagram