WORK / DESIGN SYSTEM
Increase efficiency and consistency within the app and between the iOS and Android platforms. This better enables our apps to support user-centered features such as dynamic text sizing and dark mode.
I led the design system initiative, developing the framework and strategy in close collaboration with our lead iOS and Android engineers. Subsequently, I independently built and maintained the design system Figma file, utilizing Figma's tools and structure to support tokens, smart components, and variables.
I crafted base and semantic tokens for color and font styles aligning with both platforms, enabling iOS and Android engineers to pull styles through a shared JSON file.
The implementation of color and font tokens resulted in reduced time for engineers to build new components, streamlined design walkthroughs, minimized VQA efforts, and enhanced codebase consistency and cleanliness.
Creating a design system that is simple, scalable, and understandable by both designers and engineers will shorten design and development time, reduce errors in styles, and expedite the development and launch of new features.
Drawing on my experience with Condé Nast's global design systems, I leveraged the open-source information on Material 3 Design Systems (Android) and Human Interface Guidelines (iOS) to inform my strategy in developing The New Yorker’s app design system.
I developed multiple naming conventions for the semantic tokens. Ultimately, with stakeholder input and guidance, I defined a model that aligned with the global design framework already in place for the web platforms at Condé Nast. This ensured universal understanding among all designers and engineers at the company.
Monocle serves as the single source of truth for designers on the native apps team, with engineers pulling JSON files directly. Beyond font and color styles, this file comprehensively lists product features for each app, ensuring up-to-date information and linking out to detailed project files.
Simplified component management and centralized documentation significantly facilitated the development and maintenance of existing and new features.
We received a significant amount of user feedback regarding the absence of dark mode. With the design system tokens now implemented in Figma and our codebase, we are now able to easily implement it.
With the token system I built in Figma, I can easily experiment with dark mode, bringing the New Yorker app to the dark side...
Product Designer - Charlie Carlo
Design Support - Steven Striegel, Danielle Varags
Engineering Support - Sawant Kumar, Arun Kumar
charlo.design © 2024