Update "For Families" page to share Program information

[smarziano]

We see on the current /families page that the content is actually about program information, and therefore, in the redesign we want to make change "For Families" to "Early Learning Programs."

@amynicole & @jenmakes have created a few design variations of this page and it has gone through a couple of rounds of edits. For this issue, I am using this design version to share and organize feedback:

Feedback (from my previous Slack messages)

• If a block of information (like "Find & Compare" programs) mimics the homepage, it should always use the same styling.
• I like the Kudos section, and it's a good way to incorporate the testimonials. When first taking a look, I thought it's taking too much space on the page.
• I don't think we need the FAQs collapsible list in v1 because I think all of the FAQs answers listed above can be incorporated into the content. I do like this idea if there are questions that cannot be incorporated.

Page outline

1. "About Early Learning Programs" header image: Use Chicago image (from current "EL images" or new campaign photos (TBD))
2. "Look what we can do!" Can this use the brand styling? Would that be too distracting?
3. "Why does Early Learning matter?"
4. Types of programs: No shapes here on the background. TBD: maybe add information about accreditation and QRIS rating? Use illustrations?
5. Infant & Toddler block: Should we switch this to go in order with age or importance of site function? Site function primarily being getting kids enrolled Preschool.
6. Preschool block
7. Choosing the right program: with shapes background
8. Find and Compare Early Learning Programs: with blue background
9. Kudos: smaller?
10. Footer

[amynicole]

Here are two slight variations that incorporate your feedback, as well as some styling updates to ensure consistency across the site.

Version A strays from the page outline. It does not include "Look what we can do" or "why does early learning matter?" Overall, I felt like they were not adding much information or true value to the page, and were pushing important content further down.

Version B follows the page outline.

[amynicole]

• Please not that I do not have the social media icon font installed on my machine, hence the weird footer. Please ignore. :)

[smarziano]

This is some really great progress! My notes about these versions (in no particular order):

• CCAP should not be program type. It is an assistance program that helps families pay for early learning programs. Keep formatting of CPS, Community-based the same as before with home-visiting below it and de-emphasized as in this version: https://github.com/smartchicago/chicago-early-learning/issues/804#issue-235410815 The most important distinction is CPS vs community-based because this changes how a parent verifies their placement.
• Event calendar is a tentative addition. I do not like adding this and the blog to this top sub-nav bar. I think it should only be in the footer as planned. I think it's getting too busy at the top.
• Do not use any of the "ClicheStock" images for the header or anywhere. They are not loved.
• I love how you incorporated the QRIS rating and the accreditation on this page. I think this is a place where we can request new content. Design is fantastic.
• Keep the "Look What We Can Do!" piece but remove "Why does Early Learning matter?" section on this page.
• Keep application hotline number as part of the nav bar at the top as we see on the homepage (not in the footer).

[amynicole]

Here's an update. I added the hotline to the top bar, but also kept it in the footer.

[smarziano]

I received some great direction from our partners about this programs page. There are a couple of things that they want to achieve on this page that they do not feel like the current page is doing:

• They want to frame Chicago Early Learning programs as programs outside of just preschool or infant/toddler options. So early learning programs can be the types of activities that also happen at the Chicago Public Library or Chicago Parks (see /city-resources) – Note: we also do not want to confuse the user since parents can't apply to those types of programs on chicagoearlylearning.org
• They want the parent to first think about age before they think about which program(s) are approprirate for their child

Here are the tasks that I think need to happen in the next design round:

• Change "Look at what WE can do!" to "Look what WE Can do!"
• Add a section below the "Look what WE Can do!" that will talk about early learning programs in general. Partners have been referring to this as "Landscape of options"... so it is a blurb that tells parents there are all different types of programs including infant/toddler, preschool, and other activities (note: activities might be a good word to distinguish from infant/todder & preschool programs) and then links to /city-resources page
• Then, we need parents to stop and think about what age their child is... They must be 3 or 4 by September to qualify for preschool. If their child will be 5 they should be in Kindergarten. If their child is 0-2 they qualify for infant/toddler programs. Note: our partners thought some interactivity with this would be beneficial. Like a birthday check?
• Then the parent gets to the Preschool, Infant & Toddler, then Kindergarten & Beyond blocks (probably side-by-side, but maybe not equal size since Kindergarten is lower priority). Preschool & Infant/toddler will use the current content, although we want to move away from saying 3-5 for the ages and say 3 or 4 year old to avoid confusion.
• After that, types of programs section should be associated with the Preschool & Infant/Toddler blocks. Then the rest of the page as it is.

Let's use some of our time in our next call to go through this in more detail.

[jenmakes]

Hi @smarziano — here is an update to the For Families/About Programs page based on the order above.

1. Changed the hero text
2. Added "Landscape of Things" text
3. Added Birthdate Checker
4. Added Kindergarten Section and Other Activity Section (visually less prominent than other two)
5. Rest of page is as it was

https://cl.ly/2W3Z0l0B3Q08

I'm wondering if it makes sense to push this 'other activities/beyond blocks' CTA towards the bottom of the page - since it relates more to activities than programs? Kindergarten dictates an age, so tossing it below preschool and toddler/infant programs makes more sense. Plus the photo-block toward the bottom balances the layout.

Alternate Order: https://cl.ly/3S1T1C0e432V

[smarziano]

@jenmakes Pushing the other activities block towards the bottom was the right decision. We are very close to finalizing this design (working off this: https://cl.ly/3S1T1C0e432V), here are notes from our recent meeting:

• We can remove "The Landscape of Things" block (yay!)
• We should order the age blocks from youngest to oldest
• We want to remove the Find & Compare block and incorporate a call to action in the age blocks. So infant/toddler: Find programs, preschool programs: Find programs, and Kindergarten is Learn more.
• Incorporate visuals for "Choosing the right program" section. Our partners thought it would be nice to incorporate a visual into this section to show a classroom and call out some key bullet points. They created a mockup as a suggestion but give us the freedom to do something that will work on the website (and mobile!)

Email that came with illustration for "Choosing the right program" section: "See attached for a rough mockup of what this could look like. I just bubbled up the bullets into four broad categories and did callouts on the corresponding elements in the classroom … the full list can be embedded in the FAQs if someone visiting the site wants further detail.

Aesthetically, it could be a full illustration, an illustration overlay onto a photo, or a simple photo diagram akin to what I’ve done in the attached. Creative license granted!"

2017 7 11_EC DIAGRAM MOCKUP.pdf

Project note about this added design element: Do your best to incorporate this idea, but I know this is an added design element that we didn't have planned initially and we have a lot of pieces going on at once to meet our deadline. This is a lower priority item and should be tackled if you're feeling very excited about it (top reason to tackle anything), think it might be quick, or if you are waiting on me for feedback and have the time. cc: @amynicole

I also want to loop @theandrewbriggs in to see what is feasible for the birthday entry. Will text appear and say something like... "Your child is the perfect age for preschool! Learn more about different programs and apply today!" Did we envision this functioning in a different way?

[jenmakes]

@smarziano For Programs, I made the following edits: I went ahead and removed the 'Landscape' section and locations CTA. I added in buttons to learn more or find locations directly on the age group informational blocks. I also went ahead and took the graphic concept from the Marketing team and creating a ven-diagram, encased in an apple, to illustrate those three main points of a successful program. I really like the idea of the apple metaphor framing this diagram. If we wanted, I could always bring in a white apple core outline - but I don't think it's a needed graphic detail. I did try a photo background for a while, but I found the image was too distracting for all of this content. https://cl.ly/3G29013u1T3k Let us know what you think.

[smarziano]

I sent this version to our partners so that they can review the graphic you created. I think it is fantastic. I am going to keep this issue open and add the "Requires info/approval" label, but I am also going to open another issue to begin implementation since most of this page design is ready.

[smarziano]

@jenmakes Our partners liked the graphic. Their comments: "I think it's great! The only piece of feedback I had been thinking through was if we could incorporate some icons within those circles... it is all word-based right now, and I wonder if we can support families further with some graphics." I've been thinking of other ways of including more graphics into your design and I don't have any additional ideas. If you have any ideas, I would love to hear your thoughts. Otherwise, let's implement this design because the feedback was so positive.

[amynicole]

@smarziano @jenmakes I would suggest that we either: a) implement this graphic as is or b) remove the apple venn diagram graphic and give icons/illustrations to each of the four bullet points

I don't suggest doing both, as it will get cluttered very quickly. The best way we can support families is through clarity, and both of these options would achieve that.

[jenmakes]

@smarziano I didn't touch the apple graphic, but here is this page with an updated illustration up top. I pulled the kids from the Resource and Index page. Just let us know how/if you still want us to explore options for that section.

https://cl.ly/3e0v1C3Q0y3C

[smarziano]

@amynicole I think the apple venn diagram graphic is the way to go. @jenmakes I like the illustration for the top of this page.

I think this issue is ready to close and implementation can continue via #830.