Microsoft 365 “What’s New”

New features are shipped weekly to the M365 Admin Center, and at that frequency, how do we educate users on all of them? Beyond simply directing them to an article that they may or may not read, there had to be a way to teach users without disrupting their work.

I designed a new way of contextual alerting for the M365 Design System.

My role

This summer (2019), I worked on the M365 Design Direction team. The Design Direction team is responsible for defining the visual language and creating the design system used by all the other M365 design teams.

Though hired on as a UX Design Intern, I was able to focus my efforts on developing my motion design and visual design skills, thanks to support from my manager Karina Dion, and my mentor Sungwon Chang.

The challenge

Educate without being annoying

I was tasked with improving the What’s New experience in the M365 Admin Dashboard. What’s New is a link in the toolbar that directs users to an article outlining new features and updates, and we wanted to educate users in a better way.

Nice workflow… let me disrupt that

Here’s what happens when a user clicks on What’s New:

A new tab opens when a user clicks “What’s New”

We already knew at this point that the click-rate for the What’s New link was low, and in general, users don’t like clicking on things that take them out of the experience.

An interesting thought

What if What’s New didn’t just live in the top toolbar? What if it’s actually everywhere? This way of thinking was what drove the project moving forward, and I tried to think about What’s New as something contextual, rather than only applicable to one location.

Early explorations

Designing to gather feedback

I asked my PM, “What are some “must-knows” for the user?” and prioritized which screens I would design based on the answer.

New things on a dashboard

When new features are released for the admin dashboard, they’ll be highlighted and the user has the option to add or dismiss the card.

A new feature on the dashboard would be highlighted by a coloured card

New things in the panel

When new features are released in the side panel, they’re tagged “New” so that the user is aware.

New features in a panel would be labelled with a tag

New things on a page

In pages other than the main dashboard, new features are highlighted in a big card so that users can learn about it.

New features on a page would be featured by a big banner

Not the solution

One-time use only

The problem with my explorations was that they only solved the What’s New problem for that particular screen. There was no consistency, and this was hard to work into a system. We took a step back after this to think about how What’s New can fit in everywhere.

The hypothesis

Contextually showing what’s new is better

Why contextual?

We believe that contextually showing what’s new is better, as we can show new additions without being disruptive.

With our hypothesis in place, we went to tackle this problem starting from the top toolbar, designing while keeping in mind how we can apply what we make to other parts of M365.

Rapid prototyping

Testing our hypothesis

I used motion and colour to create two alerts for a new card, so that we could test this in front of existing M365 customers.

Using a sweep to draw attention

A large sweeping motion draws attention to the new feature, before shrinking out of view and leaving behind a persistent indicator (which will disappear upon interaction).

Similar motion accompanies the new item within the panel, reinforcing a system

Using a call-out

A call-out describing the new feature appears first, and after a short delay, a dot badge follows. The delay is meant to allow users time to shift their attention over to the area of interest before the dot badge appears.

The dot badge appears as a consistent element in the panel, reinforcing a system

Testing Insights

Sweep to draw attention, badge to indicate “new”

“[I chose] the Sweep flow [for visual appeal] just because of the slide out. I’m so used to seeing a little dot [badge] and [the badge] is not that noticeable. It’s much better with the slide out.”

— Participant 10

“Had I been looking down at the lower left corner [of my screen], I might not have caught the Call-out as easily as the Sweep.”

— Participant 4

We inferred from the user testing comments that just a badge is not enough, and that an attention grabber (like the sweep) to go along with it can help draw attention, and reinforce a system.

Refining the prototype

Creating a system

A new colour, just for What’s New

The previous prototypes used a teal colour, but that was an existing colour used for data visualization. I picked a new colour that would be solely used for this alerting system, and made sure it was WCAG AA compliant.

Dark mode colours by Karina Dion

Consistent motion and badging everywhere

M365 as a product lives on the web, and therefore, everything on M365 lives in a container. This would allow for a system to be applied everywhere, as long as the containers are similar in spacing and size.

With containers as a constraint, I limited the sweep to the element we want to draw attention to. A dot badge would follow and stay persistent, until the user interacts with it. A dot badge is something people are accustomed to seeing as “new”, so I leveraged that knowledge in my design.

What’s New on the top toolbar

Here’s what the alert looks like in action.

The alert consists of drawing attention, followed by notification

What’s New on the side navigation

I created another motion study, showing the application of this system on the side navigation and on a different page. This was to show that this works elsewhere, and that the colour and badging can be used to create a recognizable contextual alerting system.

While the side navigation items are a different width, the spacing and height are similar enough to allow this system to work

Some considerations

Details we thought about

What happens when multiple new features are released?

I put a bunch of dot badges on the dashboard, to show that it won’t overwhelm a user. As a precaution, we also set a time of 45 days before the dots disappear if the user doesn’t dismiss them. This time period was decided based on the longest time between logins, which was 6 weeks. Further tweaking, if needed, will be done based on future feedback.

Multiple badges on the dashboard

Will the purple badging clash with other badges?

A different feature on M365, Onboarding Hub, uses a green dot badge to indicate a completed state. A mock was made showing that the purple badge can live alongside existing badges of different colours.

The green dot is there, I swear

Copy guides the user to where new features live

The sweeping motion and dot badge draws attention to the new feature, and the call-out does the educating. The copy written in the call-out doesn’t only educate users on what the new feature is. In some cases, where a feature could be buried 2 or 3 levels deep in a page, the call-out is there to educate users on where it is.

In this case, the dot badge would be extremely redundant if it was displayed on each user panel

Testing insights round 2

On the right track

Our user researchers are amazing, turning this around right before I gave my final presentation.

“It’s cool that it kinda flashes over [Add Card] and becomes a small circle and let’s you know, ‘Hey, you can click here.’”

— Participant 2

“I like that it’s not too much of a distraction, but it’s enough to get your attention. It changes the colour of the Add Card button and then it changes the text colour and shows that dot. So I think it stands out.”

— Participant 7

The feedback was positive, and shows that our hypothesis is on the right track. It looks like contextual alerting is better for showing and educating users on what’s new.

Next steps

How will this become real?

Before leaving Microsoft, I put forth some next steps for my project.

1. Fabric implementation

Fabric is a design system. The plan is to implement this as a component into Fabric as a third option for alerting that’s less intrusive than the current coachmark approach. This will live as a more refined, elegant way of grabbing the user’s attention.

2. Apply to Admin Center

This will be implemented and used anywhere on the M365 Admin Center where contextual alerting is needed.

3. Think about What’s New as destination

While What’s New is currently an article, soon to be a contextual alerting system, for future-thinking, it could potentially be a destination, where users can go somewhere central for their information. Perhaps this could include a community aspect, or a blog, but the idea is to create a direct communication link to and from our users.

Moving the article into a panel to prevent disrupting a user in the middle of their workflow
A destination with more than just news

After-hours work

What I did at Micrsoft besides my main project

While What’s New was my main project at Microsoft, I tried to get my feet wet by working on a few smaller projects with different teams and individuals. I wanted to learn as much as I could during my 12 short weeks, and what better way to do that than to try out different things?

M365 Banner Illustrations

I created some different illustrations for the first-run experience banner on Admin Dashboard. I played with the idea of comparing setting up Admin Center to setting up an actual office, and was able to start a conversation around how we could use illustrations to better tell a story.

Imagining setting up Admin Center as setting up an office

Welcome Banner

Our welcome banner was in need of a refresh, and I flexed my creative muscles to come up with over 30 variations, and landed on three of my favourites. I tried to push the boundary in terms of how we could use different illustrations, sizes, and orientations to better onboard new users.

Catastrophic Error State

I worked with a high school intern to breathe life into an error page. I learned that for even the smallest features, multiple check-offs happen to ensure design consistency. I shifted my illustration to an isometric view, because my original work didn’t comply with the newly developed M365 illustration styles.

Dark Mode

While the push for dark mode was already happening, the transition was just a simple page refresh. I had some fun making a few different explorations to offer a source of inspiration for future designers, developers, and PMs on the dark mode project.

Learnings and Takeaways

Reflecting on my summer

Did I have the best summer internship ever? Of course I did. I walked away with some valuable takeaways for my future.

Be flexible and adaptable

Sometimes (usually always), things change. It’s important to roll with the punches, and know that getting things done is a team effort. Nothing is ever a straight path, but it makes for a much more compelling story when it’s not.

Know the constraints, but don’t let them constrain you

Especially at a slightly larger company like Microsoft, a ton of existing work will have been done before you get there. It’s important to get familiar with what other people have made, and to leverage it into your own work, but it’s also equally important to know it’s totally okay to take it farther. That’s how things evolve.

Shoot for the moon

Be grandiose. Make what you want to make. Make what you think is cool. The more excited you are about your own work, the easier it is to spark conversations with others, and get them excited too. When others share your vision, it’s easier to bring them along and go further with your work than if you just play it safe.

Never become unenthusiastic

12 weeks is a really short time to get acquainted with a team, so jump in with both feet! Talk to people, work with people outside your team or organization, and be excited about your work. Positive energy is contagious, and it’s apparent to everyone when you’re passionate about what you’re doing.