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.
Logo
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.
X’s brand toolkit
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.
Colors
The current brand color we’ve adopted from X is — yup, pure black (#000000).
For the “:hover” color, we opted for the darkest grey used in Emplifi’s own Soul Design System.
Naming
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.
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.
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.
