Revamping messaging at Managed by Q

Here at Managed by Q, direct messaging plays a fundamental role in our product experience. Both workplace managers and vendors use messaging to discuss service details, share photos and attachments, confirm availability, and more.

Last year, the product, design, and engineering teams at Managed by Q undertook an ambitious project to redesign the messaging experience on our platform. The goals of this Messaging Inbox project were to improve usability and modernize our user interface.

In this post, I’ll discuss our motivation behind the Messaging Inbox project, the challenges faced by our design and engineering teams, and what we learned after executing on the vision.

In early 2018, we realized our messaging system suffered from poor accessibility: because messaging took place exclusively on order and quote detail pages, it was difficult for clients and vendors to easily locate and respond to messages needing their attention.

Our early attempts at addressing this issue showed some success. After adding a dedicated “Messages” tab into our office dashboard, which displayed a list of orders containing new message activity, we observed a nearly 2x increase in messaging volume.

But a shortcut wasn’t enough. It was still too difficult for clients and vendors to navigate between conversations and quickly respond to messages. Our solution to this problem was the Messaging Inbox: a single, user-friendly location offering clients and vendors a consolidated view of their existing conversations with an integrated message composer.

The Messaging Inbox project aligned with our higher-level goal to enhance Managed by Q’s communication platform by improving accessibility, engagement, and collaboration amongst the offices and vendors using our platform. We hypothesized that our launch of the Messaging Inbox would result in increased on-platform communication as well as an improved responsiveness from both offices and vendors.

Our design team devised a simple user interface that adhered to common messaging interaction patterns, while also ensuring the design fit in with our dashboard’s recent UI refresh. Our designers drew inspiration from popular messaging and email apps, including Slack, WhatsApp, and Apple’s Mail app, and they validated their ideas through mocks and user research sessions.

After several iterations, our design team converged on an inbox design that makes use of two scrollable panels: a side panel providing a consolidated view of all existing order conversations, and a main content panel displaying the message thread itself.

Within the engineering team, we aimed to maximize code reuse from the start; the Messaging Inbox was to be integrated within both our office and vendor dashboards. For this reason, we chose to implement the majority of frontend code for the Messaging Inbox inside of a shared library, which we then consumed as a dependency within the dashboards.

On November 7, 2018, we launched Messaging Inbox within our office dashboard, simplifying the process through which office managers communicate with their vendors. The response we received from our users was positive:

Two weeks later, we launched the Inbox within our vendor dashboard, extending the same feature to our network of service providers. In conjunction with this, we also launched mobile responsiveness, as a significant number of our vendor users access their dashboard using their smartphones while they are traveling to or at client sites.

Since launch, approximately 47% of all messaging activity within the Managed by Q office dashboard has taken place in the Messaging Inbox, and an average number of 1.5 messages have been sent per user session.

In the course of implementing the Messaging Inbox, our engineering team learned several valuable lessons about library development:

Early on in the project, we realized we were being slowed down by the tedious process through which we tested our code changes. Whenever we modified our library locally, we had to install the library inside of a Dockerized host app in order to preview our changes within a production-like environment. We solved this problem by creating a local development server using Webpack and Express and mocking the responses to essential API calls. This allowed us to preview major UI components and test basic functionality in real time as we modified our code. The setup of this development server took no more than a single day, and massively increased the rate at which our engineers were able to validate their code changes.

When we first started implementing the Messaging Inbox within a shared library, our designs called for nearly identical user interfaces in both of our host apps. To maximize code reuse, we chose to minimize the number of components exported by the library: a single MessagingInbox React component was used to render the Inbox feature inside of a host app. Since our initial launch, these user interfaces have slowly diverged. In response, we’ve moved from exporting a monolithic MessagingInbox component to a series of smaller, modular components that host apps can customize and arrange in a variety of layouts: InboxLayout, ConversationsLayout, MessagesPanelHeader, etc. This increases the overhead needed to integrate the Messaging Inbox feature within a host app, but assures the library can adapt to future designs.

The launch of Managed by Q’s Messaging Inbox late last year laid the groundwork for a variety of additional messaging-related enhancements within our dashboards. These include read receipts, inline rendering of attachments and images, and our most important feature to date: emojis. 😆

With the Messaging Inbox, we’ve demonstrated our commitment to providing office managers and vendors with a high-quality messaging experience. Be sure to keep an eye out for future improvements to messaging on Managed by Q’s platform.

Related posts:

You ganeraly what to take your own 1 human goal i want to look like any human hmm that is possible or not ya that is possible but you take thay life style is your life style than that thing is…