MUI

Material UI v6 Templates Redesign

Role

Senior Product Designer

Skills

Product Design

Design Systems

Frontend Development

Duration

8 months

Tools

Figma

React

Material UI

CodeSandbox

StackBlitz

Challenge

Material UI's free templates were outdated and didn't showcase the library's customization potential. As part of the v6 launch, we needed to create modern templates that would demonstrate Material UI's flexibility while maintaining backward compatibility.

Problem statement

"The existing templates didn't reflect current design trends and users couldn't easily preview or customize them. We needed to modernize the entire template ecosystem to stay competitive with emerging libraries."

Solution

I led the complete redesign of Material UI's template pack, creating a modern design system with live editing capabilities and comprehensive theme support.

Key deliverables

Custom Theme: Built a modern theme using primitive tokens that demonstrates advanced customization

Live Editing: Integrated CodeSandbox and StackBlitz for in-browser template customization

Modern Design: Redesigned layouts following current trends while maintaining Material Design principles

Template showcase

Here are the redesigned Material UI templates, each supporting both light and dark themes with live editing capabilities:

Dashboard

Landing Page

Checkout

Impact

The redesign significantly improved user engagement and library adoption, with measurable growth across all key metrics.

151.22% growth in template access

1.2M+ projects migrated to v6 since August 2024

4.5M weekly downloads record achieved in 2024

Live editing capability for all templates

Template performance

Template	Before	After	Growth
Marketing Page	339	1,497	+341.59%
Sign In	530	1,488	+180.75%
Dashboard	1,114	2,883	+158.80%
Sign Up	245	447	+82.45%

Let's get in touch!

Feel free to reach out, I'm always up for a good chat :)