Brief
Worked as a UI/UX Designer on the Modern Workplace Transformation team for the Microsoft Teams product.
• Combine Microsoft Teams' new features (e.g., Walkie Talkie feature, Calendar feature, Chats feature, Tasks feature, Shifts feature, etc.) to demo for the high-level decision-makers
• Updated the UI element to the newest version
• Identify gaps in existing and proposed solutions
• Create Microsoft Teams UI elements for the Microsoft design system
• Create new features for Microsoft Teams Virtual Appointment mobile and desktop applications
• Transform business requirements and wireframes into working high-fidelity designs
• Collaborating closely with a multi-disciplinary team of other designers, product managers, and engineers
​
Role
70% UI Designer
30% UX Designer
Team
Microsoft Modern Work Transformation team
Duration
04/2021-09/2022
Design Tools I Use
​
Figma | InVision | Miro | Zeplin | Final Cut Pro | Adobe After Effects | Adobe Photoshop | Adobe Illustrate | Adobe Animate | HTML | CSS
Before VS After
Core Colors
UI Components
​
Defined broadly, a virtual appointment is any business-to-consumer (B2C) or expert-to-client (E2C) interaction that happens remotely via video or audio.​
​
The COVID-19 pandemic has accelerated the growth of B2C virtual appointments for customers across verticals: ​
​
Businesses who conduct virtual appointments find that Teams is not an optimal experience for their customers who are often external users
​
Businesses who conduct virtual appointments find that Teams is not an optimal experience for their customers who are often external users
​
-
Test the concept of “virtual visits*” and “templates” in meeting contexts
-
Test whether virtual visit meeting options will be helpful to customers conducting B2C virtual meetings
-
Inform the UX and visual layout of VV meeting template forms
-
5 participants, age 23-34
-
All Microsoft Teams users
-
All frequently set up & conduct customer-facing meetings
​
Scenario: View unread chat messages in Activity
• Baseline feature expected from a product
​
• Unsure what type of unread content will render when selecting to filter to unread
​
​
• Recognition rather than recall
• Visibility of system status
• Error prevention
• Help recognize, diagnose, and recover from errors
• Flexibility and efficiency of use
• User control and freedom
• Aesthetic durability
• Emotional connection with users
• Attention to detail
Create a numbered list of solutions from the sketch. Position the numbers in the matrix based on feasibility and value. (Legend: X = Feasibility, Y = Value to user)
Features
1: Allow attendee to join from a mobile browser
2: Notification settings
3: Allow attendee to test video settings before the meeting
4: Use a waiting room experience while attendee waits for the meeting to begin
5: Allow live transcription
6: Select multiple filters
7: Change filter icon
8: Show filter menu on first click
Information Architecture
-
All participants loved this feature
-
3 participants said they’d always use this
-
“Always a good option”
-
“No reason to disable this ever”
-
All participants liked this feature & said they would use it​
-
However, need to clarify that turning on MBJ does not restrict users to only mobile join
-
All participants liked this feature & said they would use it
-
All preferred seeing the reminders split up into staff & attendee options
-
Initial concept validation ✅
-
Esp. device testing and email & SMS reminders (broken up by staff & attendee)
-
Visual preview of VA features helps communicate the value
Working for Microsoft helped me understand how to create a robust, organized design system. The second part was working with a large company; I learned how to cooperate with multiple teams' designers and product managers simultaneously.