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.
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
CQC List View
Full Width Feature
Large Featured Content
|Learning Journey Detail|
Learning Path Detail
Navigated Rich Text with Scroll Spy
Progress Tracker Widget
Right Rail Content Panel
Simple Header Blade
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.