guides

10 Excellent Website Redesign Examples with Before & After

Here are examples of successful web redesigns with their respective before and after transformation

Keeping your website looking fresh and attractive is a vital part of engaging with key audiences and building a solid marketing and sales outreach strategy. Website redesign should ideally take place at least every five years or less. Here’s a detailed look at some large scale website redesigns that have been widely successful and resulted in higher conversation rates. 


Table of Contents
  1. Reddit
  2. Dropbox 
  3. Instagram
  4. Twitter
  5. Mailchimp
  6. Art Institution of Chicago
  7. Usertesting
  8. Panos Pictures
  9. Rev.com
  10. Slack

1. Reddit’s major redesign

Before website redesign

A screenshot of a social media post 
Description automatically generated

After website redesign

A screenshot of a cell phone 
Description automatically generated

The new Reddit highlights easy navigation with a hamburger menu on the left side of the screen, that presents your feed, profiles and any subscriptions you have. There are also a selection of buttons that Redditors can use to change the format of the website according to their individual preference. Card view is a flatter appearance like Facebook, while the compact view lets you view myriad content with an effortless scroll. 

2. Updating the Dropbox Brand

Before website redesign

A close up of a street 
Description automatically generated

After website redesign

A screenshot of a cell phone 
Description automatically generated

The older version of Dropbox was very content-heavy, with minimum white spacing between each row and small icons that were often difficult to understand. There was no clear distinction between options such as New Folder, Bin and Upload. Now, information is clearly displayed, with additional features such as a thumbnail view to get a glimpse at each file and check who the collaborators are on a file. For better privacy and security, there is more obvious account separation as well.

3. Minimalist visuals with Instagram

Before website redesign

A screenshot of a cell phone 
Description automatically generated

After website redesign

A screenshot of a cell phone 
Description automatically generated

Instagram got a website overhaul back in 2018, but most of the popular features remain unchanged. You can still scroll through your feed and double-tap to like photos, comment on images and browse through other people’s profiles. But the square-shaped profile photos are now rounded, while the grid of images placed above the user name is no longer there. 

The Instagram blue is replaced by a combination gray, white and black theme that is attractive and modern. Overall, the interface is simplified with a flatter design versus the older preference for skeuomorphism. The Instagram app suite was not very consistent in terms of its look and feel. The redesign process helped to integrate all aspects of the app for a cohesive appearance.

4. Simpler layout for Twitter

Before website redesign

A screenshot of a cell phone 
Description automatically generated

After website redesign

A screenshot of a cell phone 
Description automatically generated

Compared to the old layout, Twitter now offers two columns for content instead of three. The feed is located on the left side of the screen, with trending topics and user suggestions placed on the right. There are added options to include emojis in tweets, bookmark and explore. Trends section is more functional and shows marked improvements with updates. When you compose a tweet, the pop-up has a distinctive appearance which is an open space instead of a rectangular box. The “tweet” icon is now moved to the top of the page. 

5. Mailchimp’s New Look

Before website design

A screenshot of a cell phone 
Description automatically generated

After website redesign

A screenshot of a cell phone 
Description automatically generated

While Mailchimp’s website was functioning perfectly well earlier, the company wanted to make a statement and highlight a clear value proposition to its growing customer base. The older version of the homepage was clean and easy to navigate, with a top menu and an organized landing page decorated by a hero image. The redesigning has resulted in quirky imagery and a brighter colour palette, which strays away from typical typeface and wordmark. 

6. Powerful engagement at the Art Institute of Chicago

Before website design

A screenshot of a social media post 
Description automatically generated

After website design

The new website for the Art Institute of Chicago is much improved in UX terms. Firstly, it’s fully responsive and can now be read comfortably on any device. The top navigation has been simplified to include a handful of clear links without clunky drop-down menus. There’s also a space for temporary announcements.

The carousel has been dropped in exchange for a single hero video, adding movement and life to this primary graphical element. Exhibition info is now presented over an opaque gray layer, vastly improving readability.

7. UserTesting: enhances the customer experience

Before website redesign

A screenshot of a cell phone 
Description automatically generated

After website redesign

A screenshot of a cell phone 
Description automatically generated

The new UserTesting homepage is crafted beautifully, with a light and easy to understand page with the word count reduced by 25%. The carousel that was present in the old version of the landing page now showcases good quality images that are consistent with the brand. 

8. Panos Pictures’ website revamp

Before website redesign

A screenshot of a social media post 
Description automatically generated

After website redesign

A group of people sitting at a table 
Description automatically generated

The Panos Pictures website provides great elements that adapt to a user’s display. There is no longer a navigation menu on the top, as it is hidden behind a hamburger menu icon htat expands when selected. The brand logo and search fields did not undergo any change. 

9. Rev.com

Before website redesign

A close up of a device 
Description automatically generated

After website redesign

A screenshot of a cell phone 
Description automatically generated

The previous version of Rev was looking like it needed some upgrades to bring it to a 21st century audience. The main features was the carousel in the center the three values of the company shared – quality, speed and service. With the website revamp, one can find a menu bar above the carousel, that connects you to the company’s main services, and these services were linked to retro graphics, and some the different pricing levels of plans on offer. 

10. How slack.com shaped its image

Before website redesign

A screenshot of a cell phone 
Description automatically generated

After website redesign

A screenshot of a cell phone 
Description automatically generated

In the older version of the landing page, slack.com had a flatter appearance that belonged to an earlier decade. Instead, now, there is an easily accessible menu on the top section with details such as pricing, location and ‘find your workspace’. In case the intention is to be more proactive, you can find out if things are okay. Now slack allows business owners to directly communicate with customers regarding comments and queries with a few configurations. 

With this impressive array of the latest UX designs being used for websites, most of them have a carousel to give an immediate glimpse into unique products or services. One of a kind imagery, tailored content for better engagement and other multimedia alternatives can significantly boost the number of visitors to the landing page. With a tendency towards less text and more visuals, many of the websites reviewed show that the carousel is no longer a primary element needed to develop a top notch website.


Joel Koh

Joel Koh is the director of One X Tech's Technology Management & Digital Solutions practice. He leads the firm's Asia Pacific office efforts in continually evolving and growing new capabilities to serve clients in technology-led transformations.

Share this guide