Originally published on Twilio's blog.
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.
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:
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:
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.
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.
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).
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 [Segment] UI is clean, organized, professional, and uses an appropriate amount of color coding. I think all in all the most important and relevant features are prioritized toward the top and there is minimal text on each screen. Very good use of toggles, color, and design elements to make [the] UI easy to understand and navigate.”
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.
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:
In the closed-word choice test, we observed the following:
From the likert scales, we observed the following:
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.
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.”
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.
“The colors, the presentation and table view look quite different. I don't like that they look like they were made by different companies completely with the branding, the content used, the differences in how cluttered some are vs. clean others are, etc.”
Overall, this approach to our customer research gave us the learnings we were looking for. These were our top takeaways:
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.
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.
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.
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.
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.
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.
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.
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 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 want to want to improve on:
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 want to improve on:
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 want to improve on:
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:
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.
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.
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.
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.
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!