top of page

Microsoft Office Lync
Microsoft Lync 2013 provides rich communications, collaboration, and sharing experiences to customers. 
 

GOALS

Update the chrome, iconography, and presence status assets of the Microsoft Office Lync 2013 to be more simple, modern, and aligned with the Wave 15 Office visual refresh.

​

APPROACH

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 

​

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.

​
 

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.

 

​

View my role and design process



-- View video of Microsoft Office Lync 2013

 

conversation_collaborate.png
presence_Red_Stripe_Update.png
Lync_MainApp_2013_SingleLine.png

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:

Picture1.png

ROUND 2:

Picture2.png

ROUND 3:

Picture3.png
bottom of page