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.
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 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.