Design

Design, UX, UX and Design

Redesigning The Chronicle of Duke University: A look inside the design and development process behind the new website of Duke's independent student news organization

A few weeks ago, we launched a new website for The Chronicle, Duke University’s independent news organization. This redesign represents a marked difference from the past, both in the experience and visual look and feel of the site. The result is a fresh, modern news resource, well suited for the daily information needs of the Duke community and beyond.

There’s no need to expound the challenges facing the journalism industry; college newspapers are no exception. On top of facing diminishing revenue and the grind of daily news production, they also have the added challenge of training the next generation of journalists.

The Chronicle has gone through its own slew of cuts, reducing its print production to two issues per week last year, a gradual decline since I was editor-in-chief in 2011 to 2012—the second to last year of daily weekday issues. But there is cause for celebration as well. The Chronicle is one of the few college papers that remains fully independent from its university, offering the student staff a host of benefits and autonomy. A strong board of directors and active alumni help shepherd the paper and staff. And last year The Chronicle saw the highest digital sales and some of the highest performing web metrics, according to self-reported data from a coalition of 35 university news organizations, said General Manager Chrissy Beck. Finally, though not specific to The Chronicle, the student staff is open, eager, and wildly talented, which came through in full force during the redesign process.

Six-month process

The Chronicle was lightly retouched two years ago, with the main focus of trimming load time. This year, we decided to undergo a full redesign in order to ensure The Chronicle’s site best reflected the students’ editorial goals.

The entire process took about six months from start to finish, and involved folks from every spectrum of the paper, from the current editor and student staff, alumni working in the news industry, general manager and advertising team, web development partner, and board of directors. We worked as a scrappy remote team, making decisions over email and video calls.

Where we started

We kicked off the project by taking stock of the original website. First, we audited the existing dukechronicle.com, and then conducted a competitor analysis of 10 college and professional news sites.

Desktop and mobile screenshots of the original homepage (left) and article page (right)

What did we conclude? Our website was functional, but lacked hierarchy. Various sections and elements vied for users’ attention. Outdated elements, like inline scrolling units, littered the interface. The Chronicle felt bloated, weighed down by a multitude of fonts and colors, many of which weren’t accessible.

Snapshots from the audit showing, among other things, nearly a dozen different typefaces and shades of grey used across the site

We held a brainstorming session with students about what was working and not working with the current site. We identified a few key areas we wanted to iterate on:

  • Improve the hierarchy of the key pages, like the article page and homepage

  • Ensure stories are easy to read across all screen sizes

  • Develop a flexible type system that suited reporters’ needs

  • Clarify how our audience can interact and engage with The Chronicle

  • Overall, align the website more closely to The Chronicle’s brand

From there, we carved out tracks of work: a product vision and feature development plan, a light brand refresh, a redesign of key pages, and a type and color system that would work for The Chronicle’s website and other digital footprints, like newsletters. Unfortunately, existing metrics were slim, and so instead we primarily relied on our past experiences in media to inform our work.

We delivered mocks in May, and SN Works, the web development company that runs and maintains the website, built the site during the summer. After a few weeks of fine-tuning in August, we launched the redesigned dukechronicle.com on Monday, August 19.

Improvements

Superior reading experience

The new site is anchored around a superior reading experience on the mobile article page, in line with our understanding of how our audience reaches us now (by navigating directly to article pages while on their phones). We adjusted the typography to make articles easier to read, and added recirculation modules and an exposed top navigation to encourage better wayfinding. A host of smaller tweaks — visible photo captions, relative timestamps — add polish to the page.

Stronger signals

We wanted the homepage to cast The Chronicle in the best light possible. While the original design felt scattered, our new design gives the audience strong signals to help them find what they need more efficiently. There are three main sections to the homepage — a featured area with three hand-picked stories, a “top stories” list curated by Chronicle editors, and a reverse chronological list of everything else. On mobile, the list of stories is twice as dense than it was before. We also emphasized editorial efforts, like recruiting, newsletters and podcasts, that better fit with the staff’s 2019 goals.

Visual refresh

Visually, we gave site a much needed facelift to align more closely with The Chronicle’s brand. We streamlined our typography from eight different typefaces to three, and adjusted the color palette to make it more accessible. To supplement The Chronicle’s signature blue, we introduced a coral accent color, inspired by past print editions of the paper.

Other changes include new ad sizes (billboard and leaderboard sizes), and better, detailed metrics so we could understand user behavior and iterate more readily in the future.

Reflection

We didn’t conduct a full redesign or rebrand, and so many areas—like reassessing the information architecture and navigation or updating the logo—were out of scope. Additionally, we have much more to do to make the site fully accessible, though we’ve come far from where we started.

We hope the refreshed site sets the staff up well for this year and many more to come. Visit us at dukechronicle.com, or follow us on Instagram, Twitter, or Facebook.

* * *

This project was a tireless effort by many people including, but not limited to:

Product Management: Dan Carp
Design: Sanette Tanaka Sloan, Julie Moore
Business and Advertising: Chrissy Beck, Trey Fowler
Development: Mike Joseph & SN Works
Editorial staff: Jake Satisky, Michael Model, Likhitha Butchireddygari, Bre Bradham, Nathan Luzum, Derek Saul, and more

Special thanks to The Chronicle’s board of directors for their support.

UX and Design, Design

A Highly Subjective Guide to Design Prototyping Tools

A few weeks ago, my design director asked if I’d mind making a quick six-screen prototype that we could test with users. The mocks were done, and all I needed to do was string them together into a prototype that we could load into our testing suite.

I flipped through my mental rolodex of prototyping tools. Sure, I said. I estimated a few hours, tops. Those few hours soon stretched into a week.

Design, UX and Design

Three questions I asked myself after attending IxDA’s Interaction 17

Last week, I attended Interaction 17, Interaction Design Association’s annual conference. Alongside more than 1,000 other designers and makers, I listened to dozens of presentations about applying design to real world problems. I heard folks detail the challenges of expanding internet access in far-flung regions of Africa, designing interactions for automated cars, and staying mindful while still engaging with wearable technology products

Design, UX and Design, Journalism

Speaking at Society for News Design's conference in Charlotte this April

I’m thrilled to say that I will be speaking at the Society for News Design’s conference in a few months. I’ll discuss how I approached adapting the design process for a voice-based interface, inspired by this case study I wrote last year for Vox Media's product blog. SND interviewed me for their website, and I figured I’d repost it here. Enjoy!