Last week, yet another Twitter app update was pushed out. This wasn’t your run-of-the-mill “bug and security fix” update; this was a complete rehaul. If I were to make an analogy, this app update was the equivalent of expecting to go to the salon to get your split ends fixed and getting bangs instead. The immediate feedback was reminiscent of the days when Facebook drastically redesigned its site, drawing positive and negative opinions from all corners; people are creatures of habit, after all. Regardless, Twitter still feels and operates like Twitter and this redesign presents an interesting case study in graphic and user interface design.

Twitter as a company

Twitter’s guiding question is “what’s happening?”. The goal of this redesign was to align its corporate vision with its application’s design. Twitter wants to be the place you go to find out what’s going on. Refinements to navigation, typography, and icons put emphasis on what makes Twitter, Twitter; its users opinions.

My closest comparison to Twitter’s redesign is what Instagram did last year. Like Twitter, Instagram rolled out an updated user interface, laced with white space, that put emphasis on your selfies and food pics rather than the app’s interface elements.

UI Updates

Unification

Designing user interfaces, especially for mobile devices, is a challenge. Phone screens come in a variety of sizes and aspect ratios. Android apps typically use a sidebar navigation. iOS uses bottom navigation tabs. Further, how do you keep the experience similar when scaling up to a desktop experience?

Old and New Twitter App Interfaces

Twitter’s redesign combines Android and iOS’s navigation. The bottom tabs are now less cluttered with four tabs (home, search, notifications, messages). There is now an Android-esque sidebar navigation for your profile and settings. The sidebar profile is a small change that goes a long way. It makes the app less chaotic. For Twitter users who are signed into multiple accounts, the ‘always there’ circular icon displays the profile pic of the active account. Never again will you retweet from your business’s account by accident (phew)!

Twitter has also jumped on the bandwagon of round profile pictures. Instagram, LinkedIn, Facebook, and now Twitter. This change is a way to unify the mobile and desktop Twitter experience. Personally, I don’t understand the benefits of round over square profile images. Does it look better? That’s up to the individual. I just think it’s an awkward crop waiting to happen. Isn’t more better?

Real Time Tweet Updates

Another cool feature: Tweets’ likes and retweets now update in real time. Literally see your Tweet go viral in front of your eyes.

Typography

Twitter has also refined its typography, using the Gotham font family on all its platforms. It also utilizes bolder typography on headlines and titles to make it easier to focus on what’s happening.

I have mixed reactions to this use of heavy type. On iOS, I think Twitter’s adaptation makes sense. Starting with Apple Music, and now everywhere in iOS 11 this fall, Apple has been introducing bold type to their OS’s interface. As such, Twitter’s UI will blend seamlessly between use of Apple apps.

Bold Type in Interfaces

Android suffers from customization and fragmentation between phone makers. Fonts and weights change between phones so Twitter can’t possibly have the same feel between apps on Android OS. Pick your poison I guess? You can have the same type on all versions of Twitter, or on the OS that the app is running on.

It may be a personal opinion, but I think the type is too heavy, especially at the font size being used. Apple’s crack marketing team terms it “big, bold, beautiful”. The thought behind it is to make UI elements larger, more visible, and more “tap-able”. I agree with the premise, but would dial it down from Gotham Ultra to Bold in Twitter, and from San Francisco Black to Bold in iOS.

San Francisco and Gotham Typefaces

Icons

Bird is the word? Not anymore. The iconic bird motif used to be front and center at the top of the Twitter newsfeed, but has been removed. This was pushed by Twitter CEO Jack Dorsey to remove the Twitter brand from the Twitter experience. He wants content, not Twitter, to be front and center.

Updated Twitter Icons

Subtle changes have been made to all of Twitter’s icons. Icons on the tab navigation are now outlined in grey, rather than a solid grey fill. These icons have also been given the “round” treatment like the profile pics, giving them a softer look. Other icon changes have been made specifically to cater to new users who may be unfamiliar with the Twitter experience. The home icon no longer has the bird perch. The reply button is no longer a backwards arrow, instead, a chat bubble. New users thought the button meant delete or go back to a previous page, rather than starting a reply/conversation chain to a tweet.

An interesting consideration made by Twitter’s designers was feedback from international audiences. This update shipped with a more square version of the Retweet button. In previous version it was more rounded, but research from Japan showed that people thought it was a refresh button to update their timelines. Apparently, there were talks to remove the quill as the new Tweet icon. In the western world it is considered a writing tool, but this doesn’t translate in parts of Asia

Other changes

Some more minute changes include the way Twitter opens links. In iOS, links now open in Safari View Controller, which is much faster than Twitter’s built in browser (and allows for auto-fill, reader mode, and ad-blocking). And, you can now easily switch to dark-mode from the Profile sidebar by clicking the crescent moon icon. It a super cool feature that used to be buried in settings. Unfortunately, still no edit button for Tweets (next update, please!!!).

Conclusion

Any redesign will inevitably invite a torrent of complaints from Twitter’s famously-opinionated users. We seem to have short memories though. Remember the brief hysteria when Instagram changed its iconic polaroid camera logo? We got over it. UI designers put consideration into new and international users when unifying its look across all its app platforms. Overall, I think the visual overhaul makes it easier for users to navigate Twitter and “focus on what’s happening”. “Huuuuuge” question… Has @realdonaldtrump tweeted about the redesign yet?

Leave a Reply