Bringing Cohesion to the Twilio Product Suite: Part I

Bringing Cohesion to the Twilio Product Suite: Part I

Twilio has grown into a fairly large company—we have over 8,100 employees at the time of writing—and all of us are toiling away building and maintaining our different parts of the greater Twilio machine.

Having so much energy behind building Twilio’s products is amazing, but at this scale, it takes a lot of intentional effort not to “ship our org chart” and create a fragmented customer experience. We have a whole slew of product verticals building different pieces of a horizontal end-to-end user journey. On top of that, we’re also working to thoughtfully integrate recent acquisitions—such as Segment and SendGrid —into our product suite, and these products were built by entirely different companies. The result, understandably, is a lack of cohesion across our products and, consequently, a disjointed user experience.

Our UX Infrastructure team— being a platform team that serves horizontally across the organization—is well-positioned to smooth the edges of the product experience. We saw this as an opportunity to change the way we collaborate as a company, by breaking down organizational silos and bringing everyone along for the ride.

With this work, our goal is to pave the way for a unified product experience by evolving the Twilio product design language and writing the playbook for current and future Twilio products to create seamless user experiences.

We will do so by defining our product traits; implementing our evolved design language in Paste, Twilio’s design system; and creating resources (e.g., guidance, templates, and new sets of presentational components) for efficient and iterative adoption of the design language.

Building a strong foundation

It was established early on in the planning of this initiative that—before pushing a single pixel in Figma—we’d dedicate time to understanding the problem space via a three-pronged research approach:

1. Customer research: Because wearing the customers’ shoes is a critical piece of the Twilio Magic, we wanted to understand what we’re doing well and where we’re falling short in the eyes of our customers when it comes to the visual design and overall cohesiveness of our product user interfaces (“UIs”).
2. Market research: Because we are looking to the future with this work and aiming to establish a design language that supports not only where Twilio currently is but where we are going, we wanted to look to leaders in the space who are creating excellent product suites and delightful customer engagement applications.
3. Internal research: Because we will be creating a design language and resources for a complex network of applications owned by different teams across the organization, we wanted to have a solid understanding of where our products—and the people who work on them—stood today.

Learning from our customers

Our goals

Two key aspects of this work are to evolve our visual design language and to increase cohesion within our product suite. As such, we had two primary goals with our customer research:

1. Our first goal was to understand how dis/satisfied customers are with the current visual design languages used across four key Twilio product UIs: Segment, Console, Flex, and SendGrid. These four products were all built by different teams and are currently leveraging different design languages (different navigation, different UX patterns, different page layouts and page density, and so on). On top of that, Segment and SendGrid are using different color palettes, typography, and UI components. Before we could thoughtfully bring our varied design languages together, we needed to understand what customers like and dislike from the UIs we’re delivering to them today.
2. Our second goal was to understand how cohesive customers believe Segment, Console, Flex, and SendGrid are today. Before we could reimagine our disconnected products as a cohesive product suite, we needed to understand just how cohesive or incohesive our customers perceive our products to be, and what elements of our UIs make them feel that way.

Our desired output was a set of numerical baseline scores for both visual design and cohesiveness against which we could measure new design concepts in later phases of the project (to ensure that we’re making things better!). We also wanted to collect insights from verbatim comments to help us understand what we’re doing well and where we need to improve as we move into the design phase.

Our methodology

We conducted this research via an unmoderated survey over the span of about two weeks, which allowed us to hear from ~50 Twilio customers, all of whom use at least two of the following products: Twilio Segment, Twilio SendGrid, Twilio Console, and/or Twilio Flex.

Customers were shown screenshots of the four product UIs and were then asked questions around the visual design and cohesiveness. We broke the survey up into several distinct sections, three of which we’ll cover here: visual design, trait alignment, and cohesion.

Establishing visual design star ratings

How we did it

To establish visual design scores, we selected three similar screens from each of the four products. We then showed each product to respondents one at a time, and in a randomized order to reduce bias (meaning that some respondents saw the three Flex screens first, some respondents saw the three Console screens first, and so on).

What we learned

After seeing the three screens from each product, customers were asked to give the visual design of each product a star rating out of 5 stars. Segment had the highest score at 4.26/5 stars, followed by Flex at 4.06/5 stars, SendGrid at 3.98/5 stars, and Console at 3.84/5 stars.

When we asked respondents why they gave the scores that they did, a few themes surfaced in the verbatim comments for Segment and Flex, the highest ranking products:

• The hierarchy of the pages made it easy to focus on the most important information, and several respondents cited grouping related items and putting content into cards.
• The navigation was clear and it was straightforward to know where you are in the UI.
• Page layouts were clean and made the product easy to understand.

An interesting point to note here is that Segment and SendGrid were both using their own sets of UI components in the screenshots shown in the survey, but Flex and Console were both using Paste. Yet, Flex and Console ranked quite differently among respondents. This seems to indicate that customers are attuned to differences in implementation of the same set of components and that investing in strong implementation will be critical to the success of this initiative.

Understanding trait alignment

How we did it

Based on research conducted a couple of years back, Twilio established what we call our “Product Traits”, which are descriptive terms that we want to align ourselves to in our product design work. Those traits are “Clean,” “Simple,” “Professional,” and “Friendly.”

In this survey, using the same three product screenshots that were shown to assess visual design quality, we gave respondents two different tasks to understand trait alignment:

• One was a closed-word choice test, or desirability test, where customers were asked to select 3 words from a list of 30 that they would use to describe the screens shown.
• Another was a set of likert scales to measure agreement with statements, such as, “This product looks clean,” “This product looks friendly,” etc.

What we learned

In the closed-word choice test, we observed the following:

• The top three customer-selected traits for Segment, SendGrid, and Flex were in alignment with our desired product traits (“Clean”, “Simple”, and “Professional” were in the top three for all).
• Console was the only exception, where “Practical” appeared in the top 3 customer-selected traits.
• “Friendly” did not appear in the top 3 traits for any products, nor in the top 5.

From the likert scales, we observed the following:

• All four products scored highest in “Clean” and “Professional”.
• All four products scored lowest in “Simple” and “Friendly”, with “Friendly” getting the lowest scores across the board.

From both the closed-word choice test and the likert scale questions, it’s clear that our customers don’t find our UIs to be particularly friendly.

Establishing a cohesion score

How we did it

To establish a score for product cohesion, we showed survey respondents a single screen from Segment, SendGrid, Console, and Flex. All screens were similar in nature—a simple filter and table view—and after seeing the screens, customers were asked their level of agreement with the statement, “These products look cohesive.”

What we learned

Respondents ranked cohesion across Segment, SendGrid, Console, and Flex at a 2.47 out of 5, with 61.22% of respondents saying that they disagreed or strongly disagreed that the products looked cohesive.

When we asked why respondents gave the score that they did, the different navigations, the different color palettes, and the different page layouts emerged as the top reasons for the perceived lack of cohesion.

Based on these low scores, as well as the consensus in respondents’ verbatim responses, our customers are acutely aware that our product UIs are not cohesive, and they don’t particularly like it.

💡 Our key takeaways

Overall, this approach to our customer research gave us the learnings we were looking for. These were our top takeaways:

• Segment UIs scored highest in overall visual design—achieving 4.26/5 stars—followed by Flex UIs at 4.06/5 stars. With Flex ranking 2nd and Console ranking 4th despite leveraging the same set of components, customers are clearly attuned to differences in implementation using the same set of building blocks. This means investing in strong implementation, including resources and guidelines to enable effective implementation of the design language, is key to the success of this initiative.
• Customers don’t find any of Twilio’s product UIs to be particularly “friendly”. Because we want our products to feel more welcoming, bringing some of the warmth and personality of the greater Twilio brand into our product UIs will be a focus of design language evolution. Remeasuring the perceived friendliness of our new design directions will be critical in helping us evolve the design language into something that’s more in line with our product traits.
• Customers do not perceive our products to be cohesive, with cohesion scoring a 2.47/5. Survey respondents aptly noted that the different navigations, varying color palettes, and inconsistent page layouts across our products contributed to the lack of cohesion. While tackling these problems will not fully address the incohesion among our products, doing so will be a great place to start and will be a focus of our work in the design phase.

Learning from the market

Our goal

We chose to conduct market research before moving into concepting, because it provides strategic insights into our future flows, functions, and visual language. We needed to better understand who our customers are interacting with on a daily basis, and what they’re expecting their experience to be. And, because our specific focus is on creating a more cohesive customer experience across the Twilio product suite, we also focused on other companies in the market that have created seamless experiences within their own suite of products.

Researching product suites

Who we researched

We dove into Atlassian, Stripe, Intuit, and Google as our selected product suites. These are companies that have defined their brand personality and have a set of products that can seamlessly work together or separately.

What we learned

After examining these key players, we found that they understand the importance of having consistent UX patterns. They reduce the learning curve by giving customers something they are familiar with. Customers don’t have to think too much about what the next steps are to move forward when they’re already familiar with a given interface. For example, Google always keeps a primary set of controls—such as the product switcher and account menu—in the top right of the window across all of their UIs.

We also found that product suites have a cohesive personality across all digital platforms. Stripe and Google have a consistent visual language from their marketing landing pages to their product platforms, enabling them to build trust with their customers by giving them a cohesive experience throughout their entire journey.

Researching customer engagement platforms

Who we researched

At Twilio, we are vocal about becoming a leading customer engagement platform. So, with that in mind, we knew it would be beneficial to design for the future and research some companies in that space. We focused on Zendesk and Intercom, because they are changing the game in customer engagement.

What we learned

We found that Intercom and Zendesk understand the importance of a centralized dashboard. They give agents all the tools they need in one viewport. Intercom and Zendesk are also proactive and anticipate their users’ needs. They provide contextual links, relevant tooltips, and support on demand to make customers feel validated and confident to make informed choices. Another prominent finding among customer engagement companies is that they have established a friendly and approachable design language, which makes users feel comfortable and safe. With subtle visual cues—such as dramatically soft border radiuses and thoughtful pops of color—they are reassuring people that they are there to support them through any task.

Brand beacons

Who we researched

It’s also important to keep in mind what we call “brand beacons”. These are everyday brands that create real meaning in peoples lives. They are the brands our customers find inspirational, their go-to brands, and their brands that have changed their day-to-day. For this we looked at Airbnb, Apple, and Peloton.

What we learned

We found that brand beacons understand the importance of making sure their experience is easy and intuitive through high investment in design. Both Apple and Airbnb display the most important information instantly, and then reveal secondary information when it’s appropriate. They are meticulous about content hierarchy. Brand beacons also understand the importance of creating a meaningful connection with their customers—this is really what sets them apart from others. They understand that customers are value-oriented and want a personal connection. Now more than ever, empathy is imperative to any design solution.

💡 Our key takeaways

• Customers rely on shared UX patterns
• Companies are expected to have a cohesive personality across all digital platforms
• Customers rely on strong integrations
• Agents are more efficient if they have all the tools they need in one viewport
• Customers rely on us to be proactive and anticipate their needs
• A friendly and approachable personality makes customers feel comfortable
• Customers expect the experience to be easy and intuitive
• The industry is shifting to a more human-centered mindset

Learning from the inside

Our goal

To better understand the current status of our full product suite, we audited six key user flows across five Twilio products and interviewed six teammates across design and product management. Let’s dive deeper into three of the user flow audits.

Onboarding

Onboarding is understandably product-specific, and while visuals differed, there were a few key consistencies across that we liked. There was essentially no cross-sell to other Twilio products.

We like:

• A light touch of branding illustration to tie together web and product journeys
• Step components that guided users through the process
• A way to test or verify a new set up
• An easy option to start working right away
• The ability to request more support from our team or your own

We want to want to improve on:

• Identifying and exploring personalization opportunities
• Identifying and exploring cross-sell opportunities

Navigation

Navigation has been a huge conversation point since the onset of this work. The biggest discrepancy we noticed is the mixed use of left and top navigation, which is a reflection of how each product visualizes the relationship between Account and Navigation. A lot of questions bubbled up here around what a universal navigation might look and feel like.

We like:

• Use of product logos to differentiate
• High color contrast
• Product-identifying colors

We want to improve on:

• Creating consistent navigation interactions (i.e. expand vs slide out)
• Standardizing clear and consistent Account Management access

Creation Flows

Similarly to onboarding, the “creation” flow is quite product specific. We debated how we might standardize popular creation components like a side sheet, modal, or primary button. For example, Twilio Flex uses side panels—in the future, would we consider this a permitted product deviation or push for standardization?

We like:

• Use of step component across products
• Having a wide range of real estate options to fit different types of creation flows

We want to improve on:

• Clear guidelines for when to use different creation patterns (this applies across all flows too)
• Consistent language and formatting (see below: 7 slightly different blue primary buttons 😂)

💡 Our key takeaways

• Although the workspace <-> account model is similar across products, visual representation of the information architecture varies a lot.
• Onboarding stood out as a clear example of how we want to provide personalized experiences that engage our customers.
• There is strong internal motivation to align on a cohesive design system for all Twilio products.

Our principles moving forward

We distilled our research down into four primary learnings and opportunities that we will take with us as we move into the next phase of this work:

Establish a cohesive personality

Our customers appreciate companies that have a cohesive personality online, yet our research shows that cohesion across Twilio products is poor.

Opportunity: We will establish a design language for all of Twilio’s current and future products, while also creating key distinctions between products when it benefits the customer experience.

Turn up the friendliness

Our customer engagement competitors are working with design languages that are incredibly friendly which makes their users feel comfortable and safe, yet all of Twilio’s product UIs scored lowest in friendliness.

Opportunity: We will keep friendliness in mind as we evolve Twilio’s design language and create guidance for how to intersperse more friendliness into our UIs.

Create and leverage shared UX patterns

Customers appreciate when UIs within a product suite follow shared patterns, so they know what to expect across tools.

Opportunity: We will push for closer alignment across some of the most common UX flows, such as navigation, sign up/in, account settings, and creating/deleting.

Invest in implementation

Customers’ perceptions of the visual design in Console vs. Flex show that implementation matters.

Opportunity: We will create guidance and tools to make seamless implementation of the Twilio design language easier, while also pushing for a greater investment in visual design and UX engineering across all of Twilio.

What’s next

We’re really happy with our first phase of research and the insights that came out of it. Next, we will take these learnings and move into workshops and concepting, which will then evolve into full-fledged design directions that we will take to customers once again. Based on customer feedback, we’ll then finalize a single design direction and move into implementation of the design language evolution, design guideline creation, and presentational component development.

If this work interests you, stay tuned for more updates in this multi-part blog series as our work progresses!