top of page

A Rapid Redesign of X (Twitter)
 

X-3.png

The brand reform of X is too far from perfection.

Chaotic Design System

Twitter underwent a dramatic overhaul of its identification system this year. In simple terms, they changed their name, logo, and even introduced a new primary color, black. However, this urgent overhaul also brought about problems.

 

Black is a very poor choice for a primary color - it's too common and lacks any meaningful brand recognition effect. I suppose X is aware of this issue, as they've added some inexplicable scratches to increase recognition on the black background. Furthermore, X has also retained Twitter's original primary blue. When these two colors are combined, it creates a significant sense of confusion.

My new design aims to address these issues by completely abandoning Twitter's blue color and focusing exclusively on X's black.

Visualproblem.png

Complicated Navigation Bars

Twitter has a main navigation bar, and some secondary pages have their own secondary navigation bars. These elements take up a significant amount of space (in red frames). X has adopted all of these features. However, we can clearly see that X is trying to repurpose this space for displaying tweets.

 

For instance, X has designed the header component to disappear when the tweets are scrolled up, but this leads to conflicts with the dynamic island and the status bar at the top of the phone, creating a visually cluttered experience (in yellow frames).

 

Additionally, the main navigation bar at the bottom of the screen is designed to become semi-transparent when the tweets are scrolled up, but this effect still makes the tweets reading difficult. I believe this is an attempt that doesn't add much value (in yellow frames).

My Solutions

I believe that to address the issue of excessive space taken up by the top and bottom nav bars, it is necessary to use a vertical nav bar design, allowing tweets to flow smoothly with a complete vertical column.

Furthermore, the space utilized by the vertical nav bar comes from the previously unused and unnecessary blank space below the user's avatar (in green frames), so it won't encroach upon the user's reading area.

Regarding the color aspect, I completely removed all Twitter blue from X, making black the sole primary color theme. Additionally, I will add white scratches on the black color blocks to enhance its visual distinctiveness, aligning the app's style more closely with its own icon.

 

Final Prototype

bottom of page