Build the Design Foundation
If you need a bit more context, start with My Leadership Framework
As a startup's first designer joining after product-market fit, you inherit a messy house that needs deep cleaning—all while keeping it running smoothly.
This was the situation at Headway. In early 2022, our design landscape was chaotic. We had no brand book, lacked coherent visual styles, and were missing established design patterns. The marketing team used inconsistent shades of our brand color green in paid social ads, while the product interface was cluttered with heavy shadows that would make any designer cringe.
Today, we have a much more robust design foundation in place, which is reflected in our compelling visuals across different touch-points.
It's like building and evolving a shared language across design, engineering, and marketing teams so we can communicate as one unified voice to customers. Building this foundation is ongoing work—the maturity needs to grow intentionally as the complexity increases.
During this journey, I initiated and brought in experts to lead two major initiatives central to building our foundation.
Product design system—creating a shared language between design and engineering to enable scalable, future-proof design.
Brand foundation and marketing design guidelines —developing a unified language across the company to tell a more nuanced story in the market.
Build the Product Design System
Design System Development
The company had been using MUI to build its product from the very beginning—it was fast and easy. Over the past few years, the product grew significantly, adding multiple features and achieving clear product-market fit.
We had clearly outgrown the prototyping phase and entered a scaling phase. The time was right to move away from MUI and build our system in-house—one that would be future-proof, with a visual style intentionally focused on efficiency, accessibility, clarity, and brand alignment.
I hired a design systems contractor and assembled a small tiger team spanning design and engineering. We divided the effort into two phases: building the design system and migrate existing product with ongoing maintenance.
I time-boxed the first phase into a 3-month effort, starting with auditing existing components and aligning on the new visual language. We formed a tight collaboration between designers and engineers to design and build each component.
Migrate to the New System
The real challenge lies in the migration phase. While it's straightforward to set a cutoff date for designers to use the new design system in all ongoing and future work, migrating the existing product and establishing a clear engineering transition point is more complex. Though we lack the resources for a complete product overhaul, we still need to implement the new system and provide clear guidance to engineers building features during this transition period.
To resolve the conflict, I broke down the migration into three phases and aligned on a tiering framework for all the key pages that contribute to ‘looks good’.
Proof of concept: at this stage, we migrate one area in the provider product to ensure the system is ready for migration
Looks good: at this stage we migrate all the high priority page to ensure the app ‘looks good’ so the provider team can confidently ship new features with design system.
Build right: at this stage, the provider team should migrate from ‘looks right’ to ‘built right’ as we touch pages afterward.
This provides the engineering team with a clear structure to size the effort and estimate timelines confidently. Additionally, any projects shipping after ‘looks good’ rollout must be implemented using the new style.
Update the Maintenance Model
Another key challenge was the maintenance and contribution model. We couldn't dedicate a full-time team to the design system, but it still needed ongoing maintenance and evolution—without proper care, all the initial work risked falling back into disarray.
To address this challenge, I transformed the tiger team into a part-time project team working at 20% capacity for governence. I shifted the design contractor to part-time hours and collaborated with engineering leaders to ensure continued engineering adoption through a federated approach. This arrangement also provided the Eng DRI with a strong rationale for staff-level promotion through their contributions to the organization.
While the 20% model has significant drawbacks and I wouldn't recommend it as a long-term team structure in most situations, it worked well for our design system thanks to the founding team's deep ownership.
Conclusion
The initiative has been tremendously successful on every front. The existing product underwent a major visual transformation, resulting in a more modern and intuitive interface for customer navigation.
This work established a strong foundation for all future design and development, with every new feature now being built using the product design system in the last 2 years. Additionally, our focus on accessibility has helped us meet payer requirements.
Overhaul the Brand Foundation
Brand 1.0
Customers loved Headway's watercolor illustrations and brand identity. When the company was founded, there was careful thought put into the brand persona and intended emotional impact on customers. However, without clear documentation, inconsistent assets in terms of quality and style were created as different marketers worked with various agencies. Brand decisions (such as logo, font style, illustrations, look and feel system) were scattered across Figma files and institutional knowledge.
Therefore, my first step in building out the brand foundation was collaborating with the brand agency that developed Headway's original brand identity to create a brand book documenting all key decisions, allowing us to produce consistent and higher quality visual artifacts to stop the bleeding with external freelancers. Meanwhile, instead of having individual marketers to hire their own contractors, I built the creative pipeline with one agency who is well trained on our brand book and be able to scale up/down easily to support a variety need of marketing asks.
The brand foundation and creative pipeline served us well for a year. However, as we face a more pressing positioning challenge and increasing our marketing investment, we identified the main limitations in the existing brand foundation:
The existing brand identity is extremely limited, it fails to support a more nuanced & compelling story we need to tell in the market.
The current guideline focuses more on high-level direction with few practical examples. This lack of detailed guidance for each marketing channel requires frequent design reviews to ensure new assets remain on-brand.
It was the right time to evolve the brand identity and build a set of more extensive application guidelines. Therefore, alongside with marketing leadership hire, I hired the first in-house Creative Director and put together a task force to evolve the brand foundation to meet the marketing demand on quality and quantity
From Brand 1.0 to Brand 2.0
Through this effort, we aimed to not only evolve the brand identity to tell a more compelling story in the market, but also create a system that would enable the design team to build assets more effectively across channels. The creative team prioritized 3 items in the brand foundation:
Brand Design Foundation: durable design guideline that bridged brand, product and growth team under a shared structure.
Design Application Guidelines: design guidelines across key channels, such as paid media, Lifecycle, organic social, etc
Media Library: content/media library that powers creative assets across all channels, such as paintings & illustrations, photo assets and videos.
Brand Design Foundation
The new Brand Design Foundation has two foundational elements:
Visual identity guideline: one source of truth for designers build creative assets across all channels
Verbal identity guideline: tone-of-voice that brings all writing disciplines to write around a shared voice and persona
Channel-specific Design Application Guidelines
Learning from our brand 1.0 experience, we didn't just stop at creating a solid visual identity guideline. Instead, we expanded it into a comprehensive set of application guidelines, developed through A/B testing and established best practices for Paid social, Organic and Lifecycle marketing channels as well as branded decks.
Media Library
It's a combination of illustrations, photos, and videos that serves as a resource for producing marketing materials and supporting communication. In 2024, we commissioned artists and did the first photo shooting in Williamsburg that gives us 15 paintings and 50+ photo assets and videos that can be used for different marketing deliverables.
Conclusion
By the end of 2024, we had built a solid brand foundation with growing design application libraries across key channels and evolved the product design system to match the style.
The initiative proved to be a huge success—the new brand assets immediately outperformed the brand 1.0 assets across all channels, delivering significant business value right away. Not only did this establish brand as a worthwhile independent investment with exec buy-in, but the foundation we built enabled a lean team to create higher-quality assets much more efficiently to meet growing marketing demand. Most importantly, it provided a lasting framework to guide visual asset creation across the entire company across Marketing, Comms & PR, People and Product.