clock menu more-arrow no yes mobile

Filed under:

Launching a new homepage for Curbed

How we created a branded experience atop a unified product

Last year we launched Curbed on a new, unified version of Chorus. We called the Curbed launch “the start of a new era at Vox Media,” where we could iterate on our platform more frequently and universally improve all of our brands’ websites with each new iteration. This week, we’re seeing those benefits firsthand with a relaunch of Curbed on our new homepage product.

Back in August, we kicked off a project to create a unified homepage product for all of our brands. This was a challenging task, as each of our brands had incredibly custom, robust homepages. We didn’t want to create a mashup of all of our existing homepages; instead we sought to understand the value of a homepage today and how it should serve audiences, editorial teams, and advertisers.

We started the process of designing a new homepage product with an extensive research phase. With the help of our Data & Analytics team, we analyzed current user behavior across each of our homepages. We also created a user survey to learn how our audience finds and engages with the news. Nearly 1,700 users across our eight brands responded with their thoughts. Additionally, we reviewed the user feedback Curbed’s engagement team collected following their initial launch last year.

After distilling all of that research, one thing was abundantly clear: our homepage audience typically consists of return visitors who are looking for fresh content since their last visit, and we needed to build an experience that supports that goal. Our research also showed that our current homepages were too complicated, cluttered with many modules without clearly indicating what’s new and what’s important. And of course, we heard that the pages needed to load more quickly. We needed to simplify and do less.

Armed with our findings, we created a new homepage system that enables fast discovery of new content, helps brands to feel distinct, and most importantly, allows us to evolve the design over time in accordance with user behavior. In November, we launched our first brand, The Verge, on the new homepage product. Since then, we’ve been able to test whether our assumptions about the new homepage were accurate, and apply the findings to our second brand to launch on the product—Curbed.

Relaunching Curbed on our new homepage product

With The Verge homepage launched and vetted in the wild, we could address Curbed in a new light. We kept four lessons in mind: ensure content is dense and scannable, support more brand expression, clearly signal content, and strive for accessibility.

1. Content needs to be dense and scannable

We initially assumed that because Curbed’s content was so visual, large photos on mobile would be valuable. However, devoting so much space to individual stories meant there were less stories on the screen at once. Curbed users felt like the brand was actually producing less content after the initial launch.

Our new content river is much denser and makes better use of limited real estate on small screens. We also made content easier to scan by reducing the amount of noise surrounding a story and removing content breakers, which previously interrupted the flow of the content river.

The first screenshots shows a larger, more spacious content river as opposed to a denser content river.
Curbed’s old content river compared to Curbed’s new, denser content river

2. Support more brand expression

Another learning that emerged from our homepage research—brand experience is more than colors, logos, and typography. In addition to offering opportunities for visual brand expression, the homepage product had to empower editors to tell stories and adjust the user experience in accordance with their editorial strategy. We designed the homepage product to be flexible enough to support this level of brand expression.

Here’s how it played out in practice. We learned from Curbed editors that they want to be able to promote three cyclical stories per day, as well as a few large longform feature stories and seasonal maps. These features and maps are persistent pieces of content that may live on the homepage for days or even weeks. In response, we designed a cover layout that promotes three latest news stories, as well as two long-term stories in a separate module.

We designed the homepage product to make it easier to add brand details in a scaleable way. One way we did this was by designating specific areas on-platform for brand expression.

We intended for the cover to be a prime spot to showcase the brand, and so we spent significant time exploring how Curbed’s design language could be better reflected in this area. For instance, we integrated more shades of Curbed’s large color palette and applied their signature geometric corner shape to the evergreen bar.

This image shows a screenshot from Curbed’s style guide with geometric shapes and its translation to an element on the homepage.
We used Curbed’s signature geometric shapes as shown in its original style guide in the homepage evergreen bar.

In addition to color and type, our explorations covered information architecture, layout, design elements, and other visual details. The gif below shows the evolution of our designs.

3. Clearly signal content

Through our research, we learned that our existing homepages were too difficult to navigate. Users had trouble understanding what content was new and what they ought to pay attention to. We wanted our new homepage product to show which content was fresh and recently updated, while still communicate important pieces of content, like large features, maps, and videos.

We strengthened the visual hierarchy and displayed clear signals to delineate content. Our cover places a greater emphasis on the top story in comparison with the following two stories, and depicts the evergreen bar as its own distinct module. We call out prominent longform feature stories in the content river, and reserve labels for persistent stories in the evergreen bar and special content types, like longform feature stories and storystreams.

4. Strive for accessibility

Vox Media has made strides in improving the accessibility of our sites since Curbed’s design language was initially defined, but we still faced some hurdles. For instance, the link color from Curbed’s original style guide did not have enough contrast with the homepage background color to pass contrast tests as defined by the Web Content Accessibility Guidelines. We explored a few options, including changing Curbed’s color palette, but ultimately decided that drastic changes to the design language were out of scope for this project. We compromised by bolding our links. While still unaccessible, the links will hopefully benefit from having a second visual indicator that helps them stand out from body text.

Two mobile devices showing Curbed’s homepage before the redesign and after the redesign. The first device shows unbolded byline links; the second device shows bolded links.
We bolded Curbed’s byline links as part of the homepage project

The power of a unified system

We completed this project in roughly two months. The reason we were able to work so quickly is due to our unified system, where each of our brands’ homepages are different expressions of the same product. In practice, this means we didn’t need to completely reinvent the crux of the homepage product, like our content river or single-story covers, for Curbed’s relaunch, since we had already done ample exploration and vetting with The Verge launch. Working from one baseline product also means that we can roll out improvements incrementally—for instance, in the past few weeks alone, we’ve rolled out an update to our timestamps, reducing the amount of visual noise around a story.

You can view the new Curbed here. Curbed is just one part of the puzzle—our team is currently in the midst of moving the rest of our brands’ homepages onto the new homepage product. Look for more on that process soon!

Share your thoughts with us @yeseniaa and @ssktanaka, or in the comments below.

Screenshots showing before and after the relaunch project., before and after the relaunch

Many people worked on this project to make it a success, including Chris Haines, John Fuller, Ally Palanzi, Greg MacWilliam, David Zhou, Ben Alt, Jesse Young, Jason Ormand, and Krissy Kingwood from the Unison team; Jon Douglas and Nancy Seay from the Quality Assurance team; as well as Kelsey Keith, Jess Dailey, Mercedes Kraus, Sally Kuchar, and the entire Curbed editorial team.

Special thanks to our colleagues Holly Gressley and Ryan Gantz for their thoughtful edits.