Care/of Design System Evolution
Scaling a Rebranded Digital Experience
Care/of offers a personalized subscription for daily vitamins. The launch of its new brand identity prompted the evolution of the design system and its overall digital presence.
Role: Senior Product Designer
Team: Senior Product Designer, Brand Design Team, Head of Product Design, Creative Director, Engineering Lead
Methods: Visual Design, UI Design, Design Auditing
Duration: 2024 (4 months)
*Design complete and mid-development when the company closed down in July 2024.
Context
In late 2023, Care/of underwent a strategic rebrand led by the Creative team to better reflect the company’s shift toward a more gender-neutral market. To extend the new brand identity into the digital space, the Creative team came to us to align on how it could come to life. The challenge was to integrate the new brand identity into the existing product ecosystem. This required a new visual experience, and the design system needed to evolve alongside it.
Background
In a collaborative, week-long design offsite led by our Head of Product Design and Creative Director, the Product Design and Creative team members worked together to finalize the new brand’s digital expression. While the final visual design direction was informed by Design leadership’s strategic vision and the team’s collective explorations, I led the translation of that shared vision into a scalable framework and applied it across the web platform experience.
Role & Contributions
I drove the evolution of Care/of’s design system and led a site-wide UI refresh aligned to a new brand direction, translating the updated visual language into reusable design assets that ensured platform consistency, supported design velocity, and enabled cross-functional adoption across product surfaces. This required evolving legacy design system foundations while ensuring new components and styles were robust, reusable, and compatible across existing product surfaces.
I worked closely with Design leadership, Product Design and Creative teams, and our Engineering team to ensure consistent implementation, and supported design systems governance by providing guidance on usage patterns and contribution standards.
Planning a Scalable Overhaul
My process started with a comprehensive site-wide audit to identify gaps in the existing system and how it was being applied. The biggest challenges I faced were addressing those gaps while ensuring the new foundational design elements and components scaled properly from atomic elements to full-page layouts, considering the new brand’s unique visual style.
Design Systemization
This work required a thorough understanding of each web page’s hierarchy and structure, as well as a holistic approach to optimizing how new foundational elements and components functioned together. To validate robustness throughout this entire process, I stress-tested all new foundational elements and components across core user flows which guided my decisions on style properties and variants.
The results included a functioning design system library and redesigns of the following core pages: Home Page, Onboarding Flow (Quiz pages), Product Recommendations, Cart, Checkout, Account Creation, Confirmation, Product Catalog, and PDPs.
-
As I developed the design system’s foundations, I prioritized typography as a key area requiring deep systemization. The differences between the old and new typefaces demanded custom style properties to maintain strong visual hierarchy and readability across varying contexts. In this instance, I had to optimize leading, kerning, and spacing to ensure durability across type combinations, components, and breakpoints. This effort also included auditing and correcting legacy inconsistencies to align with the updated system.
Alignment & Implementation
Before moving into implementation, I facilitated discussions with the design teams to align on how system foundations and components would scale together across all core page designs. These discussions ensured shared clarity on usage, consistency across projects, and a smoother handoff to engineering as our starting point.
I partnered with the Engineering team to discuss technical feasibility of each page redesign and to introduce the new design system. Given that the scope of the project spanned roughly ten pages, we decided to prioritize rolling out pages based on business impact, starting with the Home Page.
Outcomes
The rebrand rollout was mid-development and slated for completion the following quarter when Care/of closed down in July 2024. Although operations ultimately ceased, the rebranded website was on track for success and had been well received by leadership throughout its development. Despite the circumstances, the design system and suite of core web pages had immediate cross-functional impact during the rebrand initiative.
The design system was published for immediate adoption, allowing cross-functional designers to begin applying new UI styles and components across platforms, channels, and mediums. To support the broader rebrand rollout, I created a series of modular page templates applying the new design system. These served as internal tools that enabled other designers to move quickly while maintaining consistency, ultimately increasing adoption rate and reducing design rework across core product flows.
Retrospective
Although the business had closed down, the initiative was a prime opportunity to optimize the design system and redefine cross-functional collaboration during a pivotal moment for the brand. This project not only allowed me to architect a scalable design system but also pushed me to think critically about governance, contribution models, and sustainable adoption across cross-functional teams. If the project had continued, the groundwork laid here would have supported faster design delivery, better alignment with engineering, and improved product quality across the board.