The new Outlook on mobile web

Outlook-Mobile-Web-Overview-2

Overview

Microsoft Outlook on the mobile web has a user base of 70M per month. A range of different people use 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 send and receive emails, a calendar to be on top of your schedule and a directory to manage your contacts.

Link: www.outlook.live.com

Timeline: Jun 2018 - Apr 2020

My Role: As the first designer on the team, I was responsible for auditing, redesigning and testing key experiences starting with the inbox, calendar event creation experiences and the design system that enabled the other designers to work faster as we grew further.

Key Outcomes

Redesigned the Outlook experience on mobile web, make it more cohesive and aligned with the Outlook ecosystem and Microsoft fluent web language, understand usage patterns from telemetry and drive feature decisions coupled with qualitative insights by regularly speaking to personas representing various age groups.

Drove thinking towards an ideal vision for what the product can be by pitching ideas to stakeholders and getting buy-in for building features on well-researched insights.

Established alignment with different teams in different geographies, regularly communicating and bouncing ideas and possibilities that could permeate through the Outlook ecosystem.

Led the effort to unify the Outlook mobile web design system to help other designers on the team establish consistency in patterns and components for quicker handoff and concept ideation.

Started the practice of quickly getting feedback on prototypes from real people through tools like UserTesting. This helped us back our proposals with insights from real people and scrappy research without a dedicated UX researcher on the team.

Helped ideate and develop branded showcases to communicate, conceptualize design efforts for new initiatives like Outlook for KaiOS and celebrate the work that our team was doing over the quarters.

The Inbox Experience

Through careful research of existing customer needs using data from the previous legacy version and constant alignment across multiple teams in the Outlook ecosystem (Desktop Web, Native Mobile Apps, Windows & Mac App), we shipped a range of features that focused on better management of emails, surfacing intelligent suggestions and bringing the fluidity of a native experience packaged in a progressive web app. Throughout this journey, we came across a host of challenges, learnt a lot, experimented with new features and finally shipped the new experience in January 2020.

Outlook-Mobile-Web-Legacy-JSMVVM

The old legacy version of Outlook on the mobile web before the redesign.

Outlook-Mobile-Web-MiniOWA

The version after the redesign with an improved message list and quick actions framework

Outlook-Mobile-Web-Search-Search-Zero-Query
Outlook-Mobile-Web-Search-Search-Results-Loading
Outlook-Mobile-Web-Search-Folder-Scope
Outlook-Mobile-Web-No-Search-Result

Redesigned search that surfaces recent searches, helps users search through events, contacts and scope within specific folders.

Outlook-Mobile-Web-Reading-Pane-Conversation
Outlook-Mobile-Web-Reading-Pane-Item-View
Outlook-Mobile-Web-Reading-Pane-Translation
Outlook-Mobile-Web-Translated-Message

Redesigned conversation detail view to distinguish between multiple messages in an email chain along with providing translation across multiple languages using the Microsoft Translator Text API.

The Calendar Experience

One of the most impactful features that I led the design for was Quick Capture, a way to enable users to quickly capture events or reminders on their calendar on the go. Using existing data insights and after talking to current users across demographics, we decided to ship this feature as part of the revamped calendar experience.

Focusing on the essentials of What, When and leaving the rest to be progressively revealed should the user choose to add more details to the event.

The Design System

Alongside designing these key capabilities, I also established the foundational components, patterns and guides which served as a language to communicate decisions across stakeholders.

Celebrating the release!

After 2 years of intense iterations, studies, collaboration across multiple teams spread across geographies we finally released the new Outlook on the mobile web in a phased manner while also monitoring and responding to how users felt about the redesign. Change is always hard to accept but to know that our customers derive real value out of it is the ultimate success of our efforts. Cheers to that 🥂 & a huge shout out to my amazing team mates Oishee Sen & Saee Vaze for this amazing video!

Explore more projects

SquadStack PartnersProduct Design

QatalogProduct Design

Google PayProduct Design

BillDesk One ViewProduct Design

CALM.ioProduct Design

MuzeMeProduct Design

The Power of WeInformation Design

Got a project you want to discuss?