Microsoft Loop
Microsoft Loop is a new app that combines a powerful and flexible canvas with portable components that stay in sync and move freely across Microsoft 365 apps.
My feature areas are Loop components and Meeting notes. From detailed tasks like UX product thinking and Visual design, to bigger picture tasks like Information architecture, Recall and AI enhancements, Prototyping and user testing. This project features the process of redesigning the Loop component header.
Loop components
August - November 2021
Goal
Create a refreshed Header design for Loop components prior to Public release. Make sure it scales on an ecosystem level, for new component creators and component hosts
Problem
How can the header be redesigned, to help users understand the source of data and the card’s live edit-sync capabilities?
What else can be added to the card to help with naming and recalling?
My role
Redesign UX, UI, and interaction design of the Loop component header, while addressing business goals and user feedback.
Develop a header template that can easily be adopted by apps that want to create their own components
Collaborate with app partners to develop header variants that address specific app jobs and needs.
Contribute to research protocols, and craft interactive Figma prototypes for testing.
Collaborate with visual and motion designers for cohesive visual branding and accurate metaphors.
What are Loop components?
Loop components are dynamic, editable, and embeddable content 'windows' that facilitate seamless collaboration within chats, emails, meetings, or documents
Asks and feedback to keep in mind
-
Business goals
Create header design that can be applied by other apps
Appeal to app developers to create Loop components
Create header variants that address app partner needs
-
User feedback
Not clear where the data is coming from (app source)
Not clear that component instances sync in multiple locations
Component actions are not clear
Header menus are misinterpreted
-
LT feedback
People and collaboration should be the focus
Highlight Loop ‘superpowers’
Bring attention to card
Make it feel editable and ‘live’
Sync with app design thinking
Step 1
Assess and analyze
I assessed the existing user information, analyzed the previous design and did some inspirational analysis
User information
User Journey
Putting together a user journey helps understand where different types of Loop components can help customers. The current design didn’t provide peace of mind for syncing back with its source app
User jobs to be done
The creation and evolution of designs should always make sure to address the user jobs to be done. The JTBD acted as a checklist that assisted in creating the new design.
User create flowchart
Putting together a flowchart helped understand the creation flow of components inside hosts. The flowchart helped highlight the different states of headers I’d need to create, like during a compose state, vs a sent/shared state.
Design analysis
Neutral grey stroke falsely implies that the card is read-only
Actions are dispersed and not found in one area
Brand clash between Loop and app data source. App (Dynamics) is not an interactive element
Stacked avatars + timestamp implies past action, not present
Save icon takes away from the core job of components, which is that they are editable and live-sync
Inspirational analysis
-
Synced blocks - Notion
Design highlights
Visual distinction between regular and synced blocks
Actions all together in one area (Share etc)
Clarity of live synced edits
-
App integrations - Slack
Design highlights
Data brand source is visible and clear
Data editing actions inline
Seamlessly integrates in conversations
-
Widgets
Design highlights
Content title and source
Preview of content
Interactive actions inline
Step 2
Hypothesize , design and test
Information architecture
I constructed an information architecture map of the older design (before), to better understand how to group and separate the jobs and information, according to past feedback and asks. The new mapping has clearer delegation of jobs and also helped with designing the new UX
Design updates
I reshuffled the existing elements, updated the interactions and introduced new helpful elements
Proposal
-
Grouped actions together to help build muscle memory. System level scalable for other party components
-
Center align to emphasize collaboration and allow for future interaction capabilities like ‘Follow‘ or ‘Spotlight me’. ‘My avatar’ in purple (brand color) for clear distinction
-
Provides app data source clarity. Also acts as a navigation link to view and edit the content in its native source.
-
Name/rename Loop component files, for ease of recall, find and share.
-
Outline color, on hover state, to conveys card content is live and editable, and is closely associated with the Loop brand
User test feedback
Audience
Collaborative IW who use Teams and 3p apps
No prior Loop component experience
Methods
Moderated and unmoderated sessions (qualitative data)
Figma interactive prototype flows
Step 3
Ecosystem scaling
Shared header
My design guidance assisted internal and external app partners in developing their own Loop components.
Header variants
After collaborating with multiple app partners, it was clear that there was a need to develop different header variants.
I created a decision flowchart, in order for partners to understand which header variant would best apply for their scenario
Host apps
Below are examples of Loop components inside authoring and communications host apps
Guidance, principles and specs
I created detailed guidance and specs file for implementation purposes, design principles and an assets library, so that fellow designers can use different components types in their flow comps.
Results
Data and follow ups
Metrics since release
Follow ups
Next steps for Loop components would be to evolve the shared header for more custom app actions, seamlessly integrate AI capabilities, and divert traffic into Loop app
Extra scenario case
Shared locations
This section is a view into the design process of the Shared locations header feature
The importance of content design and icon metaphors
The problem
In past research studies the biggest user challenge was misunderstanding the Loop control design– users thought the locations listed were files associated with/attached to, the collaboration happening in the component.
Another Loop component ‘superpower’, besides having multiple editable instances of the same components, is to provide the user with a list of all instance locations, and ease of access and navigation without leaving context. This ‘superpower’ was originally named as the Loop control
The design solution process
Before the next research study, I redesigned the menu, decided to try new terminology, and worked with a UI designer to update the icon metaphor for the entry point.
In collaboration with the Visual design team (Andrea & Ryan) and research, we landed on icon metaphor and terminology that conveyed the concept the best with customers
Design updates
The newest menu design is built on the learnings from previous iterations
By changing the visual treatment of locations, from text to tiles with app icons, helped users understand that the content is navigation links and are not related suggested content.
Evolved the menu naming from ‘Connected locations’, to ‘Component locations’, to arrive on Shared locations, which helped users understand that this menu is a navigation menu.
By dividing the menu into sections, with clarifying headers and relationship between them, users understood where each link would take them, before even clicking. Shared locations for and Open component are the new section headers
By updating the string ‘Connect to’ to Add to Loop workspace, users understood the ‘folder like’ functionality of adding a component inside a workspace.
Removed: ‘Disconnect’ component and explanatory text, as that is a feature that needed more time for research and design thinking.
Customer feedback
“..so maybe that’s because I don’t have a ton of experience on Teams—maybe this is like other places that within the Team's environment that this particular loop has been shared to”
- 8/10 users understood
“..so I didn't know what it was, which is why I clicked on it and I guess, this is showing me where this item is and has been shared previously”
-7/10 users understood
