Goodbye, Twitter: Designing Emplifi’s Transition to X
Lukáš Vilkus
Lukáš Vilkus
February 7, 2024
Goodbye, Twitter: Designing Emplifi’s Transition to X

As you probably know by now, Twitter is no more. Since July 2023, the social media app was reborn as “X”, resulting in a whole new brand identity.

In this post, I summarize how our Product Design team managed this transition within Emplifi CX Cloud, our customer experience and social media marketing software.

Since I wasn’t able to find a similar article when I started redesigning Emplifi’s transition into the X era, I’m sharing the insights I gathered along the way. I hope it can save you the hassle of searching for it too.

Logo & brand colors

Twitter’s revolutionary X rebrand required us to align all graphic elements used in Emplifi to their new guidelines. Luckily, adjusting icons and graphic elements is the most straightforward part of the process.


The brand toolkit supplied by X shows how the iconic blue Twitter bird logo has been replaced with a minimalistic design of the brand’s letter.

As you can see in the link above, X’s brand toolkit is still quite basic. This is because Twitter’s transformation into X is itself happening in transitional phases, with changes unfolding gradually rather than all at once.


The current brand color we’ve adopted from X is — yup, pure black (#000000).

For the “:hover” color, we went from white (Twitter) to the darkest grey in our design system (X)

For the “:hover” color, we opted for the darkest grey used in Emplifi’s own Soul Design System.


Adapting to the brand’s new naming was a little trickier, resulting in several iterations.

First, we considered placing “Twitter” in parentheses after the name, “X (Twitter)”, to enable an easy transition for our users. But after testing this solution, we noticed awkward-looking buttons and UI elements with varying fonts and lengths.

The next iteration involved adding a “.com” extension after “X”, but this was also rejected due to inconsistencies with other social media platforms without such endings.

We ultimately decided that “X” would be sufficient for regular use. One exception is in tooltips used to explain social media metrics, where we add the word “Platform” before “X” to ensure clarity.

In addition to the name, there are also new terms imposed by X’s rebrand:

What’s changed

Twitter → X
Retweet → Repost
Retweeted → Reposted
Tweet (n.) → Post
Tweet (v.) → Post
Twitter (in metrics tooltip) → Platform X

But as you’ll see at the end of this article, tackling all the text changes is not as simple as updating the visual brand elements.

“X” pain points

Visually speaking, the biggest pain point is the high potential for the logo and name to appear misconstrued. Since “X” is a single letter, it can appear as a disruptive element in the context of other platforms.

To mitigate this, I recommend adding a tooltip with an explanation upon hovering over the logo. You may also want to incorporate a label like “Platform X” so the reference to the app is clear, as I mentioned earlier.

Here you can see how we use “Platform X” instead of just plain “X" in the metric description tooltip

Clash with TikTok

Another hiccup we encountered involved visualizations of data that are sourced from various social media profiles. Our aim is always to present these data visualizations in a way that’s transparent and immediately clear.

Before X, Twitter was represented in blue, and TikTok had a default black color scheme, matching each respective platform’s brand colors. However, with X introducing a similar all-black scheme to TikTok, we had to revisit this visual representation.

We stopped assigning platform-specific brand colors in charts, focusing more on high-contrast combos

To solve this, we decided to stop assigning platform-specific brand colors in our chart and graph visualizations. Instead, we opted to assign colors at random, with a focus on ensuring high contrast to maintain clarity and ease of understanding.

Search limitations

Another challenge came up with Emplifi’s search feature, which requires users to input a minimum of three characters before triggering a list of relevant search results.

While this limitation is in place for performance reasons (a topic I won’t go deeper into here), the renaming of Twitter to X has forced us to adjust this functionality so that it triggers an action from the first character input.

Taking it slow

There’s a lot more to come before the transition is complete. Following Twitter’s lead, we’re taking the gradual release approach. In our case, we’re changing visual elements first, followed by text elements.

The reason is that thanks to our robust design system, visual changes are very efficient for us. For the record, visual changes took 3 days, while the text change require 10 times that long.

The difference in complexity is mainly because we can’t just locate the Twitter programming string and replace it with “X”. The involvement of different APIs and variables requires collaboration with individual development teams, and that takes time. But we’re getting there, slowly and surely.

Wrapping things up, I hope this gives you a good sense of how we’re tackling the whole X rebranding situation at Emplifi, and that it can serve as a helpful reference. If you’ve got any questions, feel free to hit me up in the comments.