Thrive Design System
The Thrive Design System encapsulates the visual language, design principles, and interaction patterns that shape the Thrive app experience. It served a crucial role in helping us maintain quality and consistency during the remarkable growth of our brand and digital products.
As Lead Product Designer, I was responsible for defining the overall framework, authoring the documentation, and enforcing adherence. I also socialized the design system, soliciting input from other designers, engineers, product managers, and other organizational partners. Additionally, I contributed at the code-level to implement and update the design system as it matured.
Role: Design, development.
With just a few months to build an iOS and Android app from the ground-up, the initial version of the design system emerged out of pure necessity. I was the sole product designer on a rapidly-moving team, and mocking up each state of every screen would have monopolized my time and created a huge bottleneck. Instead, by documenting and socializing design standards and patterns, we established a source-of-truth to help keep the team aligned.
The first version of the design system served us well and supported two successful launches. With the apps live in the store, we could now focus on aesthetics and begin refining and maturing our visual language in earnest. Additionally, I worked toward expanding the documentation with guidelines for visual elements, component behavior, and interaction patterns.
Design + Code
As we proposed revisions to the design system, I found that working solely in Sketch was severely limiting. Specifically, I wasn't be able to evaluate how changes would impact the experience at scale, with real data. The best option would actually be to audition changes live in the app, which required working at the code-level.
I wanted to learn how to make these changes myself, so I dove headfirst into Xcode, Android Studio, and the fundamentals of Objective-C and Java. As my knowledge and abilities grew, I became heavily involved in implementing the design system in code — everything from layout constraints to animation parameters.
At the heart of Thrive's visual identity is our brand green, capturing the core brand attributes of vitality and positivity. The rest of the palette is defined by bold accent and alert colors, plus a trio of grays for text, borders, and background fills.
Lato is our primary text typeface, used for body copy and headings. We selected Lato based on excellent legibility and its open, approachable personality. It is used in regular and bold weights.
Dosis, our official brand typeface, is used for labeling primary buttons. It is only used at bold weight, with an all-caps treatment and ample tracking.
In the mobile apps, the type scale is built off a geometric series with a 1.2x ratio. This provides a nice range of sizes with good contrast.
As we added new features and functionality to the Thrive apps, I created a complementary set of UI icons. My workflow consisted of designing in Sketch, then exporting SVGs to Paintcode for the iOS app or VectorDrawables for Android. These formats enabled scaling across multiple screen densities, without the need for resolution-specific assets.
In terms of composition, I kept the icons monochromatic with a 1-pixel width border. This way, I could use code to dynamically transform icon properties like dimensions, colors, and borders, as well as generate path animations and other more elaborate effects.
The component library consists of UI essentials along with macro-components designed to help customers browse and discover products. We aimed for cross-platform visual consistency, with a few exceptions made for micro-interactions. For example, Material Design effects such as ripples and lift-on-touch were exclusive to the Android app.
In general, our interaction patterns build off the paradigms inherent to each platform. One exception is the full-screen modals we developed to provide a larger, more dynamic space for messaging.
It's worth mentioning that while iOS uses a tab bar for navigation, the Android app uses a slide-out navigation drawer. At the time Google had just introduced the tabbed navigation pattern to the Android platform, and we wanted to see wider adoption before making the switch.
With the rapid pace of development at Thrive, animations and transitions were often a luxury. Nevertheless, I would push for them where I felt they could truly add value to the experience. This included everything from animation sequences that accompanied key moments, to micro-interactions that were synchronized to user flows.
In practice, I often wrote the animation code myself using built-in methods and classes available to iOS and Android. This allowed me to have precise control over timings, easing curves, spring constants, etc. to get the nuances just right.
Dimensions and keylines for margins, paddings, components, product images, UI iconography, etc., follow an 8-pixel baseline grid. This helps establish a consistent spatial rhythm throughout the experience, and ensured alignment with Material Design standards.
As my first experience building a new design system, this was an incredible learning process. I was continually pushed to think about how design works at scale, from individual components to the holistic brand experience.
One of my biggest takeaways was the value of working in code, as a designer. This approach really helped facilitate faster, higher-quality output than a traditional design-development handoff. It also taught me why “pixel-perfection” can be extraordinarily challenging to achieve, with each platform having unique idiosyncrasies for UI implementation.
The creation, management, and governance of design systems is a rapidly evolving field of practice. With new tools and techniques continually being introduced, and even the emergence of new team roles, I'm excited to see what the future has in store.