5 lessons from The Atlantic’s redesign
The Atlantic unveiled a redesign on Tuesday, and I spoke with Libby Bawcombe, The Atlantic's digital design director, via email about the redesign, what worked, what didn't and if they had any surprises. Here's what she said:
A/B testing helped with choices before the redesign:
"We continually measure how readers use our site," Bawcombe said. "We wanted to pressure test a lot of ideas before we officially kicked off the redesign. We started deploying regular rounds of A/B tests to try out new ideas and see what would stick with readers. This freed us from anxiety about predicting if we were making the single right choice. We often said, 'Let’s just A/B test it.' We created a list of A/B tests to perform post-launch and continue to make tests a regular part of our workflow."
A weekly cycle schedule was 'demanding but productive:'
"We did the project in-house and built a small working group comprising staff from the editorial and product teams, including the website’s editor, deputy editor, product director, a lead developer, the digital design director and the analytics director," Bawcombe said. "We outlined a pretty aggressive schedule for brainstorming, wireframes and designs, which we then regularly presented to stakeholders for feedback. The weekly cycle was demanding but productive: brainstorm > comp designs > review with working group > revise > present to stakeholders > revise."
Print was an inspiration:
"Drawing inspiration from the printed magazine also worked for us," Bawcombe said. "This is the opposite of what you might expect any legacy publication to say as it figures out its online presence, yet we identified the things we love about the magazine in order to inform our digital design. For example, we call our new navigation the 'flag,' and it is simply a rectangle with The Atlantic logo and a few buttons for subscribe, search and menu. But how did we get there? We tried dozens of standard web-type navigation treatments that spanned the width of the browser, and they all felt lifeless and flat. There was an aha-moment where I saw the printed magazine sitting on my desk, and thought, 'Why does The Atlantic logo look so perfect on the cover?' The answer is that The Atlantic logo on the printed cover is perfectly and proportionally contained in a space that’s carved out just for its use. So we reduced the footprint of our navigation to a rectangular space carved out just for the logo and the few necessary buttons. After some experimenting, we found the flag was visually most successful with some transparency overlaying imagery, and the flag has become one of the more beloved elements of the redesign."
They needed more time:
"A couple things forced us to rethink our processes," Bawcombe said. "At the beginning of the project, we should have allowed more time to review data in order to draw insights, and to put a laser focus on our editorial organizing principles. Many of our stakeholder meetings circled back to organizing principles of the homepage and how those would affect curation in reality. We did a few exercises to see if our organizing principles would hold up or fall apart when choosing real content to populate our proposed homepage."
"Another issue for us was our method of presenting design. I believe Mike Davidson from Twitter said 'A prototype is worth a thousand meetings,' which is so true. We would benefit from a better method for reviewing responsive designs for multiple viewports. We comped different views in graphics programs and reviewed them on their respective devices, but next time, we would like to work toward designing in the browser early on. Then we can see what happens between breakpoints and have a better idea of the UX and interactivity in real time. I suspect next time around, we’ll get designs into code much earlier."
Less was more:
"A big surprise for me is how everyone here was open to displaying fewer items above the fold on the homepage, which is a grand experiment in asking our loyal homepage readers to scroll more," Bawcombe said. "Our previous homepage was really dense and readers rarely clicked below the fold. We wanted the ability to give our stories some breathing room and have flexibility to showcase big stories with a long tail. With the new homepage, we have a number of different layout-modules that the homepage editor can position as she wants as she curates the homepage experience. Everyone is surprisingly comfortable knowing that the homepage will be laid out differently several times each day, every day. But believe me, we will be watching scroll-depth and engagement to see how this is working for our readers."