Update FAQs page design

[smarziano]

Here are two versions of designs for the FAQs page:

I shared some notes with @amynicole on our recent check-in call, but I will also add them here:

• I prefer the second design because I think the first requires a lot of clicking for parents to find the information that they are looking for. Even if we condense the questions, I think B is the better version.
• My concern with version B is that the questions vary considerably in length and might not be as clean as the design here.

[theandrewbriggs]

General Note: I had to remove the FAQ app as part of upgrading Django. As part of the redesign (specifically for June 30th Outreach launch), I'll hardcode the FAQ entries on a static page. We'll come up with a better, dynamic solution as part of Phase 3.

[amynicole]

FAQ, updated to show different answer lengths.

[smarziano]

@amynicole I don't see any edits to the design of this (except replacing the stock image). I did have a question that I was not sure about and that relates to the question bubble illustration. Will those be the same across the four sections or do we want to have 4 different illustrations?

@theandrewbriggs Technical question before we move forward is how will our FAQs links work? For example: we have a specific url for every question that takes the user to that page. Will that still be possible in this design?

[amynicole]

@smarziano The imaged changed, and the placeholder copy changed to show what the layout will look like with different content lengths.

We will have 4 different illustrations.

[smarziano]

Update: It looks like a lot of work has been done to the FAQs content. I have asked our partners if the content is ready for implementation. I should hear back in a day. The biggest change to this page is that there may be a different number of sections. cc: @theandrewbriggs

[smarziano]

I received the updates to the FAQ content. I will create a new issue for the implementation of the FAQs with the content. In terms of the illustration designs, the sections are:

• Finding a Preschool Program
• Applying to a Preschool Program
• Verifying an Application and Enrolling in a Preschool Program
• Other FAQs

Another thing to consider with the design is the fact that there might be more questions in one section than in another.

This Google document has all the content for your review and design consideration: https://docs.google.com/document/d/1wXy10aqKNaC2Wuz7tqPBX2rog5qNwEH2_qxuVVPeDl8/edit?usp=sharing

[jenmakes]

Hi @smarziano ! I'm back in town — I was out most of last week. Here are the illustrations I think we should tie back to the FAQ section. I wanted to tie these back to the relevant 'How It Works' graphic. I also updated the top half to include the new FAQ links. There are so many links, so I think this is the most balanced we can get the two columns to be. https://cl.ly/0I3f283W0V22

[smarziano]

Great! The only thing that I think needs to be changed is the fact that the Applying for a Program header is in the wrong place and should be switched with the Verifying an Application header.

Could you make this switch quickly? I would like to show that to our partners and request that they review, re-order and finalize the questions before we implement. (#834; cc: @theandrewbriggs)

[smarziano]

Re: the FAQs design in https://github.com/smartchicago/chicago-early-learning/issues/834#issuecomment-317795743 (https://cl.ly/1q222G142C0s/o) The questions don’t match the headers. All of the questions that are currently under “Applying to a Preschool Program” should be under the Verify header. All of the questions currently under the “Verifying an Application…” should go under the Apply header.

[jenmakes]

@smarziano @theandrewbriggs here a couple of thoughts for collapsible fields on the FAQ page. With illustrations - you could do this https://cl.ly/39361p2P0A12 If you want to kill the illustrations and decrease the white space you could do this: https://cl.ly/3g3W3m3X2r42 When you scroll you could do this, all the FAQ prompts are still accessible up top. https://cl.ly/0Z1y3j1o0o2y Or if you would rather do just one — back to top sticky bar you could do this: https://cl.ly/2i1s231h2a2y And/OR you could style it this way if you do not like the stroke and each category collapses up top to a sticky bar as you move from section to section. You have the option of 'back to topics' and 'back top of section' (or however you want to word it). https://cl.ly/1z0o1R103r35

If you do not want the collapsed questions up top - you could just do the sticky 'back to top' options

[smarziano]

@jenmakes I like the design with the illustrations (https://cl.ly/39361p2P0A12). I think it takes up more room but I like the icons used and think the page needs some sort of visual. Below the drop-down menus, I am expecting the question sections and content uncollapsed with "Return to Top" along the way after every question.

[smarziano]

I have added our final design suggestions to our implementation issue #834. Therefore, I am going to close this issue.