Microsoft UX







UX / UI Design

The Situation

I worked on the UX team when we implemented a complete UX/UI overhaul of Outlook Web Access. The team consisted of UX researchers, UI designers, Prototypers, Front-end designers, and Managment. I worked as a floating UX designer going from project to project wherever the team needed help. Since this was a complete bottom to top build there was a lot of work that needed to be done. I specifically worked on a lot of UX framework designs & decisions, writing technical specs, researching and developing the touch States and animation/timing for the mobile experiences for the app.

The Approach

We approached this major project with a complete bottom to top tear down and build up. Since we were taking a product that had never had a mobile design before and also had a lot of moving parts, the planning stage was crucial. We first started with days of whiteboarding and planning. We then started the design process with basic wireframes of the mobile experience first (as that had the least real estate to work with). We teamed up with the UX researchers and ran very early user studies to determine content and navigation and hierarchy of the app.

After that stage, we moved into the skinning process taking the basic wireframes and starting to flesh out design ideas and decisions into the wireframes. The UI team developed the design language and met the UX team in the middle with design guidelines that we then rolled into high fidelity mockups. We were testing the design decisions with users the whole time and pivoting our designs based on the user feedback. This was a very agile and collaborative process that lasted a year ending with the product shipping after a half a year of development.

UX Whiteboard Session

Wireframe Rounds

We worked in a very agile and iterative enviroment working quickly to produce screen variations. Since we were basically redesigning the structure and layout of a product that the public has such an intimate relationship (email) with we had to make sure we got it right. The wireframing rounds lasted a good 6 months. We had many screens to design for at the time (Desktop, Tablet, and Mobile) which meant many opinions and decisions had to be made. We would design screens, put them in front of users in a research study, gather feedback, adjust designs and then present to stakeholders.

Desktop Inbox Early Wireframe
Tablet Inbox Early Wireframe
Mobile Inbox Early Wireframe
Basic Mobile Functionality Wireframes and Framework
Minimal New Interface Wireframes
New Wireframe Layout with Updated Look

“Don’t screw this up! This is peoples Email we are talking about.”

said to the Design team from a Sr. VP @ Microsoft

Final Design Comps

Final Wireframes Desktop Contacts
Final Wireframes Desktop Calendar

Annotations and Design Specs

After the UI team had wrapped the final wireframes in updated designs I would take the files and make annotations and design specs to hand off to the dev team. I would then follow up with the dev team to make sure everything made sense and that the design was getting implemented correctly.

Mobile List View Redlines
Mobile Day View Redlines
Touch Narrow Redlines

Final Design

Outlook Inbox Design
Outlook Calendar Designs

The Results

  • Product shipped on time
  • Design and product eventually got integrated into Office 365

Mobile Touch Feedback and Transition Animations

I was in charge of the Touch feedback and press states for the mobile versions of the app. I first started with cataloging where and when a user would touch the interface of the app. I moved into measuring and researching touch habits of users through user studies. I then presented design options and prototypes to showcase how the feedback would appear on the screen. These prototypes were then put in front of users to observe their interactions.

Inventory of Touch Targets
Press State Study
Global UI Button Elements
Mobile Touch Feedback Visual Options

Mobile Transition Animations

When we were satisfied with the touch states look and feel the project moved into how screens and interactions would transition from one to another. This was achieved by making animations that would showcase the transitions. We then made prototypes and once again did user testing to finalize timing and speed of transitions.

Mobile Touch List View
Tablet Calendar View 300mm
Tablet People View Transitions
Tablet Icons SlideOut
Tablet Miniature Pivot