Background
Google uses the Tech Dev Guide to provide tips and resources to help new programmers develop technical skills through self-paced, hands-on learning. It is intended for university-level Computer Science students considering seeking an internship or full-time role at Google or in the tech industry generally; and university faculty; and others working in, studying, or curious about software engineering.
Additionally Google also has the Business Dev Guide, for developing new business professionals.
The task
My team at Potato was asked to make improvements to the existing Tech Dev Site based on user research, focus sessions and analytics.
I was the main designer on this project and covered UXR, IA, page layouts and created an updated design system for their UI. These improvements were then directly applied to the newly released Business Dev Guide.
Project timeline
Phase 1
Research (UXR and Personas)
Conducting 12 research sessions to assess the current website experience and perceptions by investigating the following things about our personas:
• Familiarity and interests
• Ease and Efficiency of Navigation
•Awareness and engagement
Phase 2
Design System Updates (UI)
Updating the Tech Dev Guide site to leverage the most up-to-date Google Material design guidelines and components. A UI Library was built out in Figma, with custom components that adhered to material 2.0 and Google material (their internal design system guidelines)
Phase 3
Site experience updates (UX, IA)
Optimizing the site workflow starting from updated information architecture to page hierarchy and layouts. Screens were laid out in wireframes to align on functionality ( e.g. search, pathways, filters, layout of resource library, user profiles, quizzes, etc). and then quickly converted into full fidelity pages using the design system I constructed in Phase 2
Phase 1
Persona creation
We published a survey on the website that was broken into 4 main areas (below) to better understand our users.
1. Personal information: to divide the study between professionals, students and teachers.
2. Understanding the user's knowledge level.
3. Questions around the ideal learning site and their preferred content type.
4. Open questions and suggestions
We were then able to construct 3 personas that leveraged the site for 3 different goals:
A). Computer science student
• Age: 27 years old
• University year: Postgraduate
• Professional Experience: A little
• Hours per week learning: 15
• Goal: Is working in a personal project, so she needs to learn some new stuff.
• Chosen option: Direct search from library
• Reasoning: She doesn’t want to do view what already knows, it’s faster to look up for what she’s interested at the moment.
• Pain: Many sites teach you how to program but not to solve problems logically.
B.) Professional in tech company
• Age: 26 years old
• Professional Experience: 2 years
• Hours per week learning: 10
• Goal: To find a better paid job in another tech company.
• Chosen option: Recommended pathways
• Reasoning: She sees it as a way to measure her knowledge against a specific set of topics.
• Pain: She finds working code examples useful, normally doesn’t like to deal with videos that have no transcripts as she can’t ‘skim’ through the content.
C.) Computer Science teacher
• Age: 48 years old
• Professional Experience: 5 years
• Hours per week learning: 10
• Goal: To get advice on how to complement student’s learning program with extra material.
• Chosen option: Faculty pathway
• Reasoning: As a teacher he’s interesting in learning new ways to teach.
• Pain: Sometimes teaching programs are far from business reality and many of his students get frustrated when applying for CS jobs.
User research methodology
By using the personas we were able to recruit the right users for our 12 interviews, who we contacted from their previously completed surveys. I set up the interview script to cover these 3 learning goals that I felt would best lead design decisions:
I. Familiarity and Interest: What is the user’s perception and feelings toward the Tech Dev Guide, and how accurate is the user’s current understanding of it's purpose?
II. Ease and Efficiency of Navigation : This section assesses the efficiency via task completion and if they can find what they need to accomplish their goals.
III. Awareness and Engagement: This section assesses awareness for the user and will rely heavily on recall from the previous task exploration.
Research synthesis
From the transcribed interviews I pulled out pain points based on quotes accompanied by considerations and suggested action items. (This is a fraction of the total insights)
Phase 2
New design system
While research was still being conducted in Phase 1, I was simultaneously converting the old design patterns into material 2.0 x google material. Almost everything on the page needed to be replaced to meet these standards, which I built out in Figma. Below is a quick-grab sticker sheet of a few components.
UI improvements
After the UI library was made, I was then able to use these standards tied with research insights to rationalize improvements for the Tech Dev Guide.
Phase 3
Adjusted Information Architecture
The original IA begun with addressing how ‘college years’ were a bad direction for the site structure. This is because they do not follow the same nomenclature internationally. The next steps were to abstract away the value from the direct target market of some of the material so that it can appeal to a wider audience.
Using research to consider why people learn and how they self-assess their own skills, we decided a "Section-centric IA" is the strongest route . It caters for tailoring content to professional goals which scored strongly and provides the direction/benefit of why the guide is useful, whilst prominently including the library caters for topic based learners. Users are not ushered down a particular path and can choose material based on what's relevant to their goals.
The new IA
Benefits:
Users do not need to label themselves (making the guide more inclusive beyond Higher Edu.)
Multiple entry points to relevant content
Greater affordance of what each pathway aims to provide you with, but not required to follow sequentially
More natural language
Personalized approach (each pathway is in its own section, but individual resources can still be accessed by filtering via resource page.
UI + New IA + Visuals
Since the UI was already made, I was able to very quickly update the existing site with new components and add in illustrations. The improvements made to the Tech Dev Guide were proved to be easy to scale, and served as the northstar for Google's next guide: the Business Dev Guide which I built out under the the design system. Below are a few screen shots of the results.
Outcomes
The new IA proved to be successful and brought forward new entryways to material that would otherwise been buried. Additionally, the Tech Dev Guide is featured as the first resource on Google's "Build your future" page, and has the top activity of the site's content.
Results
