Paulo Pereira - Copy of Internal Platform Redesign

Design System Optimization & Scalability

Case Study

Note: To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of my current employer.

My Role

🤔 Concepting / ✏️ Sketching / 📝 Wireframing / 🎨 UI/UX Design /

🔍UX Research / 🤖 Prototyping

Tools

Figma

Platform

Desktop

Timeline

4 Weeks

The Business Problem:
The organization faced significant design debt and operational silos. With no centralized digital documentation framework, individual business units developed and interpreted UI elements independently. This fragmented approach resulted in:

Critical internal and external insurance platforms lacked a cohesive visual and functional language.
Engineering and developers were "reinventing the wheel" for every update, leading to redundant work and slower time-to-market.
The marketing rebrand could not be effectively implemented at scale because there was no technical blueprint to bridge the gap between creative vision and functional software.

The Strategic Solution:

I spearheaded the transition from a traditional rebrand to a comprehensive, data-driven Digital Design System. Rather than just updating aesthetics, I architected a scalable UI/UX framework designed for high-density insurance environments.

Proactive Framework Architecture: I took the initiative to translate Marketing’s brand identity into a technical UI kit, ensuring the aesthetic remained professional yet approachable for complex insurance workflows.
Platform-Specific Adaptation: Recognizing that "one size does not fit all," I engineered the system to be platform-agnostic, creating custom templates that optimized the user flow for web, mobile, and legacy internal interfaces.
Stakeholder-Driven Governance: I facilitated cross-functional workshops with stakeholders to align the system with five core pillars: Consistency, Modernization, Collaboration, Adaptability, and Frictionless UX.

Deployment & Support Model: Beyond the documentation, I acted as the primary Design Ops lead—onboarding individual product teams, building custom components for unique use cases, and providing 1-on-1 support to ensure successful integration.

The Result:

The transformation moved the company from a fragmented digital presence to a high-velocity, unified ecosystem.

By utilizing a "drag-and-drop" component library, the time from design concept to developer handoff was nearly halved by 45%.
30% reduction in front-end development Costs, reusable code snippets eliminated the need for custom CSS/JS for every new page, significantly lowering engineering overhead.
Global scalability, the system successfully scaled from supporting, 1,000 global assets, maintaining perfect brand cohesion.
Improved employee productivity by simplifying workflows and intuitive UI patterns led to a 15% increase in task completion speed for high-volume insurance workflows.
Streamlined onboarding process reducing the ramp-up time for new creative hires by 60% through comprehensive, centralized documentation.

Approved Logo Usage Applications

Standardized a multi-platform logo architecture, delivering a versatile asset library that ensures 100% brand consistency across internal and external products.
Authored a comprehensive Governance Framework for brand assets, eliminating visual fragmentation by codifying strict rules for scaling, padding, and background color application.
Optimized UI legibility by implementing a dynamic "Clear Space" system, ensuring brand recognition remains high in data-dense insurance interfaces.

Typography & Legibility Governance

Readability: Optimized typographic hierarchy for maximum legibility in low-light and high-density data environments.
Inclusivity: Designed a "No-Barrier" interface strategy to ensure universal content accessibility.
Compliance: Guaranteed institutional adherence to WCAG 2.1 accessibility benchmarks.

Icon Modernization

Icon Geometry & Scaling: Established a grid-based design system (e.g., 24px base grid) to ensure optical balance and legibility, even at micro-resolutions.
Semantic Consistency: Developed a "Icon Governance" document to ensure that specific symbols consistently represent the same actions across different business units, preventing user confusion.
Systemic Modernization: Replaced fragmented, legacy assets with a cohesive, modern icon set characterized by unified stroke terminals, corner radii, and fill-logic.

Tabular Design Patterns

The Clarity Pillar: Moved beyond "standard" tables to create a curated information hierarchy, utilizing typography and color-coding to highlight critical exposures within structured data.
The Scalability Pillar: Built a "Flexible-Column" system that allows business units to customize data density based on the specific complexity of the policy being reviewed.
The Interaction Pillar: Streamlined data manipulation by integrating intuitive sorting and filtering logic that mirrors the mental models of professional underwriters.
The Accessibility Pillar: Standardized focus-state management and high-contrast ratios to ensure that data remains accessible to users in variable-light field environments.

Retrospective:
Challenge: When I joined the re-branding team, I inherited a fragmented digital landscape. The primary challenge was not just a lack of "style," but a
lack of structure. Silo effect each department acted as its own agency, the user experience was jarring; navigating between internal tools felt like switching between different companies. The complexity of Insurance, insurance platforms handle high-density data and complex governance rules. A generic rebrand wouldn't work—we needed a system that could handle "heavy lifting" while still looking modern. We were attempting to launch a fresh brand identity on top of legacy codebases that weren't built for modularity.
The Takeaway: I learned that waiting for a "design brief" in a corporate setting leads to stagnation. By taking the initiative to bridge Marketing’s vision with Engineering’s reality, I moved the project from a "visual update" to a "strategic overhaul." Early on that for a system to survive, it had to be flexible. A design system is only as good as its adoption. I learned that being "on-call" for individual teams and creating custom templates for their specific pain points was what actually drove the almost 100% adoption rate.
The Result: The shift from fragmented designs to a unified framework produced measurable business transformation. We achieved a 45% increase in speed-to-market for new features by leveraging a centralized library of 150+ reusable components. Streamlined handoffs and reusable code led to a 30% reduction in front-end development costs, as engineers no longer had to "guess" or hard-code UI variations. By centralizing documentation, we reduced the onboarding time for new design and engineering hires by 60%, ensuring the brand remains consistent long after the initial launch.

Google Sites

Report abuse