The secret of successful redesigns: what Ted got right and what Twitter got wrong

Wdd Logo.
February 14, 2014
The secret of successful redesigns: what Ted got right and what Twitter got wrong.

thumbnailThere was a time—it's hard to imagine now—when most businesses did not have a website. In the early days of the Web, almost every business that wanted to commission a website was taking its first steps into the online world.

As time moves on it's inevitable that virgin ground is harder to find.

It's rare that a startup is able to fully invest in design—even if they would like to—and the less they invest in design, the sooner they'll need to redesign. There certainly are new companies, new projects, new promotions that need designing; but the vast majority of design work is redesigns.

Redesigns can be fraught with difficulty; the client may be carrying misconceptions left by the previous designer, the current site may be tied into the company infrastructure, most difficult of all it's common that your point of contact at the company will be responsible for the earlier design.

As well as the problems, redesigns carry with them one intractable benefit: they provide an objective point of embarkation.

When is a redesign not a redesign?

Answer: when it's a design.

Most redesigns, despite the name, are in fact simply designs. By this, I mean a designer has assessed the problem posed by a client and provided a solution.

Where redesigns differ, is that a designer assesses the problem posed by a client, and also assesses the existing solution, before providing his or her own solution.

Webdesign is a unique discipline in that we possess an unrivalled ability to monitor and quantify almost every aspect of our design decisions. Or, in the case of a redesign, someone else's decisions. The benefit of a redesign (as opposed to a design) is that there is a focussed direction to take. Much of the legwork has been done. Even if the client's current site is a total failure, you can get ahead of the game by finding out exactly why.

The aim of any redesign is broadly the same regardless of the project in question: a redesign seeks to reassess a problem and make improvements on prior solutions. A redesign is more extensive than a design, it takes account of more and it digs deeper. The essence of the redesign philosophy is that there is a problem underlying the project that is in a state of flux so that it surpasses any single solution.

A design tends to be less successful than a redesign, because a design takes one of two approaches: it either finds a solution to the original problem—in which case previous lessons learnt are ignored— or more commonly, it finds a solution to the existing solution—bypassing the problem altogether.

Ted's redesign

Last month, ted.com, the Web's supremo site for innovative presentations released a redesign.

Ted talks are one of the premier sources of cutting edge ideas and in the last seven years Ted has grown from half a dozen videos to more than 1600. For many people, delivering a Ted talk is the pinacle of public speaking and Ted's brand reflects the forward-looking nature of the organization.

However in the last few years, the hub for cutting-edge ideas has started to look distinctly dated. Confined to a restrictive grid too small for desktops and too rigid for mobile. A redesign was essential for Ted's continued progression.

home

ted.com's old homepage (left) and the redesign (right).

The redesign that is currently in public beta is a superlative example of intelligent and sophisticated design, produced by a team that clearly has an in-depth understanding of both of the history of Ted's site and a vision of where it might proceed.

talks

ted.com's old talks page (left) and the redesign (right).

The first thing you'll notice is that the restrictive 960px grid is gone. In its place is an expanding slider that fills the available screen real estate, whilst maintaining the egalitarian approach to content hierarchy. The site is now fully responsive and vitally its content is accessible on mobile devices, maintaining pace with technology and in-keeping with Ted's brand image as a progressive force.

mobile

ted.com's old ‘mobile’ version (left) and the mobile friendly redesign (right).

The ted.com redesign is an exceptional example of how a site can reassess not only its current problems, but the problems that lead to its current solutions.

Twitter's ‘redesign’

It seems inevitable that every major website will eventually redesign—or more accurately, reskin—itself inline with the flat-design trend that has steam-rollered the Web over the last year or so.

Falling into line last week is twitter.com, whose designers have now rolled out the latest version of the insanely popular social network, worldwide.

A quick glance will tell you that little has changed: the basic layout is still in place; there's a main panel containing a timeline of messages, and a column on the side featuring various information panels. Infinite scrolling is still in use, as is the sticky header. The only appreciable change is on the header, which has lost most of its gradients and adopted a flat-friendly color palette—purportedly to bring it inline with Twitter's mobile offerings.

The design is a let down at best, at worst a half-hearted gesture made for its own sake. It fails spectacularly because rather than reassess the original problem, the team have mistaken the previous solution as a problem in its own right.

twitter

The new twitter.com.

Instead of asking, "How can we solve this problem?" the team at Twitter asked, "How can we modify this solution?" They have, in effect, provided an answer to an answer, a superficial process of restyling elements best reserved for Dribbble rebounds.

Despite the fact that the majority of users access their Twitter timeline via dedicated applications such as Tweetdeck and Tweetbot (in 2013 75% of users chose to access Twitter via a smart phone) the team have retained the focus on the user's timeline, a feature no longer central to the site's main usage (account management).

99% of good design is redesign

Design is about solving problems, but it's rare that your first solution is your best. Quality is achieved through iterations: designs are redesigned and redesigned; concepts receive incremental improvements; solutions evolve.

Ted.com redesigned by focussing on their core problem—the need to display videos on the devices their audience favors—and then assessing where their existing solution fell short. Twitter.com redesigned by focussing on their existing site, and applying a new skin.

The single largest error you can make when redesigning is to mistake the current solution for a problem to be solved.

The secret of a really great redesign, is examining not just the existing solution, but the problem that it was devised to solve. That's the only way to objectively gauge the changes that are needed and provide a measured and considered solution of your own.

Have you worked on a redesign lately? Do you prefer to start from a blank canvas? Let us know your thoughts in the comments.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…