Product Design
NOVA DESIGN SYSTEM
Design and management of a design system for the B2B products.
Year :
2024
Industry :
Financial Services / Marketing
Client :
Morningstar
Project Duration :
2 years
Problem Statement
The existing design system had been built for a different product ecosystem and was optimized for a distinct set of user behaviors, constraints, and business goals. As the B2B platform evolved, it became clear that this system did not adequately support the complexity, content structure, and scalability requirements of the B2B experience.
In the absence of a purpose-built foundation, teams began introducing ad-hoc components and pattern variations to meet immediate needs. Over time, this led to fragmentation across the interface, inconsistencies in implementation, increased design and engineering overhead, and growing maintenance costs.
Without a dedicated and aligned system for B2B, the organization faced risks to scalability, operational efficiency, cross-functional alignment, and long-term product quality.
Opportunity
Establish a dedicated B2B design system that aligns with the platform’s specific user needs, business objectives, and technical constraints—while creating a scalable foundation for future growth.
By defining a structured, staged rollout process and partnering closely with engineering, the opportunity was to:
Replace fragmented, ad-hoc solutions with a cohesive and reusable component library
Reduce implementation variability and technical debt
Improve speed and confidence in page creation
Strengthen cross-functional alignment through shared standards and governance
Enable long-term scalability without sacrificing consistency or quality
This initiative positioned the B2B platform not just for visual consistency, but for operational efficiency and sustainable product evolution.
Process & Solution
To create a scalable foundation for the B2B platform, we approached the initiative as both a system redesign and an operational alignment effort.
Audit & Alignment
In partnership with another designer, we conducted a full audit of the B2B experience — inventorying pages, identifying patterns and gaps, and mapping inconsistencies.
We collaborated closely with engineering and PM to align on technical constraints, delivery scope, and feasibility. Together, we established shared naming conventions across design and code to ensure long-term consistency.
System Architecture
Because the system needed to operate across multiple environments —
Figma (token-driven design library)
Storybook (reusable coded components)
Contentstack (author-facing sections and styles)
We structured it intentionally for cross-tool coherence, ensuring predictable translation from design to development to content authoring.
Phased Execution
To deliver within time constraints, the work was structured into four stages:
Audit & Definition
Initial Build (core components + documentation)
Expansion (additional sections + composable templates)
Evolution (iteration + new page types)
Once established, we led the migration of existing B2B pages to the new system and defined an ongoing governance model with a dedicated design–engineering pair.
Outcome
Dedicated B2B design system aligned with brand and technical standards
Reusable component library across design and code
Faster, more consistent page creation
Reduced variability and technical debt
Greater autonomy for content authors within clear guardrails
The B2B platform now operates on a scalable, maintainable foundation built for long-term growth.
Impact
Established a dedicated B2B design system tailored to a distinct product ecosystem
Reduced variability across design and engineering through shared standards and governance
Improved delivery efficiency by replacing ad-hoc solutions with reusable, documented components
Enabled greater autonomy for content authors within clear UX and brand guardrails
Strengthened long-term maintainability and reduced system fragmentation
This initiative transformed the B2B platform from a fragmented implementation model into a cohesive, scalable system aligned with business strategy and operational maturity.
More Projects
Product Design
NOVA DESIGN SYSTEM
Design and management of a design system for the B2B products.
Year :
2024
Industry :
Financial Services / Marketing
Client :
Morningstar
Project Duration :
2 years
Problem Statement
The existing design system had been built for a different product ecosystem and was optimized for a distinct set of user behaviors, constraints, and business goals. As the B2B platform evolved, it became clear that this system did not adequately support the complexity, content structure, and scalability requirements of the B2B experience.
In the absence of a purpose-built foundation, teams began introducing ad-hoc components and pattern variations to meet immediate needs. Over time, this led to fragmentation across the interface, inconsistencies in implementation, increased design and engineering overhead, and growing maintenance costs.
Without a dedicated and aligned system for B2B, the organization faced risks to scalability, operational efficiency, cross-functional alignment, and long-term product quality.
Opportunity
Establish a dedicated B2B design system that aligns with the platform’s specific user needs, business objectives, and technical constraints—while creating a scalable foundation for future growth.
By defining a structured, staged rollout process and partnering closely with engineering, the opportunity was to:
Replace fragmented, ad-hoc solutions with a cohesive and reusable component library
Reduce implementation variability and technical debt
Improve speed and confidence in page creation
Strengthen cross-functional alignment through shared standards and governance
Enable long-term scalability without sacrificing consistency or quality
This initiative positioned the B2B platform not just for visual consistency, but for operational efficiency and sustainable product evolution.
Process & Solution
To create a scalable foundation for the B2B platform, we approached the initiative as both a system redesign and an operational alignment effort.
Audit & Alignment
In partnership with another designer, we conducted a full audit of the B2B experience — inventorying pages, identifying patterns and gaps, and mapping inconsistencies.
We collaborated closely with engineering and PM to align on technical constraints, delivery scope, and feasibility. Together, we established shared naming conventions across design and code to ensure long-term consistency.
System Architecture
Because the system needed to operate across multiple environments —
Figma (token-driven design library)
Storybook (reusable coded components)
Contentstack (author-facing sections and styles)
We structured it intentionally for cross-tool coherence, ensuring predictable translation from design to development to content authoring.
Phased Execution
To deliver within time constraints, the work was structured into four stages:
Audit & Definition
Initial Build (core components + documentation)
Expansion (additional sections + composable templates)
Evolution (iteration + new page types)
Once established, we led the migration of existing B2B pages to the new system and defined an ongoing governance model with a dedicated design–engineering pair.
Outcome
Dedicated B2B design system aligned with brand and technical standards
Reusable component library across design and code
Faster, more consistent page creation
Reduced variability and technical debt
Greater autonomy for content authors within clear guardrails
The B2B platform now operates on a scalable, maintainable foundation built for long-term growth.
Impact
Established a dedicated B2B design system tailored to a distinct product ecosystem
Reduced variability across design and engineering through shared standards and governance
Improved delivery efficiency by replacing ad-hoc solutions with reusable, documented components
Enabled greater autonomy for content authors within clear UX and brand guardrails
Strengthened long-term maintainability and reduced system fragmentation
This initiative transformed the B2B platform from a fragmented implementation model into a cohesive, scalable system aligned with business strategy and operational maturity.
More Projects
Product Design
NOVA DESIGN SYSTEM
Design and management of a design system for the B2B products.
Year :
2024
Industry :
Financial Services / Marketing
Client :
Morningstar
Project Duration :
2 years
Problem Statement
The existing design system had been built for a different product ecosystem and was optimized for a distinct set of user behaviors, constraints, and business goals. As the B2B platform evolved, it became clear that this system did not adequately support the complexity, content structure, and scalability requirements of the B2B experience.
In the absence of a purpose-built foundation, teams began introducing ad-hoc components and pattern variations to meet immediate needs. Over time, this led to fragmentation across the interface, inconsistencies in implementation, increased design and engineering overhead, and growing maintenance costs.
Without a dedicated and aligned system for B2B, the organization faced risks to scalability, operational efficiency, cross-functional alignment, and long-term product quality.
Opportunity
Establish a dedicated B2B design system that aligns with the platform’s specific user needs, business objectives, and technical constraints—while creating a scalable foundation for future growth.
By defining a structured, staged rollout process and partnering closely with engineering, the opportunity was to:
Replace fragmented, ad-hoc solutions with a cohesive and reusable component library
Reduce implementation variability and technical debt
Improve speed and confidence in page creation
Strengthen cross-functional alignment through shared standards and governance
Enable long-term scalability without sacrificing consistency or quality
This initiative positioned the B2B platform not just for visual consistency, but for operational efficiency and sustainable product evolution.
Process & Solution
To create a scalable foundation for the B2B platform, we approached the initiative as both a system redesign and an operational alignment effort.
Audit & Alignment
In partnership with another designer, we conducted a full audit of the B2B experience — inventorying pages, identifying patterns and gaps, and mapping inconsistencies.
We collaborated closely with engineering and PM to align on technical constraints, delivery scope, and feasibility. Together, we established shared naming conventions across design and code to ensure long-term consistency.
System Architecture
Because the system needed to operate across multiple environments —
Figma (token-driven design library)
Storybook (reusable coded components)
Contentstack (author-facing sections and styles)
We structured it intentionally for cross-tool coherence, ensuring predictable translation from design to development to content authoring.
Phased Execution
To deliver within time constraints, the work was structured into four stages:
Audit & Definition
Initial Build (core components + documentation)
Expansion (additional sections + composable templates)
Evolution (iteration + new page types)
Once established, we led the migration of existing B2B pages to the new system and defined an ongoing governance model with a dedicated design–engineering pair.
Outcome
Dedicated B2B design system aligned with brand and technical standards
Reusable component library across design and code
Faster, more consistent page creation
Reduced variability and technical debt
Greater autonomy for content authors within clear guardrails
The B2B platform now operates on a scalable, maintainable foundation built for long-term growth.
Impact
Established a dedicated B2B design system tailored to a distinct product ecosystem
Reduced variability across design and engineering through shared standards and governance
Improved delivery efficiency by replacing ad-hoc solutions with reusable, documented components
Enabled greater autonomy for content authors within clear UX and brand guardrails
Strengthened long-term maintainability and reduced system fragmentation
This initiative transformed the B2B platform from a fragmented implementation model into a cohesive, scalable system aligned with business strategy and operational maturity.