Microsoft Teams

Teams is the newest addition to the Microsoft Office 365 as the evolution of Skype for Business. It combines workplace chat, video meetings, file storage/collaboration, and application integration with the power of Office and Exchange.


Role & Responsibilities

Product Designer III, Microsoft

Design Audit, Mobile App Visual Design


The Problem

As the release date fast approaching, I collaborate with the design team to get the basic ideas of what was going on; what was done; and what was in process. With multiple designers working on the project from UI to motion, inconsistency was inevitable. My role was to identify and connect with designers to help align all the design elements together.

Priority 1

Collect all the design assets across different platforms, versions, and other products under the Skype brand. Then work with other designers to align on the design components. Additionally, set up the design system that the team can use.

Priority 2

Assist the team with visual design, redlines, and mockups. The products include the Android app, various components within the desktop app, and typography design for iOS.

The audit process

Components under audit

  • Navigation pattern
  • UI components
  • Typography styles
  • Colors
  • Cross-brands components

Outcomes

With the audit report, I created the UI manual containing the reference and usage for designers. I also created the library workflow for all the asset files similar to the current library features in apps like Sketch and Figma but using Adobe Illustrator. The idea was to create each component separately in Illustrator and link all these files in one main master. If any of the components got an update, then the system will notify the designer to click update and done.

Android and iOS

With the knowledge from design Audit, I took on the task to help the team design the Android interface and iOS typography design. The decision was to adapt all the interaction design to match the native language, so the android app would use Material Design and Roboto typeface while iOS would use San Francisco.

The Challenge

The main challenge was how to translate the full desktop experience into a small screen — especially the robust messaging capabilities such as Giphy, rich text format, stickers, and attachments. After a few iterations, I was able to create an intuitive input pattern that fits the need.

Outcomes

Both mobile app designs were put into production and released alongside the main desktop application successfully.


Skype for Business

Product, Visual, Interaction Design

Microsoft Teams

Design Audit, Mobile App Design

Microsoft Azure AD

UX Strategies, Visual, Interaction Design

Password required

Novo Nordisk

UX Strategies, R&D Design, Prototype

Password required

Novo Nordisk

Software as a Medical Device UX/UI

University of Washington

Marketing, Branding, Project Management

Let's make great things happen together!

Contact Prak