Sprout's iOS and Android applications are built natively. However, until five years ago, both applications rarely used OS components, opting instead for custom UI that wasn't part of any design system. Over the past five years, I've taken the initiative to address these issues.
I focused on creating a design system that integrates native components while aligning with Sprout's web app visuals.
Technical Issues:
Proposed a process to incorporate design system work into sprint planning to show value to product managers.
Design created an epic with tickets that could be picked up during sprints. This allowed us to update:
Android app's appearance in 2019, had minimal implementation of Google Material Design. Problems included:
In mid-2023, I collaborated with the Android Engineering manager Ryan to create a design system. We leveraged spare time to build core components, aiming to showcase the system's benefits to our product manager while aligning with the team's Jetpack Compose migration.
The upfront work phase showed impressive progress:
Key deliverables included:
However, the team faced some challenges including documentation discrepancies and migration issues with Material Design
Implemented foundational styles and default Google Material 3 components to understand codebase behavior and address inconsistencies. We determined which components to use as-is or customize.
Using original component styling improved maintenance and utilized built-in accessibility and state features.
Building on GM3 learnings, we incorporated Sprout's style into identified components. We integrated elements from Seeds, our web design system, for cross-platform consistency.
This phase boosted engineer-designer collaboration. We secured a dedicated associate engineer for 1.5 quarters for the design system. Through regular meetings and reviews, we completed our initial design gallery, uncovering subtle Google Material 3 limitations. This teamwork enabled us to finalize most of the gallery.
To address challenges with concurrent development and identify necessary components, I audited the existing Android app. This audit informed iterations on the app's new look and helped determine which components to utilize or custom-build in phase 3.
Components built from Google Material will replace 80% of Android's UI, with custom components covering the remaining 20%.
Initial results from 5 features using the new design system show:
MSTQ is an experience design agency hired by Dais to design and pitch them an app for improving the logistics industry. Fleet owners face three main challenges: idle drivers without routes, too many routes without enough drivers, and one-way routes with empty return trips. They need a better way to manage inventory to maximize driver utilization, increase job capacity, and eliminate empty runs.
