Motion Prototyping for Microsoft Teams
Below are a few interactive prototypes I created using FramerJS. This first prototype shows the motion transition for entering and exiting conversations on mobile. The goal of this prototype was to make the experience of drilling into conversations feel dynamic, immersive, and branded. You can test out this interactive prototype by clicking here.
A bit of context, the first screen with grey boxes represents a list of private conversations and as you click on items in the chat list the transition takes you to the selected chat conversation. When I was building this I surveyed how other applications like iMessage, Facebook Messenger, WhatsApp, and Slack handled this transition and what I found was they were all using some derivative of the default iOS and Android slide transition. I saw this as an opportunity to innovate and try something new. I wanted the motion to reflect the spacial relationship between list items and reinforce the mental model of the app. In short, I wanted the 'drill in' to actually feel like I'm physically diving into a chat rather than sliding from one view to the next. I also wanted the animation to be responsive in the sense that the chat expands based on its current position in the chat list. I also added a slight bounce when you return to the chat list, this allows a user to quickly orient themselves in the list by drawing emphasis to conversation they just exited.
The prototype above shows a series of paging animations triggered by the bottom navigation bar. I wanted to create a motion system that helped users understand the spacial relationship between core sections of the Microsoft Teams app. If I select a page that is spatially located to the right of my current view the animation should be intelligent enough to decide on a appropriate direction to perform a slide animation. In order to achieve this I had to develop a function that decides the direction of the slide animation based on where a user elects to navigate in relation to their current view. For instance, if a user is currently viewing ‘Activity’ and taps ‘Meetings’ the function recognizes that 'Meetings' is spatially located to the right of ‘Activity’ and thus triggers a right-to-left slide animation. If a user were to navigate back to ‘Activity’ from ‘Meetings’ the function would recognize that new user selection is spatially located to the left of the current view thus instantiating a left-to-right animation. To view this prototype click here.
