Menu ↑
Sander van der WoudeSenior Product Designer
Menu ↑
Sander van der WoudeSenior Product Designer
Senior Product Designer at MessageBird↗
Previously at Blendle, IENS, Mediamatic.
Design Sprint for the Inbox project at MessageBird
Project information
2019
My role:
Designed in close collaboration with two other designers and the product manager.
While MessageBird (in 2018) had all the technology available for our users to reach their customers through every possible channel, we didn’t have an interface where they could use them. They either had to implement them in their own systems, or as plugins into services like Zendesk. There was an opporunity to add a user interface on top of this infrastructure to cater to this need, while potentially entering a new market. The market of customer support tooling. One added value that MessageBird was able to bring to the table, which was very wanted, was unifying these fragmented channels into one conversation because we own the infrastructure ourselves.
This was very sought after because a customer interaction could start in a chatwidget, move to WhatsApp, end up in e-mail or even a phone call. Something that sounds really natural for customers, was actually a challenge to businesses, keeping track of all these scattered interactions. Because we build and owned the fundament of this messaging architecture we were able show all these messages as one conversation in Inbox.
Technology has made it easy to talk to anyone these days and as customers, we expect brands to be available to us wherever we feel like reaching them, whether it’s WhatsApp, Messenger, email, SMS, voice, WeChat, or any other platform we regularly use. Moreover, we expect seamless service. We want a business to know us; our name, address, purchase history, preferences and any other data they’d need to solve our problems.
However, system unification is a tough problem to tackle. A lot of information is scattered around and, as our market research and user interviews confirmed, most of the solutions available today are fragmented across several tools.
So, in early 2019, MessageBird formed an internal team to solve this problem. We set out to research and build an application that would enable business in an omnichannel world, centralizing every part of the customer support workflow into one intuitive tool that puts agents and end-users first.
We kicked off the project by researching and scheduling talks with the focus groups that fit our profile: small to medium customer service teams, including our own support team at MessageBird. We also took care to gather data to validate hypotheses around our two main users: the support agent and the support manager.
What we immediately discovered is that support agents are very, very busy; multitasking between handling tickets, writing emails, taking phone calls, conducting live chats, and doing all of that on a number of different software applications, while keeping an eye on the metrics to reduce ticket resolution times. Managers, on the other hand, needed a plug-and-play solution that wouldn’t require developer resources. They needed a tool that would integrate quickly and easily into their existing data and workflows while helping them increase efficiency and track team performance.
After synthesizing our initial research and framing our challenge, we gathered our developers, support agents, product managers and designers in a big space at the office to take part in a three-day session to present our findings. We structured our learnings as customer journeys of both agent and manager, including their goals, main pain points, state of mind, frequency of product usage and our key opportunities for improvement within the journeys.
Together with stakeholders from all sides of the spectrum we were able to get a broad view of all requirements, limitations, and opportunities.
Participants were divided into teams and we ran some exercises to brainstorm solutions to a few ‘How Might We’ challenges, which generated great ideas for features and, most importantly, ignited crucial discussions about what we were going to build and how.
To make the most of the valuable insights we gathered during the session, we created a priority map. Here, we mapped all the output of the session onto a matrix of high impact to low impact, also ranking on how hard or easy each element would be to build.
Now that we had a good idea of the core journeys, we felt ready to start wireframing and prototyping. In this first phase, we included a lot of the features described during our interviews and we had to bypass and add lot of the rules of our design system.
First whiteboard sketches of the structure of the interface.
Userflows to design the full experience from signing up until accepting and working on the first ticket inside Inbox
In order to determine how efficient an agent could be in accepting, responding to and resolving a ticket, we built a prototype using Principle. Given our ambitious undertaking to combine every communication channel into one interface, our initial prototype was somewhat cluttered and chaotic, leaving agents feeling quite confused.
User tests with clients really proved valuable with evaluating the first designs.
To fix this we cracked our heads on improving information hierarchy, both on type scale and colors. For instance, we agreed to use colors only for channels, since using grey icons for the logos rendered them hardly recognizable. We also explored different ways the messaging thread could behave and so on. As you can see in the images, in order to improve the micro-interactions, this process was repeated a couple of times…
Building the anatomy of every element in different states
In parallel to the prototype work, development was already building a minimal version that allowed us to test with a focus group. The session was held with one manager and three agents from HelloFresh. They were given some tasks that would simulate a conversation with a customer, and while they were using it, we were there taking notes and testing how it would work in their daily life.
Performing user tests with the Inbox prototype with customer support agents and their managers.
This was essential in the process. We uncovered plenty of areas that needed improvement, given the complexity of unifying communication channels, especially regarding stability and reliability, which were immediately added to our roadmap. Despite this issues, overall the feedback was very positive. Agents understood right away the workflow of accepting, responding and resolving a ticket. Proving the straight forwardness and efficiency of the interface. So in that sense, the early MVP succeeded.
Knowing that risks were minimized after several rounds of tests and core functionalities were ready, leadership was confident that Inbox would deliver its value proposition. The strategy adopted was to go for a bold and external launch, in order to generate maximum awareness of the product. All content was designed in house, from landing pages to ads. It was an exciting and intense period, with a lot of stakeholders approval and a lot of teams quickly coming together to collaborate.
A more serene Inbox UI ready for release.
Video created for the initial launch of Inbox by Devon Moodley.