Inbox

POP 2019

Around February 2019 we got in contact with Apple in order to add iMessage as a messaging app on POP. As part of the 9 requirements from Apple, one was to have an Inbox.

The goal was to design an Inbox that would support the basic functionalities of an Inbox and be useful to many of POP’s customers and bring us closer to Apple’s requirements.

Timeframe

February — December 2019

Role

Lead designer

Company

POP

Platforms

Web

Besides an Inbox helping us accomplish part of Apple’s requirements, at this time POP had a conceptual problem too. Even though our customers were at times interacting with 100.000+ people, the only place to see those people was in numbers, filters, statistics or an audience table. There wasn’t really a place to interact with people and really see the scale of your account.

This is the audience table in the dashboard. Previously the only place you could see the 'faces' of your audience.

To add to Inbox being a good way to interact with your audience, for POP it also proved to be a very nice ‘first screen’ to land on. Some of POP’s features are very unique to messaging apps, so it’s good to have an Inbox front and center that 99% of our customers has experienced before and understand. Also conceptually it matches that people and conversations are most important.

The Inbox for desktop screens. People on the left, conversations in the center and information about the person on the far right.

Inbox on mobile displays the people in a list.

From the list, you can tap to enter the conversation.

Certain actions such as closing a conversation are tucked away in the top right corner.

Let’s dissect the Inbox screen to talk about some of it’s features and the decisions that were made.

The left-most section of the Inbox is the column of conversations and it’s filters. You can filter in all kinds of ways and see people who messaged your Messenger channel.

The list of people and their conversations with it's various states.

The center part of Inbox is the chat. This is where messages appear and you can respond. On the far right side are some data for this particular person you’re chatting with. Furthermore we’ve had to implement some specific features for the type of clients POP has.

As mentioned before, some clients are able to interact with 100.000+ people. Sometimes a large group of these people interact with the Messenger channel at once, due to campaigns, advertising or news. This can cause a huge spike in conversations on the Messenger channel and therefore also our Inbox.

Initially we had thought of limiting our Inbox in these specific use cases. However, since POP is more of a marketing tool than a true customer-support tool, it was decided that the realtime effect of conversations appearing in the Inbox would have a very cool and shareable factor to it. In contrast to our previous audience page, it was a huge difference to now see all the conversations happening live and in realtime.

A demonstration of the Inbox on the left and an iPhone with Messenger open on the right.

To expand on the customer support featureset, we designed a feature to add basic NLP (natural language processing) functionality to POP. Here’s the problem that NLP could solve for POP:

When a user types ‘Hello’ or ‘Hi’ or ‘Hey’ in chat you want to reply with ‘Hello!’. However, you don’t want to manually define each trigger word (Hello, Hi, Hey). This is not very user friendly, especially when complicated questions come into play.

Instead of manually having to define all the trigger words (Hello, Hi, Hey) you can just define 1 trigger word: ‘Hello’ and from there the NLP library will understand similar words and/or intentions and score them with a ‘confidence score’. In the example of ‘Hello’, you can understand how ‘Hi’ typed by the user would have a high confidence score compared to ‘Hello’.

Using this same logic, we can start to sketch our feature to allow users in our dashboard to set up a frequently asked questions for their channel. Examples for an online shop can be: ‘I want to cancel my order’ and to only trigger when the NLP library gives a high confidence score.

A sketch on how to directly create automated responses based on real questions.

The modal shown where you can set up the automated response.

POP working together with the native Facebook Messenger chat widget. This sketch includes an automatic (out of) office hours response.

Another addition to Inbox that is specific to POP is that we designed quick filters. Quick filters are a way to see specific groups, segments or campaigns come in and see the people that are in them or experienced them. Previously this was already possible through existing filters, but with quick filters it’s more obvious and surfaced in the user interface.

The thinking behind this idea is that it’s more obvious to see the results of campaigns you’re running. You literally see the people related to that campaign entering and chatting.

A prototype made in Framer of quick filters in Inbox.

Furthermore we added ‘group actions’, a set of actions you can take with the specific group of people who entered your campaign or segment. This is particularly useful because it surfaces the many features of POP and creates new ways to be reminded about it.

A sketch of group actions visible when you select 'All 1.2K people' in the list.

The Inbox has become a foundational piece of POP where conversations come in and actions take place. Be it customer support with automated responses with the help of NLP, or connecting the other parts of the platform with the help of quick filters and group actions.

The Inbox as it's currently live and working.

The Inbox has become an important feature for POP and has proven to be the centrepiece of it’s dashboard. It’s been good to see the Inbox is easily extandable with new features for customer support and marketing.

In the future I hope to extend it with multiple messaging channels such as Whatsapp, Instagram, Twitter and perhaps email to really push the limits of the Inbox.

1.1M+

Total amount of individual conversations in POP

25+

More than 25 different individual features

Fully responsive!

The Inbox and it's entire featureset works in the browser on phones and tablets too

Projects

Prototyping for car user experience design

Graduation project Hike One 2016

Dashboard and workspaces

POP 2019

Inbox

POP 2019

Design system

POP 2016

Contributions

Feedback and design suggestions for Coronamelder

Dutch corona app 2020

Experience

Thank you for visiting this piece of internet. Reach me at hey@lucvanloon.com or find me on Dribbble, , LinkedIn.

Press M to unmute audio