AI Mode

A new experiment in Google Search. Ask and get an AI powered response, and explore further with follow-up questions and helpful web links.

I got put on this product mid way through V.1 being built out. I joined to help build out an easy to use design system that a team of 75+ designers could easily use and make all mocks consistent and to keep spec files organized and ready for handoff to engineers.

The Problem

  1. Hacky components put together.

  2. No centralized location for shareable components.

  3. High development cost due to teams rebuilding components each time they are needed.

  4. Inconsistent in UX/UI patterns since teams were always trying to reinvent the wheel.

  5. Spec file was being used as a working file.

  6. File getting so large that it would run out of memory.

  7. Mocks were being built with no tokens applied.

  8. Inconsistencies from mock to mock.

  9. No source of truth for what is live/coming soon.

  10. Designers not using tokens.

  11. Designers keeping their files in their drafts.

Goals

  1. Organized separate files to cut down on massively large files.

  2. Design kit library that designers will use to pull components, color, and type tokens from.

  3. A consistent system of components.

  4. Libraries for designers to quickly mock-up.

  5. Sticker sheet to grab prefab assets.

  6. Show components in all of their different variants.

  7. Making myself available to designers to help them tie color and type tokens to their designs.

Before

One giant 10+ page file, would constantly run into out of memory issues.

After

Spec index file to easily track down the feature you are looking for, no more hunting through one massive laggy file.

Type Styles

Color Tokens

Sticker Sheet

Example of a sticker sheet page. Tile component with prefabs for mobile and desktop

Full page mock templates to be used as a starting point or for marketing use.

Outcome

  • A very organized file system that product designers or engineers can use and find what they are looking for.

  • Easy to use component library.

  • A source of truth that marketing can go to and find what the latest feature looks like for their marketing asset needs.

  • V2 of AI Mode design system built and being used across all mocks with all designers.

  • Sticker sheet and documentation being very helpful for designers.

  • Consistency across all design mocks.