Microsoft Teams

Launching with Seamless Cross-devices Experiences

Keeping visual design and interaction pattern across multiple devices - from web, desktop, iOS, and Android

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


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.


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

More Projects

Hey Facebook

Voice Developer Platform

Facebook +

Product Redesign

Facebook Portal

Interaction Design, Voice, AR

Password required

Novo Nordisk

Software as a Medical Device UX/UI

Skype for Business

Product, Visual, Interaction Design

Microsoft Teams

Design Audit, Mobile App Design

Let's make great things happen together!

Fill in the form, send an email, or book us time to chat.