Nathan Kopp
Lead/Senior Product / UX / UI Designer

Transforming complex enterprise platforms into scalable product ecosystems
through UX strategy, design systems, and AI-assisted design.

“I'm a product designer who can move between hands-on design, systems thinking
and the organisational structures that allow good design to scale.”

Who I am

  • PRODUCT DESIGN
    Complex digital products

  • UX/UI
    Discovery → Journeys → Interaction → Visual design

  • SYSTEMS
    Scalable design systems & governance

  • COLLABORATION
    Product → Engineering → Business

  • AI
    AI-assisted design & prototyping

  • TOOLS
    Figma | Claude Ai | Miro

  • CI&T Infomedia Automotive SaaS

  • Ramsay Health Care

  • Woolies X

  • Cover More

Case Study 01: CI&T / Infomedia

The Challenge

Modernising a complex automotive SaaS platform.

Project Overview

Infomedia provides SaaS solutions for automotive manufacturers and dealerships, helping them manage operational performance, report KPIs, and gain marketing insights.

  • Senior Lead Product Designer Responsible For

    • Discovery and requirements analysis

    • Reverse engineering existing experiences

    • Defining UX patterns

    • Defining and aligning the design system implementation

    • Creating scalable dashboard and reporting frameworks

  • • Audi

    • Mitsubishi

    • Suzuki

    • Dealerships networks

  • Focused on migrating key reporting capabilities from a legacy platform to a modern architecture while improving usability and consistency.

    • Reporting

    • Dashboards

    • Performance Insights

    • Dealer KPI modules

  • The Migration Involved:

    • 142 report variations

    • 21 Dealer KPI modules

    • 30 client tenants

    • Tenant-specific business logic

    • Different KPI calculations

    • Custom report configurations

    • Legacy UI inconsistencies

The Business Structure

Discovery

Before the team could begin any redesign, it needed to understand how the platform actually worked.

  • Understand the Business Context Activities

    • Review the BRD (Business Requirements

    • Document) and project goals

    • Understand why the modules exist

    • Identify business objectives and success criteria

    • Understand constraints (technical, regulatory, legacy)

    • Meet with the Product Manager, Engineering and SMEs

    • What problem are we solving?

    • Why now?

    • Who are we solving it for?

    • What does success look like?

    • What constraints do we have?

    • Business Problem Statement

    • Success Metrics: Improve task efficiency.

    • Reduce user errors, increase task success

    • Success: improve accessibility

    • Preserve user familiarity

    • Clarify assumptions

    • Understand risks

Design Thinking
Reverse Engineering Before Design

From 142 Screens
to a System

  • 142 experiences

  • Common structures

  • Reusable patterns

  • Scalable framework

Pattern Library

  • KPI cards

  • Tables

  • Filters

  • Charts

  • Side drawers

  • Dashboard layouts

  • Export actions

Preview.png
Campaign Builder-1.png
Campaign Builder.png
Creating a New Campaign.png

Before
Legacy Platform

Legacy platform

  • Fragmented

  • Inconsistent

  • Tenant-specific

  • Difficult to understand

  • Business logic hidden in UI

After
New Platform

Scalable Product Framework

  • Consistent interaction patterns

  • Reusable components

  • Clearer behaviours

  • Preserved business logic

  • Foundation for future modules

Design System

Way of Working

Infomedia:
What I learned

Three big lessons:

1. Understand before you simplify

You can't simplify a complex enterprise product without understanding why it's complex.

2. Patterns are more valuable than screens

The real design output wasn't 142 redesigned reports;
it was the framework underneath them.

3. AI is most powerful when paired with design judgement

AI helped accelerate analysis and discovery, but decisions still required UX reasoning, stakeholder knowledge and product understanding.

CASE STUDY 02 | Ramsay Health Care

The Challenge

A fragmented healthcare digital ecosystem.

  • → Users struggle to find information

  • → Experience feels fragmented

  • → Teams create inconsistently

  • → Users work harder

  • → Every change costs more

Information Architecture first

Structure before surface.

  1. Understand business objectives

  2. Identify priority user journeys

  3. Audit existing content

  4. Redesign IA

  5. Test terminology and findability

  6. Validate navigation

  7. Then move into visual design

    • Find a hospital

    • Find a specialist

    • Find a service

    • Book an appointment

    • Understand treatment

    • Find quality & safety information

Information Architecture first

From brand to design system

Turning a brand into a digital system:

Brand

  1. ↓ Design foundations

  2. ↓ Tokens

  3. ↓ Components

  4. ↓ Patterns

  5. ↓ Templates

  6. ↓ Experiences

  7. ↓ Governance

Tokens & Subatomic

  • Tokens Subatomics Foundation colour & typography System

  • Atoms icons

Atoms

  • Atoms Grids Foundation

  • Atoms Buttons

  • Atoms Icons

  • Atoms Icons Clinical Quality & Safety Results

Molecules

  • Molecules Forms

  • Molecules Organisms WYSIWYG Blocks Mobile

  • Molecules Organisms WYSIWYG Blocks Desk

Organisms

  • Organisms Content Cards

  • Secondary Theming Hospital Navigation Interactions Mobile

Templates

  • Templates Global Local

  • Hospital Local Solution & New Experience

  • Corporate Local Solution & New Experience

Pages

  • Pages Local

  • Pages Local

Ecosystem:
Global with Secondary Theming

  • Global Buttons & Logo Icons Interactions

  • Global Navigation Interactions

  • First Secondary Theming Corp Button & Icons Interactions Desk

  • First Secondary Theming Corp Button & Icons Interactions Mobile

  • First Secondary Theming Level One Navigation Interactions Desk

  • First Secondary Theming Level 1/2/3 Navigation Interactions Desk

  • First Secondary Theming Level One Navigation Interactions Mobile

  • First Secondary Theming Level 2/3 Navigation Interactions Mobile

Ecosystem:
Local with Secondary Theming

  • Secondary theming hospital navigation interactions mobile

  • Secondary theming hospital navigation level 2 mobile

  • Secondary theming hospital navigation interactions desk

  • Secondary theming hospital navigation level 2 desk

  • Secondary theming hospital navigation interactions mobile

  • Secondary theming hospital navigation interactions desk

Designing for scale

Three pillars:
A design system isn't a library of components. It's a way of making better decisions repeatedly.

  • Shared components, patterns and interaction models.

  • Local teams could adapt experiences without breaking the system.

  • Documentation, contribution models, naming, accessibility and design reviews.

Conclusion & Learnings

  • Unified Experiences: Connected corporate and hospital journeys through a shared IA and navigation model.

  • Accessibility Through Consistency: Consistent patterns improved usability and accessibility across experiences.

  • Governance Enables Scale: Clear rules and reusable components supported sustainable digital growth.

  • Research Drives Better Outcomes: Testing and validation helped refine IA and design decisions.

  • Design Systems Connect Brand & Product: GEL aligned brand, UX, UI and content into one scalable ecosystem.

Thank you.

Questions

  • What does success look like in this role after 3, 6, and 12 months?

  • How are change requests handled, and is there a strong alignment with quarterly road maps?

  • What is the thinking and culture around AI at Youi?

  • How do designers collaborate with Product Managers and Engineers?

Next

Case Study Presentation II