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.

The process

I built the animated pieces as vector artwork in Adobe Illustrator, brought them into After Effects to animate, then converted the final animation into Lottie's JSON format. Because the artwork stayed vector end-to-end, the file describes shapes and paths instead of pixels, which is why it came out at a fraction of the weight of a rendered video file.

End-to-end vector

In motion

JSON code (excerpt)

{
  "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.

Creative deliverables

Interactive icon set

Hover any icon to play it.

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.