Design System For Internal Google Tools

This case study aims to outline the design process of the creation of the UI components for UX Designers and Software Engineers of the Ad Department at Google. I’ll share insights into my process, product design, the tools I used to create and implement the system, and also how I document and share the system details with the team.

The Goal

To create, approve, and publish the Google Material enterprise design specs for use by all Reach UX Designers and AD Engineers.

The Process

  • Audit, Research
  • Build component
  • A11y (accessibility)
  • Creating the spec
  • Styleguide
  • Usability testing
  • Revision
  • Conclusion

1. Research

The process started with information research about components and patterns for the system. Such as user experience, positive and negative feedback, as well as how exactly a certain component helped to enjoy the product and made its use easier and more accessible.

• Google search
• Moma (internal google search)
• Interview with googles
• Collaborate with different google teams
• Provide ideas for the whole team (PRD)

User Persona

There were two general user personas for this product

  • Regular employee
  • An employee with special needs

2. Build a component

The next step after all research was to build a design kit. This kit is getting approved by the key stakeholders such as product manager, UX designers, and other involved teams.

The components were built from scratch and I provided multiple options for color, space, padding, length, and width.

The tools I used were Sketch and Figma.

3. Make it accessible

As a designer, my goal was to define how a user interacts with the product, including accessible technology.

Focusing on Accessibility provides improved user experience for everyone.

Concepts to keep in mind

The three categories below are not mutually exclusive and should be considered together:

Arrow and navigation

I defined the semantic structure and hierarchy for interaction: in what order a user interacts with content to complete a critical user journey.

Tab (The Green Line)

Jumps between interactive elements and groups, and is generally used for primary navigation

Arrow keys (The Red Line)

Used to navigate within and between components of the same type.
Together arrows navigate between single types of elements within a tab stop.

Interaction by Tabs and Arrows

4. Creating the spec

Each component and pattern was measured by using Google production tools, Sketch plugin- Markup, or manually.

Measurements created in Markup (Sketch plugin)
Measurements created manually (Sketch or Figma)

5. Design style guide

After components were created, made accessible, measurements were added, and approved by the Google Material team, UX team, product designers, and engineers the next step was to create a unified self-explanatory style guide.

Each component included the following sections:

Component Sections

UX Methods

• Whiteboarding
• Brainstorming
• Card sorting
• Sketches
• Storyboarding
• Information Architecture
• Low fidelity Mockup
• Usability Testing

Whiteboarding and Brainstorming

Content elements:

  • Component description
  • User interaction process
  • Anatomy of component
  • Component types and variations
  • Best practices
  • Configurable options
  • Specs
  • Accessibility (keyboard interaction, verbalization)

6. Usability testing methods

  • Lab Usability testing
  • Observation
  • Online testing tools
  • Surveys
Online Survey Example
Qualitative Comments Example from Users

7. Feedback & Revision

8. Challenge & Conclusion

Challenges:

Google is a large global company that strives to continuously improve internal tools. When employees are happy with work tools, they are motivated to create external products flawlessly.

The challenge was to adhere to the process. The design system team was recently formed and still was going through the norming process. This project op mech did not exist and the procedures were not mature enough. The team had to brainstorm and build the process from scratch.

Learnings and Results:

I contributed to all stages of the design process from initiation to implementation in production. I led the UX research part and collaborated with cross-functional teams. In many cases, I facilitated my teammates’ communication and brainstorming sessions. The project was a group effort for our family-like team and we treated it as our own child.

Every day more and more consumers use digital tools for everything.
It is very critical to ensure accessibility for everyone. Interaction with devices is similar to people’s relationships. Users want to feel good when communicating with tools. It is especially important for internal tools because we spend up to 70% of our time at work.

Conclusion:

The project gave me the opportunity to study more deeply the best design systems currently in use, hone my design skills, and collaborate and learn from the top-notch development team.

The design system was released and it is being tracked with designers and engineers, and improving every day. We found out that people are engaging more often when a tool has accessibility features to compare to regular tools.

Hello! I’m a UI/UX designer with experience from Apple, Google, and Sony PlayStation.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store