Thursday, March 28

Behind The Bruin: How we re-designed the website to offer a more digital-forward experience


(Aileen Nguyen/Graphics editor)


The Daily Bruin doesn’t write itself. Behind every copy placed on newsstands and every story published online, lies the journalistic process of hundreds of hard-working contributors, staffers and editors. Every day, important decisions are made to determine what is reported, how the reporting happens and in what ways we can best serve our readers. This is Behind The Bruin.

The 2019-2020 Online editor Thomas Gerard and Digital Managing editor Kristie-Valerie Hoang unveil the process behind re-designing the main site.

We’re wrapping up the current academic year and our jobs at the Daily Bruin, but we couldn’t leave without a grand finale: the launch of our re-designed website.

Built on Next.js, a lightweight framework for React.js, and a flexible application programming interface-powered backend, our new website is designed from the ground up to provide a more digital-forward experience to our millions of online readers.

One of our main goals was to provide readers with a platform that highlights the best of our digital journalism – the photos, videos, graphics and illustrations accompanying written content. We also wanted to solidify the Daily Bruin brand through standardized typography and colors to create a cohesive design language across our social media platforms and website so readers instantly know they’re looking at content produced by The Bruin.

Over the years, we’ve shifted our production efforts to an online focus, emphasizing reader interactivity beyond the physical print paper. This year alone, we’ve launched many online-exclusive projects, which have allowed readers to take a deeper part in both understanding the issues at hand, and the storytelling itself.

Importantly, this spring also marks the first time the Daily Bruin has published solely on digital platforms as the paper temporarily halted printing in mid-March. Since the suspension of print production, the re-design was all the more imperative because the website became the one and only home of The Bruin. In this age of online-only journalism, we felt it was necessary to have a framework that supports the content we produce and engages users on our site.

[Related: Letter from the editors: Daily Bruin will cease printing and move online for the rest of the academic year]

This website re-design is a project nearly three years in the making. Together designers, coders and content editors within Daily Bruin workshopped layouts for every part of the website from the homepage to individual articles. After these mockups were created, upgrading the site’s architecture alone took more than six months. When that was complete, the site was internally launched to the staff for initial reactions before a soft release to the public for additional testing. Through our online form, we’ve received a wide range of feedback from people all over the UCLA community including students, alumni and even a couple Daily Bruin veterans.

However, this isn’t the first makeover the Daily Bruin main site has received – this is actually the website’s sixth re-design since its initial launch in the 1990s.

The Daily Bruin homepage has undergone several design changes since the website was launched in 1994.
The Daily Bruin homepage has undergone several design changes since the website launched in 1994. Photo credit: Thomas Gerard

In its inception, Daily Bruin’s first online operations were written in plain HTML but quickly progressed to include images and custom styling. In January 2012, Daily Bruin launched Mojo – short for mobile journalism – a site specifically designed to match the “on-the-go” nature of digital news consumption in the age of smartphones. With our re-design, we wanted to revive Mojo’s mission to provide a great reading experience on mobile devices, as now more than 60% of the paper’s online users visit the site using a phone or tablet.

Aside from a clean, modern look, the re-design introduces several new features to create a more engaging browsing experience – including an integrated Twitter feed, infinite scrolling pages and responsive multimedia galleries. And by using a technology stack in-line with the rest of the newsroom’s digital projects, we’re able to integrate unique and engaging layouts into our regular production cycle as seen in our Columns from Quarantine” series and 2019-2020 USAC Officer Evaluations pages.

[Related: Interested in joining Daily Bruin online? Here’s how you can apply]

Here at the Daily Bruin, we’re committed to storytelling, and even more so, leveraging technology to enhance this mission. It’s incredibly exciting to finally release a project years in the making – but the work isn’t over yet. Daily Bruin’s online team is constantly looking for innovative ways to present the Daily Bruin’s content in the digital realm. From our latest interactive features to our data-journalism blog The Stack, our new main site is just one piece of our ever-growing online strategy and we are so excited for the creative possibilities the future holds.

Thanks for being online with us.

Logging off,

Thomas and Kristie

Hoang was the 2019-2020 Digital Managing editor of the Daily Bruin. She was last year's Social Media Director and was previously an Assistant Photo editor on the Arts and Entertainment beat before that. Hoang additionally covers campus politics, national and higher education and is a senior staff photographer.


Comments are supposed to create a forum for thoughtful, respectful community discussion. Please be nice. View our full comments policy here.