UX DESIGN CASE STUDY
Google CS First:
Evergreen Hour of Code page
A seasonal page for the annual Hour of Code event was updated to be evergreen. This allows teachers to have a simple and intuitive entry point into teaching beginner level, fun-focused, standalone computer science lessons in various learning modalities.
Context
CS First (CSF) is a program within Google.org that provides a project based learning computer science (CS) curriculum for elementary to middle school students. Their mission is to provide equitable CS education opportunities to classrooms in under-served communities. Millions of students have enrolled in 100+ countries.
Hour of Code (HoC) is an initiative organized by Code.org that assembles a catalog of standalone computer science lessons and activities for all skill levels. They have 400+ partners, 20K+ educators, and 58K+ volunteers.
Problem space
Each year, a tentpole moment for the CS education industry is the Hour of Code event during CSEdWeek. New lessons are created and showcased on the CS First marketing pages. Over the years, a seasonal page was established with great engagement and success during that time of year.
A new project proposal entailed converting the seasonal page into an evergreen page, allowing teachers to take advantage of the standalone, entry level lessons at any time. The seasonal page was created by an external vendor, so the layout and styling is not fully consistent with the rest of the interaction and design language of CS First.
The redesign would serve a dual purpose of being a marketing and content page for teachers to review the Hour of Code curricula. This allows our product team to have more agency and control over the maintenance and operations of the page, both in terms of feature development and content creation.
Team & role
CS First is led by program managers (PgM) and is supported by a horizontal platforms development team (product managers (PM), software engineers (Eng), and user experience (UX) designers (UXD) & researchers (UXR)). The working group assembled for this project consisted of 3 PgM (Karen Parker, Greg Hammons, Amanda Sandler), 1 PM (Dara Rogoff), 1 Eng (Aaron Dodson), 1 UXD (myself), and 1 UXR (Jamie Benario).
My role in this project was: UX and visual designer, as well as UX researcher (with support from Jamie). I also acted as a project manager who organized and maintained the UX timelines and tickets in the sprints.
Requirements gathering
CS First was a regular partner for Hour of Code. This left a fantastic repository of previous retrospective and research artifacts to help me learn about the history of the event’s impact on the program. To fill in the gaps, I conducted stakeholder interviews with those subject matter experts who were still at Google.
Supplementing the internal review was an external one. I reviewed teacher blogs and social media posts to inform me about the general sentiment and real-life context before, during, and after the event. Additionally, a formalized competitive analysis was conducted to review other HoC partner’s use of metadata, presentation style, teacher support, etc. The analysis provided the PM with a baseline set of requirements.
Through a heuristic evaluation, I identified potential opportunities and pain points on the existing seasonal page. This helped point the design direction to coalesce with the business’ goals for teachers:
💡 Understand what Hour of Code is
🧠 Find enough information to evaluate lesson appropriateness for their students
⏭️ Provide users next step for repeat engagement
📈 Improve conversion rate and engagement
User definition
The primary users for this page are grade school teachers. Some attributes include:
🎒 3rd-8th grade
🏫 Teach in the classroom
🆕 Can be new to CSF or HoC
⏳ Mentally overtaxed and short on time
More details and scenarios were in an example teacher user persona. The team wanted the page to be clear, and have a low barrier to entry. The value propositions of having no prerequisites, focus on fun, free of charge, and being just an hour should be easy to intuit.
Design process
Before starting the iteration cycles, I worked on defining the high-level agnostic aspects of the design process.
Design systems
First things first, I needed to understand more about how the page was built and why the seasonal page had differences in styling, layout, and interaction patterns. From previous work, I knew we used a mix of design systems. Two systems (legacy Google Material 2 and modern Google Marketing Web Standards), were used because that’s how the dev infrastructure and services are currently set up. It was currently out of scope to do a full consolidation to optimize and refactor code.
I regularly checked in with Aaron to make sure we were on the same page and my intentions were clear, providing him with leeway on values that were functionally adjacent. Regardless, I always looked for the most appropriate documentation and specs, and annotate if there are any deltas between the same element between the two design systems.
Information architecture
CS First can broadly be split into three types of pages: marketing (general program info), content (lesson content pulled from the CMS), and product pages (dashboard and LMS).
The HoC page will be dual purpose: both a marketing and a content page. That means it needs to be standalone for marketing comms emails, as well as provide signed-in functionalities (such as adding the lesson to a class). This is atypical, as Google products tend to clearly delineate these two. The content pages also have the challenge of using the two design systems. This required documenting new design and interaction conventions for the team, so smaller asks can be completed without UX intervention.
The competitive analysis revealed commonalities in Hour of Code page organization. We settled on a similar classification, dividing the page into a few sections to help organize tasks:
Intro: contextual info about HoC and the value propositions
Pre-HoC: high-level breakdown of how to get started
HoC: UI cards that show lesson details
Post-HoC: next steps after teaching
This provided a consistent way to reference each section internally and a sequence that can be followed externally. The page would become a microcosm of the standard CS First marketing and content page experiences.
User journey
While a standalone page is great for an event like Hour of Code, the newly minted evergreen designation requires consideration beyond this page alone (potentially even outside of the product).
The PgMs stated that organic traffic would come from advertisements, social media, and search engines while directed traffic would be from the Hour of Code event page, email comms, and professional development courses.
A blindspot of ours was that teachers would learn enough how to use the HoC page, but not necessary CS First. What is the product activation strategy if they engage but do not register? Due to time, the conversation was tabled and we would review the whole Critical User Journey during a post-launch retrospective.
I still wanted to push back on one other thing: the significance of this page being on the highest level of navigation on the website, and the plan to have the HoC lessons exclusive on the HoC page (and not on Curriculum). I hypothesized that “Hour of Code” verbiage alone wouldn’t be enough to signal that there are lessons here, especially when placed right next to “Curriculum”, a more widely accepted educational term.
I proposed that we add a call-to-action (CTA) to the HoC page from the Curriculum page to improve discoverability and findability. It would be higher in the visual hierarchy than a regular lesson card to signify its difference. This allows for the lesson curricula to stay split (because of their different learning objectives).
Wireframing and prototyping
I started with wireframes with boxes that represent the content hierarchy established (pre-HoC, HoC, etc). This provided the team a way to examine the flow and relative visual importance of each section. Afterwards, I used the combination of existing Figma component libraries and plugins to update to a high fidelity design with content automatically populated from a Google Sheet with the lessons’ metadata and values. During each mid-sprint check-in, I kept my PM and Eng partners informed for feasibility reviews. This work-in-progress was also reviewed by my horizontal UX team to get fresh eyes from other designers and our learning science researchers.
Copywriting
This project made me much more cognizant of UX writing and traditional copywriting. “Hour of Code'' is well known within the CS education industry, but less so outside of it. For a top-level navigation page, it should be very apparent to any non-CS teacher what “Hour of Code” means.
I recruited the help of Karen and Greg who were closer to the education community and marketing respectively. A spreadsheet was created as a source of truth: images, conditionals, and copy variations were all updated there.
As a designer, one of my superpowers is being able to visualize ideas, so the next logical step was to place all the copy in-situ with Figma annotations and comments to finalize the copy.
User research
Usability testing was completed to evaluate my design hypotheses.
Project scope
In our initial scoping, there wasn’t a budget or time allocation to conduct usability testing on the page. This is a reality in product development, but I felt that a prominent page needs to be placed in front of users. I read about the Google rapid research methods and found out about our partnership with Usertesting.com. The unmoderated remote tests allowed me to collect all my data within a couple of days, while I was still iterating on other aspects of the page design. In preparation, I converted the page to an interactive Figma prototype and completed logistical steps needed to show prototypes to external users.
Research plan
The plan was to run unmoderated remote usability tests from the Usertesting.com participant pool. The participants will be 3rd-8th grade teachers who do not have any CS First experience and teach in Title 1 schools. They did not have to be technology teachers. My initial intention was to explore the sentiment beyond the HoC page (entire Critical User Journey), but it grew out of scope, and so the tasks were only limited to just the HoC page.
RESEARCH GOALS
🧠 Evaluate content and layout comprehension
😎 Measure user confidence about getting started
👉 Review mental model alignment for prep and choosing lesson
EXPECTED IMPACT
🚧 Fix usability issues (controls & components)
🖌️ Modify layout and visual hierarchy for findability (placement, contrast, size)
✒️Alter content (modify copy, links and content to educate user)
FINDINGS
✔️ Good sense of what “CS First” and “Hour of Code” meant
✔️ Able to find and review lessons
❌ Poor sense of what “text-based” learning modality meant
❌ Not much engagement with “Keep the learning going” (post-HoC)
Final design
Fortunately, with participants able to complete the vast majority of tasks, the design changes were minimal. We did find that teachers had some confusion about the “text-based” modality, which provides instructions within the Scratch block-based coding editor of CS First (See this case study about recent updates to this learning modality).
DESIGN UPDATES
Tabs were added to delineate each learning modality (text-based, video-based, or unplugged) and shorten the overall length of the page.
We ended up changing some copy for clarity and added Help Center article links as we were short on engineering capacity to build more robust in-product onboarding and last-mile scaffolding. It wasn’t ideal to take teachers to a different page, but it gives us clear opportunities for fast-follows.
For that last bit of polish, new illustrations were created to add additional life and support CS First’s whimsical branding. The responsive behavior was cleaned up as well as addressing any edge cases from the different login conditions (signed out, signed in teacher, signed in student).
Last but not least, the designs were posted to their appropriate UX ticket and properly classified as dependencies. The remaining moonshot ideas (lesson preview, project picker, and playground project enhancements) and unaddressed recommendations were moved to the backlog for re-prioritization for future projects.
The redesign of this page led to increased visitors, lesson engagement, class and playground project creations! Another win was getting showcased on the Google Search homepage during CSEdWeek!
Lessons learned
Aspects to improve upon include having more design critique and evaluation with localization and accessibility. My greenlining was inconsistent and not a regular part of my process. However, I still learned quite a bit with this project improving my adjacent UX skills.
📊 UX research: I learned more about proposals with timelines and how to conduct faster studies.
✍️ UX writing: I learned about the nuance and preciousness of every little word: each sentence (or sentence fragment) should be written in the correct tone, voice, and be at a certain reading level. When we want every word to count, comprehension is key.
🗃️ UX project management: I learned how to more effectively write detailed tickets and keep them continuously updated and organized. Priorities and timelines always shift, and new decisions and ideations can appear anywhere from email, docs, video calls, etc.
With every project, I realize the importance of being able to phase your work, as well as the change management between versions. My intentions and rationale are on behalf of the users, and being a solo designer, one only has so much bandwidth. Documenting learnings and splitting the work up (with a North Star design pointing the way) leads to a better experience for our audience in the long run. I successfully added UX research to this plan and brought increased awareness of the entire user journey which encompasses more than this singular page redesign. As they say: development is a never ending process, any unfinished work is just another opportunity! -🌳