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 was the lead designer on 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 recognisable on a device, while also feeling cohesive and familiar within iOS. In the navbar we introduced bolder typography and a more tangible Focused/Other switch, aligning closer to iOS 11, while introducing the avatar which coupled account indication with the affordance to the left-nav. This new navbar design spanned across the three hubs of the app—Mail, Search and Calendar.

 

As part of the larger redesign, we also updated the styling of our TXP cards (that represent events and services) to make them more explicit in the message list, and introduced avatars in message item to create a more modern and personal conversation experience. We also worked tirelessly to design an experience that scaled to iPad, all forms of landscape, and all the 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 an outside team, 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 in the PR kit and on social media.

redesign_alt
redesign_1x
redesign_2
swipe_3x
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. 

swipe_1i
swipe_3
outlook_swipe_website_grey
OUTLOOK FOR ANDROID
OUTLOOK FOR ANDROID
Credits: Victor Coulon, Bobby Giangeruso (Co-design), Will Hou, Trung Ha (Development).

I executed on a multitude of smaller features for our Android app, using my deep knowledge of the platform to port over designs initially ideated on other platforms.

 

I worked on the new Navigation Drawer for Android. The goal here was simplicity in switching between email accounts, and we achieved this by moving the account icons into a dedicated "account switcher" segment in the far-left of the view which gave quick and more explicit access to accounts.

 

I also contributed to the design and development of the new "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 top contacts and recent files, as well as showcase things happening ‘today,’ like the users travel plans—all before the user needs to type out their query.

 

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

android_1
android_2