Enhancing a design system
We updated Google’s web design system to transform Google’s ‘About’ site into a hub that effectively communicates the latest updates across the business.
Our solution creates a greater coherence across all Google-owned sites and greatly reduced the reliance on engineering effort to update and maintain the site.
The challenge
Despite attracting 205 million unique users annually, the About site lacked clear purpose and required 2+ months of dev effort for content updates – resulting in extensive, unmanaged pages and preventing reactive updates.
Our goal was to redesign and migrate the About site from hardcoded to a CMS – while leveraging the existing design system, implementing high value additions, to strengthen the Google brand and better serve the general population audience.
My responsibilities
- Translated the new site strategy into designed page templates
- Collaborated with stakeholders, strategists, content editors and engineers to create designs that work within the chosen CMS
- Led UX and UI
- Expanded the existing design system to increase flexibility and more closely align with the Google brand
- Utilised available data to establish content hierarchy acrosspage templates
The team
Consulting for Google’s Global Editorial and Comms team, I led a team of product and content designers, collaborating with the strategy, data and engineering team.
The process
1/4
Establishing hierarchy
Based on new strategy work, we focused the site structure to have a
clear purpose: highlight key brand updates and guide users to relevant Google sites.
Then, using page analytics and business priorities, we were able to structure the IA and content to better support user behaviours and business goals.
We proposed a new site map with a flatter structure
We mapped user flows to validate the new site structure
We created lo-fi wires to establish content hierarchy
2/4
Setting the design direction
After establishing the IA, we focused on working within the existing design system to create visual cohesion with multiple outbound sites, and identified areas we could strengthen brand expression with new components.
Our outputs focused on including universal elements – like rounded edges, square containers, and lighter system colours – to unify the varied visual languages across Google sites.
We identified an inconsistent application of the brand across Google sites and began to explore unifying elements
We explored design direction within the constraints of the existing design system
3/4
Expanding the design system
To accommodate the need to cover a wide range of topics, we created flexible page templates and only added or enhanced components when they would provide high utility and reusability, while strengthening the visual connection to other Google sites.
Working with the engineering team, we identified elements that could be adjusted directly within the CMS without requiring development effort – further increasing flexibility, while minimising additional and involved engineering resource.
We created new components to have flexible layouts, increasing variety within the design system without making the suite of components unwieldy
We designed all components and templates across every breakpoint to ensure a smoother handover with the engineering team
4/4
Documentation and handover
Once we gained approval from engineers and stakeholders, we created detailed documentation and prototypes, integrating them for use in the existing design system.
We detailed spacing, expected behaviour, mandatory elements, motion, and breakpoint variants in our documentation, along with UX documentation around templates and component usage.
By working in close collaboration with engineers, we ensured new components could be feasibly be developed within the project constraints. Our regular feedback sessions and structured handovers resulted in accurate reproduction in build.
We created prototypes for new components to more accurately document their interactive behaviour
We thoroughly documented all new and enhanced components, and merged them into the existing design system
The outcome
Operational efficiency
Content update cycles were reduced from 2+ months to under a week, enabling reactive content management and quick responses to business needs.
Development impact
80% of engineering effort previously spent maintaining the legacy site was removed, allowing the team to focus on broader Google ecosystem improvements.
User experience
We created a focused experience, guiding our general population users efficiently to relevant information, connecting them to resources across a wide set of Google properties.
Next up
Let’s connect ashleydanieldsouza@gmail.com
Case studies
Enhancing a design system
We updated Google’s web design system to transform Google’s ‘About’ site into a hub that effectively communicates the latest updates across the business.
Our solution creates a greater coherence across all Google-owned sites and greatly reduced the reliance on engineering effort to update and maintain the site.
The challenge
Despite attracting 205 million unique users annually, the About site lacked clear purpose and required 2+ months of dev effort for content updates – resulting in extensive, unmanaged pages and preventing reactive updates.
Our goal was to redesign and migrate the About site from hardcoded to a CMS – while leveraging the existing design system, implementing high value additions, to strengthen the Google brand and better serve the general population audience.
My responsibilities
- Translated the new site strategy into designed page templates
- Collaborated with stakeholders, strategists, content editors and engineers to create designs that work within the chosen CMS
- Led UX and UI
- Expanded the existing design system to increase flexibility and more closely align with the Google brand
- Utilised available data to establish content hierarchy acrosspage templates
The team
Consulting for Google’s Global Editorial and Comms team, I led a team of product and content designers, collaborating with the strategy, data and engineering team.
The process
1/4
Establishing hierarchy
Based on new strategy work, we focused the site structure to have a
clear purpose: highlight key brand updates and guide users to relevant Google sites.
Then, using page analytics and business priorities, we were able to structure the IA and content to better support user behaviours and business goals.
We proposed a new site map with a flatter structure
We mapped user flows to validate the new site structure
We created lo-fi wires to establish content hierarchy
2/4
Setting the design direction
After establishing the IA, we focused on working within the existing design system to create visual cohesion with multiple outbound sites, and identified areas we could strengthen brand expression with new components.
Our outputs focused on including universal elements – like rounded edges, square containers, and lighter system colours – to unify the varied visual languages across Google sites.
We identified an inconsistent application of the brand across Google sites and began to explore unifying elements
We explored design direction within the constraints of the existing design system
3/4
Expanding the design system
To accommodate the need to cover a wide range of topics, we created flexible page templates and only added or enhanced components when they would provide high utility and reusability, while strengthening the visual connection to other Google sites.
Working with the engineering team, we identified elements that could be adjusted directly within the CMS without requiring development effort – further increasing flexibility, while minimising additional and involved engineering resource.
We created new components to have flexible layouts, increasing variety within the design system without making the suite of components unwieldy
We designed all components and templates across every breakpoint to ensure a smoother handover with the engineering team
4/4
Documentation and handover
Once we gained approval from engineers and stakeholders, we created detailed documentation and prototypes, integrating them for use in the existing design system.
We detailed spacing, expected behaviour, mandatory elements, motion, and breakpoint variants in our documentation, along with UX documentation around templates and component usage.
By working in close collaboration with engineers, we ensured new components could be feasibly be developed within the project constraints. Our regular feedback sessions and structured handovers resulted in accurate reproduction in build.
We created prototypes for new components to more accurately document their interactive behaviour
We thoroughly documented all new and enhanced components, and merged them into the existing design system
The outcome
Operational efficiency
Content update cycles were reduced from 2+ months to under a week, enabling reactive content management and quick responses to business needs.
Development impact
80% of engineering effort previously spent maintaining the legacy site was removed, allowing the team to focus on broader Google ecosystem improvements.
User experience
We created a focused experience, guiding our general population users efficiently to relevant information, connecting them to resources across a wide set of Google properties.
Next up
Let’s connect ashleydanieldsouza@gmail.com
Case studies
Enhancing a design system
We updated Google’s web design system to transform Google’s ‘About’ site into a hub that effectively communicates the latest updates across the business.
Our solution creates a greater coherence across all Google-owned sites and greatly reduced the reliance on engineering effort to update and maintain the site.
The challenge
Despite attracting 205 million unique users annually, the About site lacked clear purpose and required 2+ months of dev effort for content updates – resulting in extensive, unmanaged pages and preventing reactive updates.
Our goal was to redesign and migrate the About site from hardcoded to a CMS – while leveraging the existing design system, implementing high value additions, to strengthen the Google brand and better serve the general population audience.
My responsibilities
- Translated the new site strategy into designed page templates
- Collaborated with stakeholders, strategists, content editors and engineers to create designs that work within the chosen CMS
- Led UX and UI
- Expanded the existing design system to increase flexibility and more closely align with the Google brand
- Utilised available data to establish content hierarchy acrosspage templates
The team
Consulting for Google’s Global Editorial and Comms team, I led a team of product and content designers, collaborating with the strategy, data and engineering team.
The process
1/4
Establishing hierarchy
Based on new strategy work, we focused the site structure to have a
clear purpose: highlight key brand updates and guide users to relevant Google sites.
Then, using page analytics and business priorities, we were able to structure the IA and content to better support user behaviours and business goals.
We proposed a new site map with a flatter structure
We mapped user flows to validate the new site structure
We created lo-fi wires to establish content hierarchy
2/4
Setting the design direction
After establishing the IA, we focused on working within the existing design system to create visual cohesion with multiple outbound sites, and identified areas we could strengthen brand expression with new components.
Our outputs focused on including universal elements – like rounded edges, square containers, and lighter system colours – to unify the varied visual languages across Google sites.
We identified an inconsistent application of the brand across Google sites and began to explore unifying elements
We explored design direction within the constraints of the existing design system
3/4
Expanding the design system
To accommodate the need to cover a wide range of topics, we created flexible page templates and only added or enhanced components when they would provide high utility and reusability, while strengthening the visual connection to other Google sites.
Working with the engineering team, we identified elements that could be adjusted directly within the CMS without requiring development effort – further increasing flexibility, while minimising additional and involved engineering resource.
We created new components to have flexible layouts, increasing variety within the design system without making the suite of components unwieldy
We designed all components and templates across every breakpoint to ensure a smoother handover with the engineering team
4/4
Documentation and handover
Once we gained approval from engineers and stakeholders, we created detailed documentation and prototypes, integrating them for use in the existing design system.
We detailed spacing, expected behaviour, mandatory elements, motion, and breakpoint variants in our documentation, along with UX documentation around templates and component usage.
By working in close collaboration with engineers, we ensured new components could be feasibly be developed within the project constraints. Our regular feedback sessions and structured handovers resulted in accurate reproduction in build.
We created prototypes for new components to more accurately document their interactive behaviour
We thoroughly documented all new and enhanced components, and merged them into the existing design system
The outcome
Operational efficiency
Content update cycles were reduced from 2+ months to under a week, enabling reactive content management and quick responses to business needs.
Development impact
80% of engineering effort previously spent maintaining the legacy site was removed, allowing the team to focus on broader Google ecosystem improvements.
User experience
We created a focused experience, guiding our general population users efficiently to relevant information, connecting them to resources across a wide set of Google properties.
Next up
Let’s connect ashleydanieldsouza@gmail.com