{"id":613,"date":"2022-07-26T16:00:37","date_gmt":"2022-07-26T16:00:37","guid":{"rendered":"https:\/\/fde.cat\/index.php\/2022\/07\/26\/launching-instagram-messaging-on-desktop\/"},"modified":"2022-07-26T16:00:37","modified_gmt":"2022-07-26T16:00:37","slug":"launching-instagram-messaging-on-desktop","status":"publish","type":"post","link":"https:\/\/fde.cat\/index.php\/2022\/07\/26\/launching-instagram-messaging-on-desktop\/","title":{"rendered":"Launching Instagram Messaging on desktop"},"content":{"rendered":"
\n
\n
In 2020 we <\/span>launched<\/a> Instagram Messaging (referred to in this post simply as \u201cMessaging\u201d) for personal desktop computers. We believe that this feature will improve everyday experiences and enable new use cases for all of our desktop web users. In this post, we go through some of our overall learnings from our desktop users, and dive into the engineering and experimentation that enabled us to ship this product. We believe that these learnings can be applied to other services to improve user experiences across all of their interfaces.<\/span><\/div>\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n

Part I: Why multiple interfaces matter<\/h2>\n

Instagram is a mobile-first experience. In fact, for the first few years of its life, Instagram was a mobile-only\u00a0experience, with the website redirecting users to download the app. But as a service matures, both in terms of the number of users it has as well as in terms of the use cases it serves, it\u2019s important to expand our understanding of how new interfaces can add value to the user experience. For Instagram, the desktop web experience is the main alternative to native apps, and we have done a lot of qualitative and quantitative work around what use cases it can solve for our users.<\/p>\n

One benefit that the desktop web experience adds to the native apps is that it enables a complementary relationship that leads to an enhanced user engagement. For example, we observe a complementary usage pattern throughout the day and week, with an increased usage of the desktop website during weekdays and daytime hours (6am \u2013 2pm), while the native apps see an increased usage during evening hours (5pm-7pm) and weekends. This pattern is consistent with our user interviews that consistently demonstrate that users want to take small breaks while performing tasks for school or work. This analysis also demonstrates how important the desktop web experience is for Instagram business accounts, who often use their personal computers throughout their workdays.<\/p>\n<\/div>\n

\n
\n
\n<\/div>\n<\/div>\n<\/div>\n
\n

Furthermore, we haven\u2019t found any evidence that the Instagram desktop web experience cannibalizes engagement from the native apps. In fact, it\u2019s quite the opposite \u2014 users who use both interfaces spend more time on each interface, compared to users who use each interface exclusively.<\/p>\n

Taking into account these findings, we have focused on building products that can enhance the user experience throughout the Instagram ecosystem, including web interfaces. Messaging was a natural fit and one of the most requested features to develop for the desktop web interface based on our user research. Not only it enabled casual use cases, such as messaging from your computer while performing various other tasks, it also created new use cases geared towards power users, such as the ability to use a large screen and keyboard to reply to hundreds of messages.<\/p>\n

Part II a): Engineering, from hack project to testing<\/h2>\n

Before\u00a0Instagram Direct messaging<\/a>\u00a0(also referred to as simply Messaging) was developed for the desktop web experience, it started off as an offering for the mobile web experience. The messaging experience was one of the first new product areas we had added in a while and was architected in a way that would allow its independent usage with or without the rest of the website. Some of the technical achievements included:<\/p>\n

Being the first part of our website to be written in purely functional components with React hooks, which was a newer paradigm at the time.
\nIt was our primary venture away from GraphQL usage and towards RESTful endpoints, which aligned us closer to the other Instagram applications
\nIt was the only area of the website that relied on real-time communication, and so was our first primary usage of MQTT.
\nIt was the first area of the website to use encrypted push notifications, as well as our first major expansion of our existing ServiceWorker framework.<\/p>\n

Considering the design decisions above, we made the architectural decision to separate data for Messaging away from the rest of the web application, which had the data being unified through an inefficient GraphQL and Redux combination.<\/p>\n

This change resulted in :<\/p>\n

An isolated Redux store that could be operated without needing data from the rest of the website.
\nThis also led to an independent client-side caching architecture, allowing Messaging on Mobile Web to boot quickly from cache independent of the rest of the website.
\nCode that was very re-usable on both Mobile Web and Desktop. The website as a whole shares a lot of the underlying architecture between the two surfaces, but Messaging\u2019s implementation strictly separated the models from the views allowing for its easy re-use in this project, and further projects down the line.<\/p>\n

We launched Messaging on Mobile Web at the end of H1 2019. After the launch, we noticed that many users were trying to get around the mobile web restrictions to use the experience on Desktop. After seeing the success the application had on Mobile Web, Messaging on Desktop started off as a Hackathon project in 2019.<\/p>\n

The project took the already-existing Instagram Messaging on Mobile Web and wrapped it in a container to frame it into a seamless desktop web experience. This, along with the data we received over multiple user research sessions, showed that Messaging on Desktop had the potential to find product market fit.<\/p>\n

When building out the experience for desktop, we had to take into account the larger interfaces and the different needs of Desktop web users. Some of the major changes we made:<\/p>\n

Improving the UX experience, from badging support and message flows to desktop-centric actions such as drag and drop images.
\nAdding key missing features such as Presence, Voice Messages, Permanent Camera Messages, Gallery Views
\nSupport for Creator and Business accounts, and the handling of multiple inboxes
\nChanges to the way we handle caching, as Desktop web users expected a more up to date experience<\/p>\n

Part II b): A\/B Testing and shipping decision<\/h2>\n

We launched the test to 2 percent of the Instagram desktop web population. The main metrics that we were keen on monitoring was usage of the messaging product, as measured by the number of users who send at least a message per day and the overall number of messages they send across both the native apps and desktop web. The results exceeded our expectations, with increases in both of those metrics. We also had guardrail metrics to ensure that enabling Instagram Messaging on desktop would have no negative effect on the usage of our native apps. The only regression we observed was in the usage of Messaging on the mobile web. We believe that some of the loss was organic since users now had one more option to choose from if they couldn\u2019t access their native app. But some of these lost mobile web users were artificial, because we know that many users were using third party extensions and tools to disguise their desktop web browser as a mobile web browser in order to get access to Messaging (since Messaging was available on mobile web before it was available on desktop web).<\/p>\n

Part III: Why desktop web features are more relevant than ever.<\/h2>\n

2020 has been an unprecedented year. The global pandemic has pushed the world into remote working and learning, which, along with social distancing measures, forced people to spend an increased amount of their time online. Because of this, products like Instagram Messaging and Instagram Live, became even more important in helping people stay connected with the people and things they love. It was important that we enable users to access those products from their desktop computers.<\/p>\n

Across Instagram\u2019s three main interfaces (native apps, mobile web and desktop web), desktop web was the one that grew (percentage wise) the most during the pandemic.<\/p>\n<\/div>\n

\n
\n
\n<\/div>\n<\/div>\n<\/div>\n
\n

Enabling users to feel closer to the people and things they love is at the core of what we do. Instagram Messaging allowed more users to do so during a time when we needed to connect more than ever.<\/p>\n

If this work sounds interesting to you, we\u2019re always hiring! Please visit our careers page<\/a>,\u00a0follow us on Facebook<\/a>\u00a0or on Twitter<\/a>.<\/p>\n

This project has been a joint effort of engineering, product management, user research, data science and more. Big thanks to Judy Mai & Tyler Truong from engineering who actually built the product, Adam Kopec who designed it, Amir Shaikh & David Ressler who made sure that all the processes had been followed for the product to go live, Kenzie Snyder & Jeff LaFlam from user research whose work gave us an in-depth understanding of what users are looking for in an Instagram web experience, and Evelyn Tong & Peter Jalbert for continued growth and data engineering support. Big thanks also to Mario Estrada and Tony Pan who built a lot of the Messaging product on mobile web. Finally, big thanks to everyone from the entire ecosystem that made sure this product launched with all the user-safety and integrity features to ensure a pleasant experience for all our users.<\/p>\n

Special thanks to Farhan Ahmed, Kiro Risk and Ryan Peterman for their help with early drafts of this post.<\/p>\n

\u00a0<\/p>\n<\/div>\n<\/div>\n<\/div>\n

The post Launching Instagram Messaging on desktop<\/a> appeared first on Engineering at Meta<\/a>.<\/p>\n

Engineering at Meta<\/p>","protected":false},"excerpt":{"rendered":"

In 2020 we launched Instagram Messaging (referred to in this post simply as \u201cMessaging\u201d) for personal desktop computers. We believe that this feature will improve everyday experiences and enable new use cases for all of our desktop web users. In this post, we go through some of our overall learnings from our desktop users, and… Continue reading Launching Instagram Messaging on desktop<\/span><\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-613","post","type-post","status-publish","format-standard","hentry","category-technology","entry"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":800,"url":"https:\/\/fde.cat\/index.php\/2023\/12\/07\/building-end-to-end-security-for-messenger\/","url_meta":{"origin":613,"position":0},"title":"Building end-to-end security for Messenger","date":"December 7, 2023","format":false,"excerpt":"We are beginning to upgrade people\u2019s personal conversations on Messenger to use end-to-end encryption (E2EE) by default Meta is publishing two technical white papers on end-to-end encryption: Our Messenger end-to-end encryption whitepaper describes the core cryptographic protocol for transmitting messages between clients. The Labyrinth encrypted storage protocol whitepaper explains our\u2026","rel":"","context":"In "Technology"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":745,"url":"https:\/\/fde.cat\/index.php\/2023\/08\/08\/what-is-slacks-secret-for-enhancing-accessibility-to-empower-people-with-disabilities\/","url_meta":{"origin":613,"position":1},"title":"What is Slack\u2019s Secret for Enhancing Accessibility to Empower People with Disabilities?","date":"August 8, 2023","format":false,"excerpt":"By Sommer Panage and Scott Nyberg. In our \u201cEngineering Energizers\u201d Q&A series, we examine the professional life experiences that have shaped Salesforce Engineering leaders. Meet Sommer Panage, a Senior Manager of Software Engineering for Slack at Salesforce, where she focuses on accessibility initiatives. Sommer and her team maximize the accessibility\u2026","rel":"","context":"In "Technology"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":792,"url":"https:\/\/fde.cat\/index.php\/2023\/08\/08\/what-is-slacks-secret-for-enhancing-accessibility-to-empower-people-with-disabilities-2\/","url_meta":{"origin":613,"position":2},"title":"What is Slack\u2019s Secret for Enhancing Accessibility to Empower People with Disabilities?","date":"August 8, 2023","format":false,"excerpt":"By Sommer Panage and Scott Nyberg. In our \u201cEngineering Energizers\u201d Q&A series, we examine the professional life experiences that have shaped Salesforce Engineering leaders. Meet Sommer Panage, a Senior Manager of Software Engineering for Slack at Salesforce, where she focuses on accessibility initiatives. Sommer and her team maximize the accessibility\u2026","rel":"","context":"In "Technology"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":833,"url":"https:\/\/fde.cat\/index.php\/2024\/03\/06\/making-messaging-interoperability-with-third-parties-safe-for-users-in-europe\/","url_meta":{"origin":613,"position":3},"title":"Making messaging interoperability with third parties safe for users in Europe","date":"March 6, 2024","format":false,"excerpt":"To comply with a new EU law, the Digital Markets Act (DMA), which comes into force on March 7th, we\u2019ve made major changes to WhatsApp and Messenger to enable interoperability with third-party messaging services.\u00a0 We\u2019re sharing how we enabled third-party interoperability (interop) while maintaining end-to-end encryption (E2EE) and other privacy\u2026","rel":"","context":"In "Technology"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":646,"url":"https:\/\/fde.cat\/index.php\/2022\/10\/31\/improving-instagram-notification-management-with-machine-learning-and-causal-inference\/","url_meta":{"origin":613,"position":4},"title":"Improving Instagram notification management with machine learning and causal inference","date":"October 31, 2022","format":false,"excerpt":"We\u2019re sharing how Meta is applying statistics and machine learning (ML) to improve notification personalization and management on Instagram \u2013 particularly on daily digest push notifications. By using causal inference and ML to identify highly active users who are likely to see more content organically, we have been able to\u2026","rel":"","context":"In "Technology"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":599,"url":"https:\/\/fde.cat\/index.php\/2022\/06\/14\/applying-federated-learning-to-protect-data-on-mobile-devices\/","url_meta":{"origin":613,"position":5},"title":"Applying federated learning to protect data on mobile devices","date":"June 14, 2022","format":false,"excerpt":"What the research is: Federated learning with differential privacy (FL-DP) is one of the latest privacy-enhancing technologies being evaluated at Meta as we constantly work to enhance user privacy and further safeguard users\u2019 data in the products we design, build, and maintain. FL-DP enhances privacy in two important ways: It\u2026","rel":"","context":"In "Technology"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/fde.cat\/index.php\/wp-json\/wp\/v2\/posts\/613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fde.cat\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fde.cat\/index.php\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/fde.cat\/index.php\/wp-json\/wp\/v2\/comments?post=613"}],"version-history":[{"count":0,"href":"https:\/\/fde.cat\/index.php\/wp-json\/wp\/v2\/posts\/613\/revisions"}],"wp:attachment":[{"href":"https:\/\/fde.cat\/index.php\/wp-json\/wp\/v2\/media?parent=613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fde.cat\/index.php\/wp-json\/wp\/v2\/categories?post=613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fde.cat\/index.php\/wp-json\/wp\/v2\/tags?post=613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}