Google Form Banner

[janzenmolina]

Dependency

N/A

Overview

As a designer, we need to ensure that the banner on our Google Form surveys conveys the concept of what Civic Tech Jobs is to users while being clearly visible on all platforms.

Action Items

• Revise banner for visibility on mobile/small screen sizes
• Present banner to team
• Revise based on team feedback
• Decide on final design for banner

Resources/Instructions

Resources
Banner for Google Survey Figma Page

[janzenmolina]

I created the initial banner design given the following criteria (taken from OCS: Communications Guide):

• Slightly opaque bar on bottom half
• CTJ logo and survey name on bottom left
• Hack for LA logo on bottom right
• Hero illustration in the center

[janzenmolina]

Feedback from Bonnie after 2/13/22 meeting:

• Look and feel is great
• really like the logo on the left and HfLA logo on right
• the hero image in the banner due to the scaling looks a little busy (smaller components also look even smaller like the laptops and all)

[janzenmolina]

Using the feedback, I initially suggested replacing the people in the hero illustration with a magnifying glass as that would convey the "survey" aspect of the form while making it easier to depict in a vector image, even at smaller sizes. However, per advice from @jenchuu , the banner design is meant to convey the purpose of Civic Tech Jobs itself rather than the surveying method, in which case the hero illustration would be more relevant. I attempted to alter the hero illustration with a magnifying glass rather than the central light bulb to no avail; this would also be inconsistent with the other illustrations presented on the Civic Tech Jobs page.

I then removed the two people kneeling in the illustration and reorganized the floating elements. At the same time, I proportionally increased the illustration size so that the remaining people holding the upper half of the light bulb were clearly visible. After uploading the design to a test Google Form, I checked the visibility on both mobile and desktop formats. I found that the visibility was sufficient for users to understand the image completely.

[janzenmolina]

Closing as #125 has also been closed