Careismatic - UX Strategy & Multi-Brand Component Architecture
Defining a shared UX framework and reusable architecture that preserves brand distinctiveness while delivering consistency, efficiency, and clarity across multiple Careismatic sites.
Context
Careismatic’s portfolio of healthcare-focused brands had grown independently, resulting in fragmented UX, inconsistent patterns, and duplicated design elements across multiple sites. This made it harder for users to navigate offerings and for internal teams to build new pages efficiently.
To address this, we defined a unified UX strategy and multi-brand design foundation — establishing shared patterns, CSS rules, and reusable components that support coherence, scalability, and execution speed across the Careismatic digital ecosystem.
Outcome
The shared UX framework and reusable architecture gave Careismatic a scalable, portfolio-wide design foundation that reduced design and development overhead while maintaining brand distinctiveness. By codifying shared patterns and component behavior, teams can now build new pages faster with consistent UX expectations and clearer cross-brand experiences. Early internal feedback highlights improved execution velocity, reduced QA friction, and stronger alignment of brand expression across the five properties.
Problem StatementThe lack of a shared UX and CSS foundation meant design decisions were repeatedly made in isolation across brands, slowing development velocity, increasing QA friction, and making consistent experiences hard to maintain at scale.
RoleLead UX & Design Strategist — Owned the end-to-end UX system definition, multi-brand CSS foundations, and reusable component architecture. I partnered with product leadership and development to align on strategy, synthesize research insights, and deliver practical, scalable patterns that teams could adopt confidently.
TeamProduct Director — Provided strategic alignment, design review, and co-presentation of key artefacts with stakeholders.
Front-End Engineers — Collaborated on implementation feasibility and responsive behaviour of shared components.
Brand & Product Stakeholders — Validated requirements and priorities across the multi-brand portfolio.
Project Duration4-month engagement (from initial audit through delivery of the shared CSS foundation, components, and early extensions)
Discovery & Foundation
Audit of CSS and UI patterns across Careismatic brands to identify shared rules and variance boundaries.
The initial discovery phase focused on establishing a shared understanding of where the portfolio’s design inconsistencies had the greatest impact on UX and engineering velocity. A comprehensive audit of existing styles, breakpoints, spacing rules, component behaviour, and brand exceptions revealed duplicated CSS definitions and divergent UI patterns across the five Careismatic sites.
This informed the creation of a unified CSS foundation and responsive strategy, which became the baseline for all subsequent components and interaction patterns.
Discovery & Alignment Workshops
To avoid jumping straight into visuals, we ran a series of three structured working sessions to align on what datavisor.com needs to do, which pages matter most, and how the brand should show up across the web experience.
Session 1 – High-Impact Pages & Site Priorities
We started by identifying the highest-engagement pages and defining what each needed to become in the new system: Platform, Solutions, Industries, Contact/Demo, and Homepage.
Key outcomes:
Platform – Reframe as a comprehensive navigation hub that clearly explains “What is the Platform?” across data orchestration, real-time detection (including GenAI), case management, and analytics, with strong benefit framing and links into solutions and industries.
Solutions – Modular, outcome-driven pages for each use case (e.g., onboarding, AML, transaction monitoring) with deep dives, stats, trust proof, and relevant resources.
Industries – High-intent, funnel-focused pages with a Problem → Journey → Solution → Result narrative and tightly scoped CTAs.
Contact / Demo – Conversion-optimized forms with clear expectations, brand-aligned microcopy, and frictionless layouts.
Homepage – Quickly reassert DataVisor’s authority with a focused hero, platform/solution/industry previews, social proof, and clear paths to Request Demo / Contact Sales.
This session defined where Phase 1 would focus and which pages would anchor the new architecture.
Cross-team alignment: Journey maps reviewed with product, marketing, and design partners to agree on priority pages, owner responsibilities, and the “happy path” through the new site.
Session 2 – Competitor Benchmarking & Structural Patterns
Strategic takeaways:
Navigation & structure – Simplified top nav with Platform / Solutions / Industries and a persistent “Request Demo” call-to-action.
Conversion flows – Stand-alone, nav-free demo and contact pages with focused, trust-building copy and clear response expectations.
Content flow – Use a consistent Problem → Journey → Solution → Outcome model for Platform and Industry pages.
Visual & motion rhythm – Light, purposeful animation, section transitions (e.g., dark → light), and branded shapes as long-term goals for Phase 2+.
These insights fed directly into the Phase 1 page models for Platform, Solutions, Industries, Contact/Demo, and Homepage.
Competitive audit of adjacent B2B fintech sites, used to identify reusable patterns for navigation, layout, and conversion sections.
Session 3 – Brand Traits & Unified Design Direction
Finally, we aligned on three core brand traits to guide the web experience: Innovative, Trustworthy, Powerful.
From those traits, we defined a unified visual and interaction system:
Innovative – Data-driven fluid visuals, motion that feels like the system “thinking,” and modular components that adapt across use cases.
Trustworthy – Calm, spacious layouts; UI-first storytelling over stock lifestyle imagery; clarity and honesty in both visuals and tone.
Powerful – Enterprise-grade but approachable; modular, scalable components; interactions that reinforce control rather than complexity.
We translated this into guidance for visual language, layout, motion, imagery, color, and tone so that brand, marketing, and Webflow implementation all drew from the same north star.
Visual System & UI Kit
With the page models and journeys aligned, the next step was to define a visual system that could scale across the new Webflow build.
I partnered with 553DR to translate the refreshed brand into a practical UI kit—covering typography, color tokens, button states, iconography, and data-driven graphics. We aligned early on DM Sans as the core typeface, a tiered green/blue palette mapped to key product stories, and a motion-friendly card/grid structure that would work across homepage, platform, solutions, and resources.
The UI kit became the source of truth for both the branding agency and the Webflow team: a component-ready library that reduced one-off decisions and made it easier to roll out new pages while keeping accessibility, contrast, and spacing consistent.
-
![]()
Modular graphics and data visualization elements that support data-centric storytelling, reinforcing the brand’s tech and analytics persona.
-
![]()
Scalable color palette with primary, neutral, and accent colors keyed to mood, contrast, and visual rhythm across the site.
-
![]()
Purpose-built icon set with multiple sizes and states, ensuring visual clarity and consistency for different contexts and densities.
-
![]()
Standardized button patterns and interactive states (rest, hover, pressed, disabled) to support consistent UI behavior and accessibility.
-
![]()
Core typography system using DM Sans with defined scales and weights for hierarchy across headings, body, and UI text.
MVP Model
To kick off the build, 553DR translated early UX alignment and stakeholder insights into the first iteration of our MVP page models, establishing core page archetypes (Platform, Solutions, Industries, Resources, Conversion) and a clear visual baseline for content hierarchy and interaction.
We then ran two review cycles with stakeholders — including the CMO, marketing leadership, and product teams — to refine these layouts. In each cycle, I:
contextualized the page models against the experience map and site framework,
consolidated cross-functional feedback into clear design direction, and
collaborated hands-on with 553DR to revise and re-present for alignment.
This iterative review process ensured narrative flow, content priorities, and conversion intent were agreed upon before we moved into component definition & build.
Reusable Components
Once the MVP page models were finalized, we translated them into a reusable component system — the foundation of the Webflow build. These components were designed to support scalability, consistency, and flexibility across varying page contexts (homepage, platform, solutions, industries, resources) and device breakpoints.
Responsive typography scales & hierarchy: defined type sizes, weights, and spacing tokens for consistent textual rhythm across desktop and mobile breakpoints.
Component rules: low-level tokens (padding, corner radius, control sizes) that ensure components behave predictably and scale with content.
Typography & Layout Specs
Applied context: how typography and spacing adapt across breakpoints for real content layouts.
Module patterns: layout specifications for common elements (cards, hero sections, stats blocks, CTAs), ensuring consistency and predictability across pages.
Module Specs
Grid & spacing tokens: standardized spacing, margin, and padding rules to maintain visual rhythm and structure.
Icon sizing & system: a cohesive icon set with clear sizing rules to reinforce clarity and scale across device widths.
Spacing, Grid & Icon Tokens
From Design System to Scalable Site Build
After finalizing the MVP page models and establishing the reusable component system with 553DR, the internal design team took ownership of expanding the site across additional page types and scenarios.
Using the component system as a foundation, we:
Assembled site templates for all major page families — including Homepage, Platform, Solutions, Industries, and Resources — ensuring a consistent hierarchy and pattern language across the entire site.
Refined component behavior across light and dark modes, breakpoints, and content variations to ensure visual harmony and functional consistency on every device.
Implemented global design rules (type, spacing, tokens) so that even custom content pages could be created rapidly without breaking the system.
This phase transitioned the work from MVP models into a full, scalable site architecture that marketing and product teams can confidently own and extend.
Link to the Live Site
Once the full suite of page templates and components was stabilized and tested, the updated site was deployed using Webflow.
This live rollout reflects a coherent narrative from platform positioning to solution story, industry relevance, resources, and conversion points — all powered by a system designed for scalability.
Early Traction & Feedback
“Early indicators show healthy engagement trends — including elevated visit depth and repeat exploration of Platform and Solution pages — and the team has received positive client feedback on the improved clarity and structure.”
— Alex Niu, Head of Marketing, DataVisor
Since the relaunch, internal teams have observed directional improvements in user behavior and stronger qualitative responses from prospects. Team members have noted that the new experience not only feels more cohesive and easier to navigate, but also communicates DataVisor’s positioning more clearly through a consistent narrative and visual language. These early signals suggest that the combined improvements to structure, system, and visual clarity are resonating with both new visitors and returning users.
This reflects balanced impact: strategic clarity and navigation improvements drove engagement momentum, while reinforcing brand recognition and perceived trust without relying solely on visual style.
While full analytics access isn’t available for this portfolio, these directional engagement trends and positive feedback loops align with the strategic goals of scalability, clarity, and a stronger digital experience. Formal analytics tracking is planned for upcoming phases to measure impact on engagement, conversions, and content discovery metrics.