Opportunities and Objectives

The primary goal was to transform the existing newsletter into a more engaging and visually cohesive experience that aligned with Quicken’s new brand direction. Key objectives included improving readability, increasing user interaction, and establishing a scalable design system that could support recurring monthly content.

Exploring Rebranding Opportunities 

At the start of this project, Quicken was undergoing a much-needed brand refresh aimed at redefining its visual identity and overall user experience. Following the initial application of this new look and feel to an early newsletter concept, I was responsible for advancing the design into a high-fidelity solution and establishing a cohesive design system to support it. This work extended beyond traditional product design for web or mobile applications, focusing instead on creating interactive, recurring email experiences. The challenge lay in translating a modernized brand into a scalable newsletter format that could be consistently delivered each month while maintaining usability, visual clarity, and engagement. There was an opportunity to translate Quicken’s rebrand into a scalable newsletter experience.

Roadmap

When building a design system, establishing a clear plan before making changes is essential. As I was still in the early stages of the project, I created a structured set of steps to guide the development process. Working from mid-fidelity designs, I first outlined the necessary tasks to refine the UI before moving into more detailed system work. I then incorporated an atomic design methodology to build the system from the ground up, ensuring that every element, from foundational components to more complex modules—was thoughtfully defined and consistently applied throughout the process.

Filling in the Gaps

Upon reviewing the existing design file, I identified several gaps that needed to be addressed before the system could fully support the newsletter experience. While the overall structure was in place, key components were either incomplete or lacked the level of detail required for consistency and scalability. In particular, the design modules had not been fully defined, leaving inconsistencies in layout, spacing, and component behavior. This highlighted the need to refine and finalize each module, ensuring they were flexible, reusable, and capable of accommodating the variety of content needed for recurring newsletters.

The design modules concept was introduced to define and organize all the possible sections that could appear within the newsletter. This involved mapping out common content patterns—such as feature highlights, article blocks, promotional sections, and CTAs—and translating them into structured, reusable modules. After auditing the existing designs, I identified gaps where modules were either missing or not fully developed, particularly across mobile and desktop variations. I then created and refined these modules to ensure they were responsive, flexible, and consistent with the new brand system, allowing designers to easily assemble layouts that adapt seamlessly across different screen sizes and content needs.

I systematically implemented auto layout to define how each component should respond to changes in content, ensuring consistent behavior across all modules. Since these designs would function as reusable templates, it was critical to establish clear rules for spacing, alignment, and resizing. I carefully configured constraints for elements such as text blocks, image placeholders, and containers so they could adapt dynamically while maintaining the intended structure. This allowed designers to easily swap in new content—whether adjusting copy length or updating visuals—without breaking the layout. By standardizing these behaviors, the system improved efficiency, preserved visual consistency, and ensured pixel-precise alignment across both mobile and desktop designs.

UI Inventory

Since the component library was being built from the ground up, it was important to account for every element that would contribute to the final experience. To ensure a comprehensive and systematic approach, I applied the atomic design methodology, breaking the interface down into foundational elements (atoms), combined components (molecules), and more complex modules (organisms). This framework helped me thoughtfully define each piece and understand how they interact within the system.

In parallel, I explored and documented component variants—such as different states, sizes, and content configurations—to provide greater flexibility and control for designers using the library. The more detailed and well-defined the components were, the easier it became to maintain consistency while accommodating diverse content needs. To support this process, I created a UI inventory for both mobile and desktop by dissecting existing layouts into their core elements, allowing me to identify patterns, gaps, and opportunities for standardization across the system.

Styling

I established a comprehensive set of styling properties to ensure visual consistency across the entire system, including color palettes, typography scales, and a clear text hierarchy. This involved defining primary, secondary, and accent colors in alignment with the rebrand, as well as setting rules for usage to maintain accessibility and contrast. For typography, I created a structured scale that outlined font families, sizes, weights, and line heights for different content types such as headings, subheadings, body text, and captions. I also defined a clear hierarchy to guide how information should be presented and prioritized within each module. Once these standards were in place, I systematically applied them across the designs, updating existing components and layouts to reflect the new system and ensure a cohesive, polished user experience.

Component Library

Creating effective components requires a thoughtful, deliberate approach. Next, I built components that would be reused across multiple designs. This stage focused on establishing a clear source of truth that both designers and developers would rely on. The way they’re structured and organized directly impacts how easily they can be used, adapted, and maintained. By being intentional about their setup and placement, I can help the team work more efficiently—both when implementing designs and when making updates later on.

Design System

By this stage, a unified and cohesive visual identity had been established—but the work didn’t stop there. Each newsletter still needed to feel distinct, which made it essential to clearly define the boundaries of customization for designers. To address this, I used consistent labeling conventions alongside Figma’s asset library features to communicate what could and couldn’t be modified.

I then structured the library in a logical, sequential order, guiding designers through the newsletter from top to bottom. This organization not only provided additional clarity and support, but also made the design process more intuitive and efficient. Designers could move through their work in a natural flow while easily understanding how different components fit together. It also improved visibility across categories, helping streamline navigation and speed up decision-making. In the end, the system created a more seamless workflow and strengthened communication across the team.