Android Component Library
Product Designer
3 months
Overview
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
Only a style guide
a. It mainly covered colors, types, spacing, themes, and grids
Heavily UI-focused and could not be reused to build other components
a. Missing different types, sizes, and states
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.
Types
Material
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.
Platter
a. Filled
b. Outlined
c. Empty
Content
a. Text only
b. Text + icon
c. Icon only
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:
Types
a. Primary Button
b. Secondary Button
c. Tertiary Button
d. Floating Action Button
Sizes
a. Large
b. Small
States
a. Default
b. Focused
c. Pressed
d. Disabled
Behavior
a. Affirmative
b. Destructive
Outcomes
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.