The Challenge
Google CS First needed a set of compelling front-facing webpages so first-time users can learn about the program and find resources quickly and easily. I was tasked with organizing the content, creating the navigation bar items, designing the look of the site while following Google's brand guidelines, and the frontend coding of the pages.
The final product can be found below, and on cs-first.com.
The Process
I started by identifying and understanding the client's and user's needs. In this case, Google CS First needed to attract as many educators, volunteers, and advocates as possible. The primary users, educators, needed a computer science program that was free and easy. These users also needed to learn about the program as quickly as possible. I balanced these needs by emphasizing the "free and easy" nature of CS First on the home page, then showing a one secton concisely describing the program and encouraging the user to explore the site's materials. This is followed by sections encouraging users to volunteer and advocate. Each section has one call-to-action button.
I placed the more in-depth information, such as the impact of CS First and the FAQ section, under drop-down menus in the navigation bar. This allows more room for publicity pages to be surfaced, while still letting users find more information by exploring the site.
The bulk of what makes CS First great is its excellent curriculum and resources. These resources needed to look compelling and be organized intuitively. To do this, I emphasized each theme's icon and color and added additional minimalist icons to identify each resource. I gave each curriculum three separate sections: videos, lesson plans, and materials. Users can easily browse through each curriculum, or even use the materials to run a club straight from the website.
