End-To-End UI Systems Exploration

This section highlights my Sanofi design system work, shows the modules we built, and includes a quick prototype I created yesterday to demonstrate how fast I can explore and refine system-based layouts.

Problem

Men’s Health wanted to turn its trusted training expertise into a digital experience. The challenge was to guide users through structured programs that adapted to their fitness level, while staying true to the brand’s confident, motivating tone.

Solution

Partnered with Men’s Health editors and trainers to bring expert fitness content to life in a motivating digital experience. Simplified discovery and program flow to help users stay consistent, and delivered a bold, structured app that launched as a 20-day guided plan.

Problem

Plenty of teams can make a site work, but few make it feel right. Design systems bloat, motion gets ignored, and “strategy” ends up in a deck no one opens. The result: something functional, but flat.

Solution

That’s where I can help. I refine the visuals, strengthen the system, and bring energy back through motion and tone. My focus is on clarity, consistency, and creating work that actually connects.

Process & Approach

Constraints

Operated within strict pharma regulations and compliance reviews

Worked with brand teams used to print, not digital

Navigated heavy direction from Account and Copy while keeping UX intact

Constraints

Operated within strict pharma regulations and compliance reviews

Worked with brand teams used to print, not digital

Navigated heavy direction from Account and Copy while keeping UX intact

Constraints

Operated within strict pharma regulations and compliance reviews

Worked with brand teams used to print, not digital

Navigated heavy direction from Account and Copy while keeping UX intact

Constraints

Operated within strict pharma regulations and compliance reviews

Worked with brand teams used to print, not digital

Navigated heavy direction from Account and Copy while keeping UX intact

Soft Skills

Explained UX and UI decisions in clear creative terms for ADs and CDs

Acted as the bridge between dev and brand teams to translate digital needs

Managed client expectations by showing the “why” behind digital choices

Soft Skills

Explained UX and UI decisions in clear creative terms for ADs and CDs

Acted as the bridge between dev and brand teams to translate digital needs

Managed client expectations by showing the “why” behind digital choices

Soft Skills

Explained UX and UI decisions in clear creative terms for ADs and CDs

Acted as the bridge between dev and brand teams to translate digital needs

Managed client expectations by showing the “why” behind digital choices

Soft Skills

Explained UX and UI decisions in clear creative terms for ADs and CDs

Acted as the bridge between dev and brand teams to translate digital needs

Managed client expectations by showing the “why” behind digital choices

Solutions

Built a fully accessible design system that scaled across brands

Mentored team members to strengthen digital fluency and confidence

Used prototyping to replace PDFs with interactive visuals clients could grasp instantly

Solutions

Built a fully accessible design system that scaled across brands

Mentored team members to strengthen digital fluency and confidence

Used prototyping to replace PDFs with interactive visuals clients could grasp instantly

Solutions

Built a fully accessible design system that scaled across brands

Mentored team members to strengthen digital fluency and confidence

Used prototyping to replace PDFs with interactive visuals clients could grasp instantly

Solutions

Built a fully accessible design system that scaled across brands

Mentored team members to strengthen digital fluency and confidence

Used prototyping to replace PDFs with interactive visuals clients could grasp instantly

Sanofi Design System Created a unified design system for Sanofi, building out tokens, color foundations, modules, and flexible variants. Every element—from icons to typography—was structured for accessibility, scalability, and brand consistency across multiple brands, sites, and campaign experiences.

Building accessibility in from day one was essential since we needed to be fully compliant by the end of 2025. The system was designed and launched in just six weeks, developed in parallel with multiple live sites. It had to scale across HCP and patient experiences while expanding to support emails, banner ads, and unbranded platforms. I worked closely with developers to ensure a clean build, structured documentation, and long-term flexibility.

industry

Design Systems & Branding

industry

Design Systems & Branding

industry

Design Systems & Branding

industry

Design Systems & Branding

timeframe

1.5 days to prototype

timeframe

1.5 days to prototype

timeframe

1.5 days to prototype

timeframe

1.5 days to prototype

skills

Design systems, storytelling, Branding, Quick Prototyping, motion and interaction design, accessibility, presentation and communication skills

skills

Design systems, storytelling, Branding, Quick Prototyping, motion and interaction design, accessibility, presentation and communication skills

skills

Design systems, storytelling, Branding, Quick Prototyping, motion and interaction design, accessibility, presentation and communication skills

skills

Design systems, storytelling, Branding, Quick Prototyping, motion and interaction design, accessibility, presentation and communication skills

tools

Figma, Framer, Davinci Resolve, ChatGPT, Firefly, LumaAI

tools

Figma, Framer, Davinci Resolve, ChatGPT, Firefly, LumaAI

tools

Figma, Framer, Davinci Resolve, ChatGPT, Firefly, LumaAI

tools

Figma, Framer, Davinci Resolve, ChatGPT, Firefly, LumaAI

The Tzield site as launched in early 2025.

A one-day prototype built to demonstrate my design approach and how I’d reimagine the layout for stronger visual and emotional impact.

Rebuilt Tzield.com inside cleaner, system driven modules with tighter structure, accessible layouts, and full alignment to the approved brand.

A quick Framer prototype exploring motion, appear logic, and video. AI generated clips were used to shape the mood and emotional tone, creating a layout that feels more expressive and visually engaging.

What I offer

I elevate brands through polish, clarity, and emotion, ensuring every layout feels intentional and alive.

I can help build scalable, modular frameworks that keep design consistent without losing flexibility.

I prototype fast, showing motion, interaction, and narrative to turn static ideas into experiences teams can see and test.

I focus on solving the right problems, connecting design choices to measurable outcomes instead of just shipping features.