OUT
LOOK

OUT
LOOK

outlook_hero_iphonex
iOS Redesign
Credits: Qasim Iqbal, Nicolas Goles (Development), Adam Barrus (PM).
Credits: Qasim Iqbal, Nicolas Goles (Development), Adam Barrus (PM).

I led a redesign of Outlook for iOS, Microsoft's flagship mobile app. The goal was a design that could reinforce the Outlook brand and be instantly recognizable on a device, while also feeling cohesive and familiar on iOS. We updated the Navbar to introduce bolder typography, a more tangible Focused/Other switch, the synonymous blue brand colour of Outlook, and an avatar which doubled as an affordance to the left-nav while also displaying account selection. This new navbar design extended across the three hubs of the app—Mail, Search, and Calendar.

 

As part of the redesign we also updated the styling of the mail item. We introduced avatars that made for a modern and personal conversation experience, and updated the styling of the TXP cards (that represent inline events and services) to make them more explicit in the message list. We worked tirelessly to design an experience that scaled to iPad, all forms of landscape, and the many different languages supported within Outlook Mobile.

  

I also worked closely with our marketing and art teams to create visuals for the announcement of the redesign. Typically handled by a third-party, the feature crew saw this as an opportunity to take back these responsibilities in order to push something more highly refined and polished. These assets were used for the press announcement and on social media.

outlook-content-hero
outlook-content-mail-item
outlook-content-translated
outlook-content-ipad
Swipe Improvements
Credits: Christophe Lamperti, Pierre-Elié Fauché (Co-design), Ying Zhong (Development), Josh Meisels (PM).

Through research, we found that people who customised their swipe action used the feature more often, and in turn, triaged their mailboxes more effectively. The problem was that usage was being affected by a combination of a default action—Schedule—that wasn’t being used, and a customisation option that was hidden deep in the settings panel.

 

The solution was to replace the 'Schedule' option with a customisation UX that appeared in the context of the user swiping for the first time, allowing for quick and meaningful setup. We intentionally landed the user on the higher-level `Swipe Options` page so they had increased awareness that both swipe directions were customisable.

 

We also took the opportunity to give the visuals a refresh. We sweat the details on this one, introducing animations and haptic feedback when the threshold hit, subtle shadows to create depth, and rounded corners on the cell that animated based on the distance of the swipe. 

outlook-swipe-hero
outlook-swipe-items
Outlook for Android
OUTLOOK FOR ANDROID
Credits: Victor Coulon, Bobby Giangeruso (Co-design), Will Hou, Trung Ha (Development).

Using my deep knowledge of the Android platform I ported over multiple features that were initially ideated on on iOS to Outlook for Android, owning the core visual and interaction design of the app.

 
One of these features was the "Zero Query" search experience for Android. This change placed search as more central part of the Outlook experience and leveraged Microsoft intelligence to proactively suggest relevant contacts and files, as well as showcasing upcoming events like flight and hotel reservations—all before the user needs to type out their query.

 

I also maintained the design system for the platform. This was a collection of UI components and symbols, built in Sketch, that helped partners design features for Android faster and in a more consistent manner. This design system was translated directly into code, so I worked closely with our development team to make sure any additions and changes to the system were clearly communicated.

outlook-android-herox
outlook-android-systemx