Art Director / Product Designer / Visual Designer
Starting in 2018, Microsoft wanted to re-energize its decade-old industry-leading partner and enterprise customer engagement platform; retiring the Microsoft Connect portal - in favor of more focused tools and services that will allow for specialized user experiences with Microsoft. It was our challenge to give the Microsoft 365 ECIF (End Customer Investment Fund) program a stand-out brand and experience makeover. While adapting Microsoft's new fluid design standards communicate how intuitive and rewarding their stand-alone platform is to use.
Research & Discovery
In collaboration with my project manager and the program owner at Microsoft, I was tasked to design an accessible and scalable web-shell for the new ECIF portal. The client requested a condensed, yet content-rich number of unique "living" pages. Wireframing was essential in creating a prototype that could grow with the fluid content.
Adobe XD CC
Adobe Photoshop CC
Adobe Illustrator CC
Microsoft Office 365
Responsibilities: Art direction for live product support and UX, interface design, wireframing, prototyping and visual design.
Due to the expansive content of the M365 ECIF program, we took great care to wireframe every section and page prior to adapting Microsoft's new visual design elements. The program is intended for partners and enterprise customers; an audience requiring instant access to a variety of specialized data. Wireframing before visual design ensured a complete and deliberate user experience.
A key element in Microsoft's new fluid design principles is an abundant use of white space which leant itself well to contrast the data-heavy content of the program. The supporting palette of cool grays allowed me to use the signature Windows Blue color not only as an accent color but an effective tool to call attention to crucial content. I developed custom iconography (consistent with the Microsoft style guides) to support brand consistency and facilitate storytelling.
Dark Grey 1
Light Grey 1
Light Grey 2
Light Grey 3
Segoe UI Light
Hero headline / Page header / Section Subheader
Segoe UI Semilight
Paragraph title / Paragraph subtitle
Segoe UI Regular
Body Copy / Captions / Links
With the complexity of the content, we figured it beneficial to define and incorporate a deeper visual language. In many communications, Microsoft already leverages the use of iconography, and has amassed diverse libraries for its individual groups. In adhering to Microsoft's distinct style, I created a collection of multi-color icons to define everything from product categories to usage scenarios. The icon system added the perfect balance to the modular design and abundant white space.
In building such a comprehensive engagement, carefully selected photography plays a crucial role in conveying the story. Microsoft curates a very extensive and diverse living photography library, for both on and off-line application. Once we agreed on the mood/motivation for the content, we selected a photography series that dictated messaging, aesthetic, and methodology.
The layout of the Microsoft ECIF platform may come across as straightforward however, it required quite a bit of strategy and conceptualizing to convey the benefits it provided to its partners and enterprise customers: from engagement models to complete security solutions. The modular system, prevalent in Microsoft's fluid design, allowed us to highlight pertinent content throughout the site. The reuse of specific elements also allowed for visual consistency across the site, delivering a unified user experience by drawing focus to the key offerings.
A short 2 months after the launch on the new portal - Microsoft Collaborate, the Microsoft 365 ECIF program experienced significant growth in new enterprise customers. Due to our success, Microsoft engaged us to help expand their program with updated content and some visual design retouches.
The active M365 ECIF program site is restricted to Microsoft authorized partners and enterprise customers only, however, you can view similarly styled layouts that took inspiration from this platform at: Microsoft 365 for Partners
The take-away - whether a new client, or a long-term working relationship, I have developed a proven process over my years in the industry. Wireframing for user experience and storytelling, prototyping for functionality and accessibility, and visual design for brand consistency and, yes, visual aesthetic.
© 2018. Photography and Segoe font family is protected by Microsoft copyrights.