Teams is the newest addition to the Microsoft Office 365 that combines workplace chat, video meetings, file storage/collaboration, and application integration.
I started my role as the design auditor where I collected all the visual elements and design patterns and finding where the discrepancies were. Then I presented to the design team and help align everything together. During that time, I also designed the Android version and iOS typography of Teams mobile apps.
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.
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 app 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 component got update, then the system will notify the designer to click update and done.
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 main challenge was how to translate the full desktop experience into a small screen — especially the robust messaging capabilities such as Gify, rich text format, stickers, and attachments. After a few iterations, I was able to create an intuitive input pattern that fits the need.