MICROSOFT 365

the
PROJECT

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

Brand Development

Visual Design

Interface Design

Communications

my
ROLE

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

Zeplin

Responsibilities: Art direction for live product support and UX, interface design, wireframing, prototyping and visual design.

HOME
PILOT
POC
SECURITY
interaction
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.

&
visual DESIGN

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.

PRIMARY PALETTE

Windows Blue
HEX #0078D4
RGB 0/120/212

Dark Grey 1
HEX #464646
RGB 80/80/80

Light Grey 1
HEX #F2F2F2
RGB 242/242/242

White
HEX #FFFFFF
RGB 255/255/255

SECONDARY PALETTE

Mid Blue
HEX #0060AC
RGB 0/96/172

Light Grey 2
HEX #E6E6E6
RGB 230/230/230

Light Grey 3
HEX #CCCCC
RGB 204/204/204

Mid Grey
HEX #767676
RGB 118/118/118

TYPOGRAPHY

Segoe UI Light 

Hero headline / Page header / Section Subheader

Segoe UI Semilight 

Paragraph title / Paragraph subtitle

Segoe UI Regular

Body Copy / Captions / Links

custom
ICONS

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.

brand
PHOTOS

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.

ux
DESIGN

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.

1/7
1/7
M365 App Compatability page
project
UPDATE

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 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.
  • Black LinkedIn Icon
  • Black Facebook Icon
  • Black Twitter Icon
  • Black Instagram Icon

+1 (206) 972-7483

|

© Thomas Troisch

M365 IT Security page