Modular System Redesign
About
Project overview
The challenge
Roche needed to transform their existing app marketplace — a complex, inconsistent ecosystem — into a scalable, maintainable, and user-friendly platform.
As the Product Designer on this project, I led the UX redesign and the creation of a modular design system that supported both flexibility and visual consistency across platforms.
The opportunity
We were aim to build a flexible, component-based modular framework that required balancing consistency, flexibility, and accessibility to ensure both a seamless user experience and efficient development processes.
Ensure visual consistency across multiple digital platforms.
Facilitate frequent updates through a modular, component-based approach.
Embed accessibility by design
This redesign was an opportunity to bring structure, scale, and clarity — while improving cross-functional collaboration.
Research
To uncover needs and pain points, we interviewed internal stakeholders and content managers across regions, and analyzed existing content workflows and usage patterns. This helped validate the need for both an improved UX and a robust modular system.
What we looked for
How users search and browse
What information is essential for decision-making
What slowed down content updates or created bottlenecks
Where accessibility or compliance fell short
Strategy & Design Approach
We used a modular-first approach to redesign the marketplace — treating every part of the experience as a reusable building block.
I led the creation of a modular page structure and reusable components. This included layout blocks, media modules, CTA patterns, comparison tables, and feature highlights — all built to adapt to different content needs.
Key decisions
Defined content architecture that could adapt across product categories
Created page templates that balanced flexibility and brand coherence
Prioritized accessibility as a core foundation (WCAG 2.1)
Design System Principles
Modular → Built as reusable layout blocks, templates, pages
Flexible → Adapted for various product types and page goals
Accessible → Screen-reader support, keyboard nav, etc.
Scalable → Used across different page types and being scaled
Design
We co-created a scalable system across 3 layers:
1. Content Architecture: defined a modular IA model, with consistent hierarchy for different types of pages: Product overviews, Customer Success stories, Listing pages
2. Component Library: built and documented in Figma: cards, feature lists, tabs, tables, badges, etc. All with assets for keyboard navigation and screen reader labels.
3. Templates: modular and flexible templates for product detail, list views, etc.
Results and Impact
The result was a modular design framework that streamlined workflows, maintained brand coherence, and supported diverse content needs within the platform.
We successfully brought modularity to UI design, creating a system that is not only flexible, scalable, and cost-effective but also customizable, reusable, and consistent. By incorporating modular design principles and style guides, we enabled a seamless connection between design and implementation.
+150
Templates and modular components prepared
+20
Different page layouts handed off
60%
Reduced update time for new product pages
Takeaways
Modularity isn’t just a technical challenge — it’s also an editorial and UX challenge
Embedding accessibility early in design decisions avoids friction later
Strategic alignment with compliance/legal early on saved weeks during rollout
Visual consistency improves trust, but needs to be balanced with content flexibility