Wilo Dietrich
Rich communications + collaboration + sharing experiences to customers.
Clarity, modern, and intuitive interface, presence status assets, and iconography that is aligned with the Wave 15 Office visual refresh that increased user confidence and trust.
Microsoft Office
Lync 2013
Goals
To achieve elegance and clarity for the Lync desktop and web refresh, visual styles of the iconography, presence status icons, and chrome were simplified:
— Removed “glass” material and flattened color to better align with the new Metro design language.
— Narrowed the width of the presence asset and removed the border around it and the profile pic.
— Investigated color, shape, and pattern to obtain stronger accessibility of the presence assets but meet the brand design vision.
— Line width and curvature were given special attention
Scope
Inventory of use cases that involved: Send instant messages (IM). Start or join audio/video calls and online meetings. Share availability (presence) information, files, and engage in white-boarding sessions and group boards.
Final Presence Status Indicators in context of Microsoft Lync:
Image Credits: "Lync 2013 Convenient Features"
~ Shanewaz Ahmed | Apr 20, 2015
Approach
I was a visual product designer for Microsoft Lync on the end to end Lync Creative Team. I worked with my Design Lead/Creative Director on the visual and interface styleguide that would be leveraged across the different platform teams working on Lync desktop, server, mobile, tablet, and web. Designers in Redmond, Boston, India.
I art directed and worked on the visual design specs for the Lync desktop user interfaces that were designed by the interaction designers and reviewed the assets for hand-off to developers. I oversaw a vendor agency and two contractors who delivered the assets (1,000+) and maintained the styleguides. Styleguide included user design spec, interaction model, mockup, redlines, and visual assets used.
Presence Project
Aside from art direction and consultation on user interfaces. I designed the Presence Status visual system that was rolled out for 2013. The system involved giving a fresh modern treatment to the state visuals than was previous seen in versions of Microsoft Lync.
The design involved several rounds of user testing and color accessibility assessment with an accessibility expert and interfacing with our vendor agency for the production of the assets. Notable modifications during the last round of design involved further work to differentiate between the available and busy states.
The green and red were still too close in value for a definitive accessibility pass. I worked on modifying the available green to include both shape and color change, but it didn't quite make the grade when consulting with the accessibility consultant. So I kept available as a solid green and instead focused on differentiating the busy red state by adding lighter diagonal lines to it. It provided the contrast and differentiation I needed. I worked with my usability researcher who ran the lab study with color blind users where performance results clearly indicated that color-blind users would fare better with the striped red models over the earlier gradient green or dual green versions. The red striped modification to busy was successful in passing accessibility and yet still give the ux a clean modern visual.
Process
— Worked with creative director, product managers, designers, user researcher, and developers to establish user interface styleguide.
— Styleguide included user design spec, interaction model, mockup, redlines, and visual assets. Partnered with Office counterparts to ensure consistency across desktop and mobile.
— Maintained the styleguides and provided guidance to developers on final implementation.
— The presence visual assets part of the project underwent multiple iterative usability tests (10+ participants) and accessibility expert reviews. Worked with user researcher to provide visual assets for the usability study session. Final designs were used throughout Office Suite.
Throughout the process, the design was reviewed by design stakeholders in Microsoft Lync and Microsoft Office Products (Word, Outlook, Sharepoint, OneNote, etc.) who integrated what Lync created into their products for a cohesive unified customer experience.
Final deliverables included 2,408 presence visual assets across Lync, Office (PCX), OWA, Sharepoint, and other Office Products.
Impact
— I art directed and oversaw a vendor agency and two contractors who delivered the icon assets (1,000+) used in the product. Final product received favorable reviews and positive customer engagement.
— Final deliverables also included 2,408 presence visual assets across Lync, Office (PCX), OWA, Sharepoint, and other Office Products. Cost savings to the company in the production strategies that were used.
— Worked through accessibility needs for low and high contrast states for navigation iconography.
Designing for Accessibility
-
Used both color and shape to differentiate elements from each other.
-
Used color checkers (Vischeck) and evaluations by 3rd party accessibility expert in vendor company.
-
Iterations went through usability testing with users. Participants: internal employees with disabilities were recruited for the studies.
ROUND 1:
ROUND 2:
ROUND 3:
Usability test iterations:
Previous Version of Presence States:
Image Credits: "Appear Offline Status on Lync Client"
~ SukhijaVikas | June 22, 2014
Previous Version of Microsoft Lync:
Final Presence Status Indicators in context:
