Microsoft Business Online Services - 2007/2008
General page layout and design
Overall page style
When I joined the team the early design of the site was already underway.
I quickly started to focus on polishing that design. The early design
was based on the Office and Vista styles. I wanted to retain that feeling
without blatantly stealing the UI. I created a more coherent color palette
that I could transition from the early design to the new design.
Header
I designed the interaction for the main navigation active, inactive and
hover states, which also integrates with the secondary navigation. The
header background is scalable to accomodate different height logos. The
Gold tab on the right is a clickable dropdown that appears on every page
until all the tasks are completed.
Module colors
The modules color indicates what type of content it contains. Grey is
for User Assistance and Help items. Gold is for Alerts and OOBE tasks.
Blue is the general content color. This was limited to 3 colors because
more than 3 starts to gets hard to understand.
Icons
Icons can be a very useful way of getting a message across quickly, but
improperly used they can be a distraction. Having spent a year with the
Windows team working on icons for Vista I put that experience to use.
Without the icons the pages are very bare. When an existing icon could
not be used I created something that fit the need.
Specs & Redlines
We needed redlines for the pages to describe the spacing and placement
of the content in the pages. I also created detailed redlines on how to
build the navigation.
Developed HTML prototype demo site
In the course of designing screens in Photoshop, the idea came about to create a "demo" website from the screens we were creating. This would serve as a tool for prototyping how the site would interact without using any Developer resources. We built out the entire site using PNGs and Imagemap links at first, then moved into creating some full HTML pages for more advanced prototyping. This tool was also utilized in early usability testing allowing us to get an earlier warning if the interaction was making sense. The demo site has been widely circulated among the CCS team and beyond.
Microsoft Exchange/SharePoint integration
Creating and verifying and SMTP domains
I went through several iterations of the Exchange settings. Each one evolving
yet simplifying the process of creating an SMTP domain. This is a very
complicated process. There are several hoops the user needs to jump through
not only in the Admin Portal but outside the portal on their host service.
Creating SharePoint Site Collections
Creating a SharePoint site collection was also a process that I was unfamiliar
with. It also requires the user to jump back and forth from the portal
to the SharePoint pages. Putting this functionality in the list made the
most sense to me because that way you can easily launch the various pages
all from the list view.
Prototype Design for Sign In service client application
The Sign In client application serves as a launching point for the different applications associated with Microsoft Online as well as an easy way for the Information Worker to be signed into all the applications at the same time. This design was an early idea for where we could go with the Sign In Client. The general style is to match the Website. The button had a secondary area that served as a notification or alert that an action was needed. I also designed some of the interaction for the system tray. The application will continue to run similar to the way Instant Messenger does. I designed icons with overlays for status as well as the balloon popups and both right and left click functions.
