Microsoft Online Services • 365

Online Services

As a Designer in the Communications and Collaboration Services team, I was able to design a large portion of the Online Services Administration Center and the Microsoft Online Services Help and How To sites. This product has going through a number of changes thought the years, like when it was re-orged into the Live group and next the Office 365 team. I was a part of the first 3 teams twice as a Technical Product Designer and once as a Design Integrator in the Exchange team.

Administration Center

This was a great product to work on. Our design process consisted of getting requirements from of Product Manager, making designs, posting them on the left side of our hall, discussing those ideas within the Design team, iterating the design, and reposting until it was design was Design Approved. Once a process was Design Approved it moved to the right side of the hall and the iteration process started over with the Developers until we had an Engineering Approved Design. It was then that I built it into a working HTML/CSS mockup. Those mockups were used in the final design documents, in sales and promotion presentations, and for Developers to cost out time and money to build the feature.

Microsoft Online Services Admin Homepage
Microsoft Online Services Admin Homepage

 

Microsoft Online Services Users Overview
Microsoft Online Services Users Overview

 

Microsoft Online Services Service Settings - Microsoft Exchange Online
Microsoft Online Services – Service Settings for Microsoft Exchange Online

 

Microsoft Online Services Support Overview
Microsoft Online Services Support Overview

Microsoft Online Services – Help and How-to Website

In my second tour with the Microsoft Online Services team I got to design the Help and How-to site. This was designed using User Research and user feedback to provide self-help to users having issues with:

  • Subscriptions and Billing
  • Setup
  • Administration
  • User Configuration
  • Migration and Synchonization
  • Technical Support

My designs were connected into Microsoft’s CMS systems for content and translation services content. I worked with the writers of this product to design it for all the desired content.

This was also run thought the afore mentioned iteration process and I added the designs to the HTML/CSS mockups.

Microsoft Online Services Help Homepage
Microsoft Online Services Help Homepage
Microsoft Online Services Help Homepage
Microsoft Online Services Help Homepage

 

Microsoft Online Services Help for SharePoint Online
Microsoft Online Services Help for SharePoint Online

 

Technical Product Designer (Oct 2007 – July 2008 & Jan 2009 – Jan 2010) • Office 365 Exchange Design Integrator (July 2011 – Oct 2011)

  • Maintaining an HTML-, CSS- and JavaScript-built online style guide by adding and removing information and creating imagery (illustrations, redlines, and interaction models)
  • Designing the site/user interactions for the online service based on user testing and research gathered about specific features or tasks
  • Rapid prototyping designs in Photoshop and Fireworks
  • Creating and updating the live demo web site, built on HTML, CSS, and JavaScript, to simulate product features based on scenarios written to describe tasks the user will do in the process of using the online service
  • Designed and documented the new UI post re-org with the Office Online group.
  • Mocked up UI examples in Blend and HTML/CSS demos.
  • Created and maintained a site to organize common site controls for development, which created a platform to test any new controls that had been checked in to the latest site build, and for project management to add into their specs.
  • O365 EDI: Tweaked code from developers that was functional, so it also looked pixel for pixel exactly like what the Designers had designed

Tools and Environment: Adobe Creative Suite, Expressions Blend with XMAL, Microsoft Office Suite, HTML, CSS, Javascript, ASP, Visual Studio