MICROSOFT

SUPPORT HOME PAGE

ROLE: DESIGN MANAGER

Microsoft's new design language was just becoming public, and my design team worked closely with the highest levels of the brand team to ensure that the support experience was a solid expression of that brand. From a functional standpoint, this release also took advantage of a constant feedback loop from support management on the backend to ensure at any moment that the top support request drivers were addressed in the organization of the support content.

To learn more about this project, please see Josh Sterberg's portfolio at https://jbsdesign.myportfolio.com/microsoft-online-support

SUPPORT COMMUNITY

ROLE: DESIGN MANAGER

Nothing scales like a thriving community. Nothing. The support community found workarounds to major technical issues before Microsoft engineering could establish repro steps, and they did it through this web site.

To learn more about this project, please see Gary Lund's portfolio at http://www.gelund.com/resume/index.html

MICROSOFT PREMIER ONLINE

ROLE: DESIGNER

Microsoft Premier is a white glove subscription service that grants customers very close support from Microsoft engineering. Microsoft Premier Online had fallen into disarray due to multiple failures in upstream data stores. The designer's job was to bring it back to relevance.

She had my support in allocating >50% of her design schedule for information architecture work. The result was a release, and in fact the only release I've ever seen, that did not identify a single usability issue in the lab. The timing of this release was such that we decided to not snap to the evolving Microsoft brand standards until they were locked down.

To learn more about this project, please see Celeste Combs' portfolio at http://www.coroflot.com/CelesteCombs/Microsoft-Premier-Online.

DESIGN WORKFLOW

ROLE: DESIGNER

Tap or click on the image to see the full diagram

One of the issues that can make it difficult for design to succeed is that design is often regarded as a black box, and the individuals in charge of setting the release schedule have difficulty factoring in the requisite time. In some teams, the designer and research are taking on deliverables which were previously owned by others or never considered essential for project completion.

In order to ease this transition from a more purely engineering-focused culture to a culture that included design, I found it helpful to model a swim lane chart representing roles, deliverables, and sequence. This dovetailed with a system of forms and spreadsheets which helped to establish release dates and milestone dates that allowed my team do do its job.

Not all projects required all deliverables, and some phases (with the lavender shading in the heading) were entirely optional. This may be helpful for teams moving from a waterfall framework to a more agile framework, but it's important to state I am not bound by process, and will always reserve the right to get smarter.

To learn more about this project, contact me.

MICROSOFT.COM DESIGN PATTERN LIBRARY

ROLE: DESIGN MANAGER

Microsoft.com was largely a visual reflection of the internal business divisions which published the content. There was no central authority stating what the visual design direction should be, as each product had its own brand manager and its own interpretation of what was on or off brand.

I reached out to colleagues on the Microsoft.com homepage team, and they in turn reached out to colleagues in the store.microsoft.com team, and we agreed to jointly fund and drive an effort to establish a pattern library for the domain. We established guidance for all of the following patterns.

• Accordion
• Carousel
• Co-branding
• Color
• Filtering
• Footer
  • Including global nav
  • Including SEO links
  • Including locale switching
• Form elements
  • Buttons
  • Checkboxes
  • Dropdowns
  • Radio buttons
  • Text fields
• Grid

  Further note about the grid: this is not an optional pattern. The underlying order and aesthetic appeal of the Microsoft design is based on a grid pattern. In all your design work, start with and adhere to the grid.

• Header
  • Including sign in
  • Including search
• Auto-suggest
• Icons
• Links
• Motion
• Overlays (light box)
• Pagination
• Photography
• Progress indicators
• Rating
• Site navigation
• Tiles
• Tooltips
• Typography

Additional patterns emerging from my design team's work which were not widespread enough across the domain to warrant inclusion in the domain-wide pattern library.

Patterns identified by my team's pattern library

• Alert
• Wayfinder
• List navigation
• Breadcrumb
• Guided Problem Solving
• Data tables
• Threaded conversation view
• Page Title: <title> element matches <h1> element and, ideally navigation url also

To learn more about this project, contact me.