Microsoft Outlook

Microsoft Outlook on the mobile web

As the first designer on the team, I was responsible for redesigning Outlook on the mobile web browser. I was responsible for:

• The Inbox Designing all mail related communication experiences
• The Calendar Designing event creation experiences
• The Design System Designing the styles, patterns and components based on Microsoft Fluent Web fundamentals that helped

Outcome

🎯 Create the best-in-class email, calendar and contacts experience on the mobile web. Align it with the Outlook ecosystem and growing our existing user base.

🎯 We launched in 2020 and monthly active usage grew to 70 million after release with largely positive user feedback.

🎯 The design system I implemented helped bring down time to ship by a week on every consecutive sprint.

Background

We were upgrading the experience from a really old implementation using JSMVVM a legacy architecture. Microsoft Outlook on the mobile web has a diverse user base of consumer and enterprise users using it for communicating with their family, syncing up on emails from universities, and managing their businesses. It consists of 3 key experiences:

• An inbox to manage email communication
• A calendar to manage your schedule
• A directory to manage your contacts



This is the version before the redesign 👇



The redesigned Outlook on mobile web



We celebrated the launch with a snazzy video covering the crucial aspects of the redesign.



The new Inbox experience

We improved the message list visually by adding avatars for senders and integrating with the Microsoft Focused/Other API. We also introduced swipe actions on mobile web for easier organisation.



Improved swipe actions to organise messages efficiently

View and respond to events without leaving the message list

Search through keywords, folders and contacts

Powerful translation options



The new Calendar experience

After speaking to existing users and digging around existing data, we figured that more than 65% of our users were using the calendar to just capture reminders so we created a quick capture feature specifically designed to add events in a breeze as opposed to the detailed multi-field event form geared towards enterprise use cases.



Using a partial modal widget to quickly capture events on the calendar

Creating an event (detailed version) and viewing the details of an event

The mobile web Fluent Design System

I established the foundational components, patterns and guides which served other designers on the team to design high quality solutions in lower time and also to ensure that the product looks, feels and works as part of the Outlook ecosystem.