Google Onboarding
Design System

The original program only served one audience: Developing Managers. The brief wanted a design system that served both Developing and Design Managers that was animated, interactive, and lightweight.

The goal was to build one design system flexible enough to feel native to both tracks without forking into two disconnected experiences. With Material Design 3 as the structural base and Google's own brand system overlaid on top, the program reads as Google-made, not generic MD3.

The system at a glance

The toolkit had to work as functional wayfinding that moves users forward: interactive icons, animated illustrations, responsive graphics, and navigation, all built to guide managers through onboarding with consistent iconography and purposeful motion.

Creative deliverables

Interactive icon set

Hover any icon to play it.

The process

The animated pieces were built as vector artwork in Adobe Illustrator, brought into After Effects for motion, then converted into the Lottie JSON format. The artwork stayed vector end-to-end, the final file described shapes and paths instead of pixels, which is why it came out at a fraction of the weight of a rendered video file.

An output

The result is a JSON file that describes an animation instead of storing one. Every shape, path, and keyframe lives as data, which means the same file that plays smoothly on a slow connection can also be handed to an engineer and edited without re-exporting from After Effects.

{
  "v": "5.12.1",
  "fr": 24,
  "ip": 0,
  "op": 240,
  "w": 1600,
  "h": 722,
  "layers": [
    {
      "ty": 4,
      "nm": "Lightbulb Outlines",
      "ks": {
        "o": { "a": 0, "k": 100 },
        "p": { "a": 0, "k": [ ... ] },
        "s": { "a": 0, "k": [100, 100, 100] },
        "r": {
          "a": 1,
          "k": [
            { "t": 0,  "s": [15],  "i": { "x": [0.362], "y": [1] }, "o": { "x": [0.642], "y": [0] } },
            { "t": 60, "s": [-15], "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] } }
          ]
        }
      },
      "shapes": [
        {
          "ty": "gr",
          "nm": "Bulb",
          "it": [
            {
              "ty": "sh",
              "ks": { "k": {
                "c": true,
                "v": [[66.103, 21.357], [-66.244, 20.915], [-87.31, -0.291], ...],
                "i": [ ... ],
                "o": [ ... ]
              } }
            },
            {
              "ty": "fl",
              "c": { "a": 0, "k": [1, 0.729, 0, 1] },
              "o": { "a": 0, "k": 100 }
            }
          ]
        }
      ]
    }
  ]
}

The refreshed program met its brief: one system serving both Developing and Design Managers, with internal feedback citing a smoother, more cohesive onboarding experience across both tracks.

Living and lightweight

Running the motion layer on Lottie keeps it consistent and production-viable. Across the three animated banners that took the weight from 13.3 MB (Raster) to 61 KB (Vector). Video was tested and ruled out: standard MP4 still ran ~23× the vector files, and even compressed until it visibly degraded it stayed ~6× heavier, while giving up transparency, resolution-independent scaling, and the interactivity that make the system feel alive. That's exactly why Lottie has become the standard for scalable motion: lightweight, sharp, and built to be made interactive.