Android Component Library

Product Designer

3 months


Before this project, Zello’s Android app was missing a component library, which limited the design team from easily sharing components and style guidelines across projects, leading to visual inconsistencies when handing them off to the engineering team.

For three months I was the designer responsible for creating the Android component library by referencing the existing app, existing Zello Android guidelines, and Material Guidelines.

Opportunities From Existing Android Guidelines

  1. Only a style guide

    a. It mainly covered colors, types, spacing, themes, and grids

  1. Heavily UI-focused and could not be reused to build other components

    a. Missing different types, sizes, and states

  1. Limited scalability

    a. Difficult to update as these components were not built off of each other

Design Language

Establishing a design language is a crucial step in creating a cohesive and consistent style across all components. Fortunately, I was able to reference existing design files as a reference point to define the design language, rather than starting from scratch.

Color Palette

The biggest challenge was defining and organizing the color palette, as a lot of the colors were missing. For the scope of this project, I was tasked to only define the color that existed in the current app.



Both the type styles, elevation, and scrim referenced Material Guidelines. For bar backgrounds and shadows, I referenced the live app to recreate the materials.

Defining The Inventory

It was crucial to lay out all possible components I would need to create with type, sizes, and states in mind. It was challenging as I did not have a single source of truth to rely on. I had to look at the design guidelines, old design files, and screenshots of the live app to create the inventory.

Above is a snippet from a tree chart of how I categorized and defined all the existing components in the app.

Creating Components: The Process

In the theme of Buttons from the section above, let’s walk through how I went about creating the button component. I looked at Brad Frost’s Atomic Design for reference on creating a scalable design system.

Start with building blocks

To successfully create anything, a solid foundation is crucial. This involves developing essential base components that serve as the building blocks for the rest of the structure.

  1. Platter

    a. Filled

    b. Outlined

    c. Empty

  1. Content

    a. Text only

    b. Text + icon

    c. Icon only

  1. States

    a. Pressed

    b. Not pressed

Build variants using the base component

With the base component created in the above step, I was able to create different variants of the buttons that consisted of:

  1. Types

    a. Primary Button

    b. Secondary Button

    c. Tertiary Button

    d. Floating Action Button

  1. Sizes

    a. Large

    b. Small

  1. States

    a. Default

    b. Focused

    c. Pressed

    d. Disabled

  1. Behavior

    a. Affirmative

    b. Destructive


Below are some components I created using the process I described above.

Below are some components I created using the process I described above.






In this project, I created 40+ components. The implementation of a new component library not only streamlined the design process by eliminating the need for component duplication but also ensured consistent use of components between design and engineering teams.

Through this project, I gained valuable experience and learned about the significance of having a well-structured system. I also gained great insight into Sketch symbols, which allowed for greater consistency and efficiency in the design process.

If I were given more time to work on this project, I would add guidelines explaining rules and best practices when it comes to using these components.