News

The anatomy of a redesign

Alexander Griffioen, Head of Design at The Next Web, reveals the challenges of bringing a new design to the masses

AlexanderGriffioen

Alexander Griffioen, Head of Design at The Next Web, reveals the challenges of bringing a new design to the masses

AlexanderGriffioen

Redesigning a website that a company’s livelihood depends on is a daunting task. For us – an independent, ad-supported tech media company pulling about ten million pageviews a month – a steep enough decline in conversion could be catastrophic. This realisation makes you think twice about what you’re changing and why.

While some say evolution is better than revolution, years of accumulated design changes can lead to an incoherent patchwork begging for consolidation. When we set out to redesign our news platform late 2014, this was among the top reasons. Other reasons included a new content strategy, our desire to run a custom full-screen ad unit and the general realisation that a company covering cutting-edge technology should look pretty sharp itself. A great deal of the design decisions were based on experience and best practices, but when pioneering new things like our ‘canvas ads’, we could only rely on instinct. I can honestly say we didn’t get everything right in one go. While some new features were cutting edge indeed, they left some of our readers confused and frustrated. Page speed also suffered. Perhaps because when doing an ambitious, full-site overhaul with a small team, invisible aspects such as page speed tend to get overlooked. In short, our new site looked better than ever, but took longer to load and alienated some of its regulars, forcing us back to the drawing board.


While some new features were cutting edge indeed, they left some of our readers confused and frustrated. Page speed also suffered


In March 2016, almost a year after our initial redesign in April 2015, we launched a big design update fixing what we got wrong the first time. So how did we inform the design update? We listened and we measured. We’ve A/B tested beyond excuse and kept close tabs on social and our inboxes to find out what our audience was struggling with. A/B testing with Optimizely helped us optimise existing elements (ie adding rank numbers in a ‘most popular’ list increased clicks by 34 per cent and adding a timestamp below the post title on the frontpage increased clicks by 18 per cent). Our inbox also helped us identify the problematic elements that even spurred our readers to complain about them – which, by the way, we valued tremendously.

Some of the biggest changes involved the way we presented our categories on the frontpage. Where we used to have nine horizontally scrolling ‘shelves’ showing two stories each, we now have nine simple blocks (in a three by three grid) showing five, of which only the top two have an image. This was inspired by USA Today and the Netherlands’ most popular news site NU.nl. Not only did it save a few viewports worth of scrolling, we also reduced the number of images from 108 to 18. Other improvements involved making the UX for our canvas ads more intuitive, and, with now equal parts desktop and mobile traffic, rethinking our mobile strategy. The initial redesign would ensure all the content would render nicely on mobile; in the update we questioned if some content should even be shown on mobile in the first place.


Other improvements involved making the UX for our canvas ads more intuitive, and, with now equal parts desktop and mobile traffic, rethinking our mobile strategy


With hindsight being 20/20 it’s easy to say we could have done better right off the bat, but any redesign is a leap of faith to some degree, especially when many stakeholders are involved. Every department has its demands: editorial wants great-looking articles, sales wants more ad slots and sponsorship opportunities, and social wants share and follow buttons at every corner. Before you know it, you’re juggling six balls and losing sight of the most important stakeholder of all: your audience.

In the process, I’ve learned the importance of setting measurable goals. We wanted our articles to load faster. Great. How much faster? On what type of connection? Having absolute goals helps prioritise, make tough decisions and explain those decisions to the stakeholders.

Having all these stakeholders also makes a case for having a product manager. This will prevent your desk from becoming a one-stop-shop where each department will lobby for its needs. You’ll find yourself trying to please everyone, struggling to defend it from your users’ point of view. Forward them to a product manager and you’ll only have to argue with one person instead of six.

A year after our initial redesign, I’m extremely happy with the way that our site looks and performs right now. Our design update dropped page-load times by 45 per cent and we’re still optimising. Having five in-house developers in the same Slack channel with key editorial people and designers also helped us fix bugs and implement feature requests with amazing efficiency. The new site – codenamed Cyberdelia, a little homage to my all-time favourite movie Hackers – is now a solid foundation for further evolution of our product and design, with a codebase that’s more maintainable than ever. It was very much a textbook trial-and-error process, but we’ve accomplished everything that we wanted to achieve with our latest design update – which is no guarantee that we’ll get everything right from now on.


GET THE LATEST ISSUE OF WEB DESIGNER NOW


×