Design systems

Google Assistant

Design systems

Overview

Assistant Dragonglass and Assistant Mobile are a new metaphor for conversational interactions that are more than voice. They bring a more fluid, expressive interactions to the stage composed by the Assistant using touch, voice and other devices together.

Goal

Create master libraries for Assistant Dragonglass, a UI/UX design framework that is used by screen-based Assistant Google Home devices, and for Assistant Mobile.

My role

Visual designer.
Huge Inc.

Creative team

Paula Vasquez - Creative Director
Angela Pinzon - Sr UX Designer
Melissa Castaño - Sr Visual Designer

We consolidated a Design Systems product that is scalable and maintainable following the best figma practices and most recent features for Dragonglass and Assistant Mobile.
‍
Each component is a puzzle made of small pieces, so we disassembled each component to define the smallest element inside them (atoms) and build upon them (molecules, organisms & pages). We mapped out all the components in Asst Mobile and Dragonglass Design system and categorized them according to the atomic modular thinking framework.

Atomic design system

➹ Asst Mobile - Visual inventory.

➹ Component deconstruction.

My contributions

Besides mastering figma latest features, and creating over +1000 components, I set some of the best practices for the process such as daily syncs with the team, and separated design slack channels. I managed new members, onboarding sessions, process reviews, and providing helpful and actionable feedback.

‍

For Mobile SS I took the lead role and designed the process to follow. I worked on the initial set up, setting naming convention, component and organization structures and getting started pages. I worked on a complete preliminary analysis, creating a comparative analysis with all their files and working on a visual inventory, mapping out all the components visually.

➹ Documentation on how to get started.

Learnings.

Modular Thinking.

We saw each component as a puzzle made of small pieces.
‍We disassembled each component to create the smallest element inside them (atoms). This way of thinking helped us to organize, optimize, and improve the foundation file.

Pixel perfect as a state of mind.

Perfection and precision permeate every aspect of our culture, people, and work. From complex enterprise design systems to the way we name files, no detail is left unattended.

Learning by testing.

The process is continuously evolving.
‍We faced new challenges with each design system, so the only way to continue improving was testing with Google’s design teams and us and enhancing our process day by day.

Google Assistant

Design systems

My role

Creative team

Learnings.

Belle Tire new digital experience ➹