Adding chat to your application has traditionally been a rather complicated process. Most of the early direct messaging with chat were handled by dedicated third party applications like AOL Instant Messenger. The internet thrived early on because it made messaging your friends, receiving news, building communities through private or group chat rooms easy and quick (even on slow connections).
Although the applications have changed over the years, the user habits and expectations for an in-app chat have slowly evolved. We’re going to consider some of the best ways to design your in-app messaging and the user experience.
What Is In-App Chat?
In-app chat typically means private, bidirectional chat and direct messaging between or more people within a software application.
It takes place in social networks with activity feeds, native applications, and other digital products or marketplaces. In-app chat best practices involve multiple patterns for people to connect on a more personal level and discuss whatever interests they share. When applications and products have to chat embedded, their community stays connected, engaged, and retention is increased.
Chat Delivers on the Need for Direct Communication
Designers are leading the charge on how people are connecting and building relationships with the internet, providing a new layer of communication and decision making through smart chat app design. I hope to showcase a few in-app messaging examples from real companies that are solving real problems.
Case Study: Thumbtack In-App Chat
I’m going to speculate that Thumbtacks massive growth is related to two prime things they did incredibly well with their user experience. First, they designed a fantastic onboarding experience, and they leveraged chat in their application as the central communication system. I think this makes them have one of the best in application chat designs.
Thumbtack is the solution for people who want to browse services quickly and efficiently for the best deal, best professional all without sacrificing the need to do a bit of due diligence in the process. Thumbtack solved this problem by guiding new users through creating a proposal for a service, which would then alert nearby professionals and enable them to start a conversation.
By focusing their user experience on connecting a service requestor with a service provider through chat, Thumbtack allowed the requestor to see not only who had a good track record of reviews, but also experience first hand how it could be to work with that service provider. It harkens back to the days of calling multiple service providers and having them come by to understand better what is needed for the job.
With a smooth experience of defining the service needed, chatting in the application is the most efficient means of understanding what the job will need (and cost). I have used Thumbtack for electrical work and brush removal, all because it was easy to share photos through chat, right in their application. With a few selections, I could be in touch with a professional and, in just a few hours, see a job completed.
This screenshot from the web-version of thumbtacks chat application shows how they split their UI into two parts. The first and left panel is designed for communication, and the right panel is for reviewing previous jobs. The side-by-side comparison will allow for direct messaging that effectively facilitates communication and decision making.
Pivoting To An In App Messaging Experience
Thumbtack has put a lot of great work into pivoting their product. This pivot wasn’t just a change in their core user experience; it was a change in prioritizing native over the web. Native applications have improved engagement compared to traditional websites. It’s my observation that they would not have been able to transition their user experience from letting pros bid on customer submissions to flipping it to customers searching and contacting pros directly in their application without chat. Chat as their core experience enabled that transition to be so successful.
As Thumbtack continues to improve their chat UX, I hope they will consider building more “presence”. They can show who is online, give pros the ability to have stories about jobs, and maybe even provide more advanced messaging functionality within their chat application (payments, chatbots, etc.).
Key Takeaways on How Thumbtack Delights Users With Their In-App Chat Design:
- Native first helps drive engagement within a chat interface
- Focusing on chat allowed them to make a big pivot
- Save advanced messaging functionality for the end of a conversation (leaving a review)
- Use a web version to enhance the chat experience with relevant information (reviews, pictures, etc)
In-App Messaging Use Case: Uber Chat
Uber revolutionized temporary transportation for everyone around the world. They have given everyone from professional drivers to part-time individuals the ability to pick up a rider and make a few dollars in the process. Much of the success stems from their native applications, which combines real-time geolocation with automatic payments into a seamless user experience. In 2017, Uber released its version of in-app chat to make the ride-sharing pickup experience even better.
I can speculate the motivations Uber had for their mobile in-app chat, and it probably has a lot to do with trust. Uber transformed how people perceived “getting in the car of a stranger” through a user experience that focused on professional drivers first. This enabled early adopters to trust Uber to get them from point A to B. Once Uber’s application was trusted, then they were able to expand the ride-sharing service to individuals that would drive for them.
Even though Uber did something incredible to build trust through their application, they couldn’t keep that going if a driver and passenger needed to call or chat outside of the application. That may help drivers and riders connect, but may introduce more problems due to carrier, platform, and technology limitations. Uber solved that by bringing it within the application and controlling the experience of chat and voice over data, right in the Uber application. Since you don’t need to share phone numbers or leave the application to chat, the conversation and method of the dialog remain pertinent to the temporary nature of receiving a one-way ride.
Uber’s in-app chat is designed well for both the rider and driver. They leveraged the “thumbs up” reaction as a communication pattern that enabled drivers to stay safe and focused on the road, while also remaining engaged. This type of real-time direct messaging creates a seamless chat experience for engaged users.
Key Takeaways From Ubers In-App Chat Design:
- In-app chat can prevent weird (or filtered out) “where are you” type messages from unknown sender that are blunt and to the point (because the driver is driving)
- Keep sending messages simple with the aim of facilitating the main objective
- Make replying to a chat message effective and as simple as possible for those who may be doing something that requires the majority of their attention
- In-app chat is a perfect solution for international use. Some countries allow you to anonymize important details (like a phone number) but that becomes difficult to scale. Riders don’t have to worry about international travel and keeping their phone number up to date with temporary sims
Case Study: Instagram Direct Chat
Facebook is investing aggressively in application chat messaging. Facebook, the world's largest social network, indicates that its future relies on the success of its in-app chat (source). We power activity feeds for many different industries, and we can confirm that in-app chat services are perfect for enhancing in-app engagement, retention, and conversion. Facebook is committed to building chat into its main properties. For this article, I’d like to focus on what they are doing with Instagram because it’s a fantastic example of combining in-app feeds and chat messaging.
Instagram introduced a very simple direct messaging in 2013. At the time, it was designed to enable someone to send a post to a group (max size of 15 people) to be able to have private, real-time chats about a photo. Over the years they have enhanced this to allow for direct chat messaging of:
- Disappearing photos and videos
- User profiles
- Hashtags
- Locations
In-app chat is the glue that keeps your users coming back over and over again. Instagram direct chat messaging was a smart product decision: it enables people to send messages, photos, and videos to one or more of their friends or groups. Since Chat messages don’t appear in the feed or profile, there is a sense of normal conversation that can take place. This extends the time spent in the application, and it makes for that experience to be fun and worthwhile.
Instagram Takeaway: Make Managing Conversations Simple
In-app chat needs to be a straightforward user experience. Using reliable design patterns will give you a better idea of what unique features your users will need.
Instagram Takeaway: Streamline Creating New Conversations
Focus on adding “message” to profile pages and posts. Give chat a dedicated button/icon that is a persistent part of the UI. This makes it easy to select previous chats or to start new ones. Instagram uses a paper airplane in both their header and next to posts that can be sent as a chat message.
Their feed to chat messaging flow looks like this:
- Hit on the post you'd like to send.
- When the message UI appears you can then add an optional message at the top.
- Within the messaging UI you can search for the person or group you'd like to send the post to (up to 32 people) and then tap Send.
Your application will be different, but this pattern should help you with making the process easier when designing your chat application.
Misc. Instagram In-App Chat Considerations
- Make it a simple process for adding new people to a group chat. This can be done with a dedicated panel that gives you an overview of the group conversation.
- Make it easy to unsend or delete messages. Not every chat application supports this, but with Stream Chat it’s easy.
- Make it easy to leave a conversation
- Make it simple to flag inappropriate content Leverage threads in conversations to reply with more context Provide group/direct notification preferences. Some people and groups you may want to mute.
Instagram continues to evolve its product, and chat was a significant improvement. In the last few years, they’ve added a complete web application, and they are currently in the process of rolling out in-app chat for their web application. This move supports their super users who need to be able to manage their Instagram account beyond their smartphone, even though it comes at the cost of encryption. Facebook has said that they will eventually unify chat for Messenger, WhatsApp, and Instagram, so web-based encryption will likely be incorporated at a later date.
When You Should Add Chat Messaging to Your App
Adding chat to your application for direct messaging usually makes a significant improvement with engagement. At Stream, we are working with product teams to expand the interactions of the Activity Feeds to include private bidirectional communication with direct messages and group chat. Up and coming social networks have seen the struggles of companies like Twitter when it comes to scale. Twitter DM lists have a max group size of 50 people, and in some cases, this limitation has forced groups to dedicated chat solutions like Slack. Stream Chat can be used for direct messaging between users to discuss what an item outside of public view. We are enabling teams to drop in chat to their application without the concerns of group size or character limits.
Add chat in your application if you want to grow and build more value. Facebook acquired WhatsApp because of its rocket growth. At the end of 2017, the application had 1.5 billion users and was processing 60 billion messages per day (source). The growth has continued, proving that paying $19 billion for the application was a smart decision.
- Your customers are asking for it
- This may appear to be obvious, but the best reason to do something for your application product
- You know it will improve the community experience
- You want to increase time spent in the app - chat is interesting because people are happy to talk to one person across multiple products
If you want to learn more about Stream's in-app messaging API, which is HIPAA compliance ready, I recommend you try the demos or sign up for a free 28-day trial. Happy chatting!