Client: Microsoft – Microsoft Partner Network

Project summary: This platform & design strategy was for the Microsoft Partner Network site. The pattern library and approach has evolved over the years, with 2.5 major versions and multiple iterations.

Microsoft team: One Commercial Partner – Partner Digital Experiences & Programs

Duration: 5 years (2015-2020)

My roles: UX Designer, Interaction Designer, Visual Design Support

Scalable, Repeatable, Governable

In 2014, the Microsoft Partner Network began their migration journey from their existing CMS platform to a new one with more features. Our team was there at very beginning of the process and expanded it over a five-year period.

Objective
The overarching objective was to move onto a platform that has personalization and digital marketing capabilities so that they can better tailor their content to increase engagement. Another objective was to improve governance standards and design consistency across the platform.
Strategy
We analyzed other sites across the Microsoft ecosystem for patterns (as there wasn’t an established library at the time) and followed branding guidelines. Once the Fluent design system was established, we used that as a primary resource to adhere to.
Outcome
Our team maintained all redline spec documentation for all new and existing components to support on and offshore development teams. We helped the client stay on top of ecosystem trends and corporate mandates, such as global navigation and footer. In the end, we managed 42 different components and a Standard Elements Guide.

Global Component Library Timeline

Component Library v1

Our team designed a set of components (Global Component Library) with complete documentation and HTML versions. We consulted with site owners and production teams to port existing content into the new Partner portal.

Since the initial portal migration, many other Partner sites have successfully moved onto the platform using the same component library. In some cases, additional UX consultation was required to extend the core library for specific needs.

Component Library v2

Adjustments were made to all components to align with Microsoft’s adoption of rigorous W3C accessibility criteria. At the same time, the team adjusted the basic layout of the site to accommodate larger desktop monitors that had become standard since the initial migration.

What is accessibility?
Making sure our sites work for everyone regardless of how they are accessed. Accessibility supports social inclusion for people with disabilities as well as older people, people in rural areas, and people in developing countries. It overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization (SEO). For more information: https://www.w3.org/WAI/fundamentals/accessibility-intro/

Component Library v2.5

To stay aligned with Microsoft brand while minimizing investment, the team focused on updating common site elements that would provide a refreshed experience without requiring extensive development and testing. The portal’s contextual navigation was replaced with standard Microsoft.com single stack navigation along with CTA and typography updates.

What is fluent design?
Microsoft’s latest design approach aims to create immersive experiences with spatial design elements. Fluent design has been translated into a standard set of UI elements for use in products and the web called Fabric UI. For more information: https://www.microsoft.com/design/fluent/#/

The Future of the Library

Our team had plans to continue evolving the strategy further. We realized the connected digital lifecycle marketing requires flexibility and greater speed to market and that the strategy had evolved significantly from the site that was migrated. The components had been reskinned twice without significant refactoring for user experience.

Our approach plan was to continue being holistic, user-centered, collaborative, extensible, data-driven and measurable. Some draft goals included revisiting the needs for content, marketing and personalization, better alignment with partner ecosystem (Partner Center and Docs, for example) and better alignment with Microsoft brand (MSCOM) and Fluent.

The 42 Components

Accordion
Assessment
Asset Detail
Asset Gallery
Coachmarks Tour
Col Grid
Collection Detail
Complex Table
Content Query
Countdown Clock
CQC List View
Directory
Events
Filters
First-time Overlay
Footer
Full Width Feature
Header
Icon Blade
In-Page Navigation
Large Featured Content
Large Hero
Learning Journey Detail
Learning Path Detail
Lifecycle
Navigated Rich Text with Scroll Spy
Notifications
One Card
Partner Bot
Progress Tracker Widget
Quote
Right Rail Content Panel
Search Blade
Search Results
Simple Gallery
Simple Header Blade
Simple Hero
Simple Table
Simple Tabs
Small Hero
Video Detail
Each component listed above was an individual PDF redline document

Standard Elements Guide

This 55-page guide is a separate redline document that contains only global elements. The individual component PDFs then reference back to the guide.

“One card to rule them all”

After analyzing content types, assessed media and other organizational elements, we designed one card that could serve many purposes. See below for the different variations of the card.

Galleries & Filtering

After analyzing the taxonomy and content types we designed two different flavors of galleries – one that is more lightweight with 1-4 filters and a full gallery experience with all functionality.

Key Learnings / Challenges

After designing and managing this platform system I learned it would have been easier on us and more efficient in the long run if we developed the Standard Elements Guide sooner, to prevent re-work/duplicative work. I also learned that having too many grid breakpoints is most of the time not necessary, and only adds more bloat to the documentation. One challenge for our visual designer was the slow, tedious effort to keep redline spec documentation in static PDFs. We learned that an online, interactive format might be a better approach for future endeavors such as these.