Everything Wrong with Material 3 Expressive

Context

The Material Design team at Google unveiled Material 3 Expressive a few months ago, which they claimed to be “Better, Easier, Emotional UX”. It came along with a pretty cool¹ looking trailer showing off redesigns for commonplace apps with crazy new designs.

The new design system supposedly had a lot of research poured into it to help users identify key actions and content significantly quicker, and reduce information overload.

It’s been many months, and the “bold” new design has rolled out to Android and all the Google apps.

Not very different

The main places updated with the new design language are:

System & other Google apps
Android system UI

It’s not quite an insane overhaul, but there are a few big differences:

Blur is used occasionally
New slider design
A few components are animated more
In apps, most items in lists are now containerized

Ehhhh

Questionable designs

After a while of using the system with this new design, I started to notice a few things that seem out of place or straight up look bad.

For example, the blur. The tinted panel with a tiny blur radius just ain’t it. There’s also the mixed border radii (which you can see on the quick setting toggles) which look rather odd.

Then I started noticing major inconsistencies between apps. The phone & contacts colors are strangely swapped, some layout margins are completely wrong, padding is off, and some animations are just gone.

I have decided to compile every tiny little thing I’ve noticed into a list.

Phone & contacts

You don’t even need to pixel peep to see the amount of inconsistency! That’s a lot of differences for two apps that are linked very closely.

Colors of list items are different.
Colors of the navbars are different.
Colors of the search bar are different. For both, they are different than the list items too.
Size of the navbar is different. The size of the selected pills are different too!
Size of the search bars are different.
The padding difference is excusable because call items don’t need to be as compact.

Additionally, none of the new “expressive” components are used in either.

The animation between the phone app now has a laterial transition, discouraged by Google’s own guidelines.

Calculator

The calculator got absolutely butchered in its update. In its glory days, before the update, it looked like this:

I honestly considered this great use of the Material 3 design system beforehand. It used the lot of the available color palette, the buttons were padded and separated nicely, the number entry field was distinguished well, and there were nice subtle animations.

Here is it now, with the ultra mega super expressive expressed feeling emotional new UX:

Actually, wait. Before I installed the update, I spotted this in the release notes:

Oops.

The Great Butchering turned the calculator into this:

What?

In summary: the “expressive” update to the calculator has brought:

Strange padding.
Very very slightly imperfect circles.
Removal of sqrt, Pi, exponents, factorial, etc without expanding.
Less distinction between the number input.

That isn’t even the worst part! Look at how the buttons shift when you press “invert”:

Look closely at the advanced functions.

Somehow, the buttons were made in such a way that they are not automatically aligned or sized correctly. They shift when you press “invert”, and not even in a consistent way.

sqrt becomes a slightly wider 𝑥²
Pi through the degrees/radians toggle are fine
Sine and cosine shift to the left slightly. Tangent becomes slightly wider
e^𝑥 shifts to the left. Both its non-inverted and inverted versions are offset incorrectly.

How does this even happen?

Clock

Okay, we’re starting off not nearly as bad as the calculator. It at least looks like there was an attempt.

The padding of the locations is not the same for the top and bottom, and the font of the navbar isn’t correct—or is it? I don’t even know what the correct variables are, they have been completely disregarded everywhere.

Fun fact, the stopwatch is scrollable even though it shouldn’t need to be. They allocated way too much space for the duration. To make it less expressive, all animations were removed as well.

Every one of these apps has to have some weird layout bug. The clock is no exception here.

In the “World Clock” view, the layout shifts every second.

It seems that even though the stopwatch was assigned a fixed height (too much), it was not done for the world clock. As the font dynamically resizes (for some reason), every other element in the page moves. This is painfully easy to spot.

Things I think Look Like Buns™

This section will be all subjective rather than “objective” design mistakes. Things that I think look terrible.

The quick settings

This image from before is what the quick setting/notification panel looks like.

I actually really like the animations and bounciness of the notifications. It’s probably the best part of this entire redesign. Now, here’s what I don’t like.
What is going on with the quick settings buttons? The icons are massive. It doesn’t look good when the active items are squared.
The designers still insist on a separate color for the notifications panel and the quick settings. Please just give up on it. This tinted, not frosted, weirdly small blur radius looks amateur. At the very least bump up the blur radius, please.
What are these new icons? They’re iOS-esque, which isn’t bad, per se, but I liked the old ones more.

The app drawer

I have similar problems with this as the quick settings.

The blur radius is too small. This looks quite amateur, like a new CSS designer just discovered backdrop-filter: blur(16px);.
Why is this panel a sheet? The quick settings aren’t a sheet. Before, this panel would fade in and only move slightly as you swiped up. Now, it goes all the way from the bottom of the screen, which is a quite unconventional move for most of the UI.
The animation after swiping horizontally between personal/work isn’t bouncy. This is inconsistent with the file picker.

These are in my top 5 for worst material components. Why do these look so janky? They got worse in material 3 expressive when they decided to shift around padding and mess with icons.

The many popovers of Android

This is insanity.

Conclusion

Expectation

Versus reality

Material 3 Expressive was supposed to be unique in that apps would look all different and unique while still following a “design system”, compared to Material 3 which encouraged identical looking apps.

I think for the native apps, they made them unique in the wrong ways.

I feel like this minor design system update was way overhyped, people going as far to say it will “kill” Apple’s liquid glass (they aren’t really competing…most consumers don’t care what “design system” their phone uses).

I’ll admit that I’m a bit biased because I like Apple’s liquid glass design more, but I feel like I’m justified in that opinion—they at least implemented their design system well and consistently.