UX & Product Designer
theverge3.png

The Verge 3.0

 
Verge3.0_Full_Black.png
 

The Verge 3.0

 

In November 2016 we relaunched The Verge. As part of this relaunch, we crafted a new editorial mission statement and design system; refined the logo; redesigned the website and assets for other platforms; overhauled the homepage; and moved the entire site to our unified platform—all in less than three months.

My work primarily involved that last portion—launching the Verge’s website on the new platform. The new platform is the product of my team’s larger, two-year initiative to unify our eight brands’ websites (more than 350 separate sites in total) onto a single platform that operates under one design system and codebase. This platform is faster, more robust, and built with multiple publishing outlets in mind. Most importantly, it’s a shared system across all of our brands, meaning that we can design and code once and push changes across the board.

And herein lies the challenge of this project—building a heavily branded website atop a platform that is designed to be universal and systematic.

Before we get into the full case study, here is a quick look at the site before (left) and after (right):

 
 
beforeafter.png
 

Challenge

Redesign the Verge’s website in light of its new identity and design system. Consider how changes will affect Vox Media’s other brands and the overall platform. Address editorial needs, while still protecting the integrity of the system. And finally, execute the design so it is accessible, robust, and translates well to the other platforms that publish our content.

Solution

We assigned specific purposes to each area of the site to help guide the design direction. (For example, the cover serves to express the brand, so we designed both the structure, look, and functionality to promote the Verge as much as possible.) This approach helped us design systematically and work toward a product that serves all eight of our brands, while still making this particular website feel distinctly like “the Verge.”

Results

We relaunched The Verge on time and within our code budget. Now built on our underlying platform, the site is more organized, structured, and maintainable than it was before. Overall traffic to the new homepage went up by 2% in pageviews, and return visits saw a 1% increase post-launch. The site is also significantly faster, with content loading 25% to 50% faster in initial tests. 

Role

As a designer on the platform team, my work largely involved marrying the new design direction to all the visible components that make up our platform (articles, feature stories, the homepage, and so forth). In total, several dozen individuals contributed to this project (all of whom are credited here).


 

Process

Research and Explorations

Our brand development team spent time interviewing, researching, and understanding the Verge at its core, the impact the staff wants to have, and the role the brand plays in their audience’s lives. Together with editorial, the team then turned their insights into a mission statement to guide their brand. The brand development team developed a design direction called Pathways and eventually a rough style guide. 

My team then took the design direction and explored how it could work on a website. We had a tight deadline, and so I designed what was needed at any given moment—whether that was wireframing ideas, creating a polished mock, or working with our engineers to refine in code. In all instances, I applied the branding to our platform product, while simultaneously refining the platform based on the new needs that emerged.

Platform First

The Verge (really, all of our brands) pride themselves on being quirky, unique, and wholly personalized. But, because my team is tasked with creating a platform that powers hundreds of websites, not just the site for the Verge, every decision we made had to be routed in a system. We worked extensively with the Verge editors and reporters to balance these two goals. With every editorial ask from the Verge, we tried to break down the underlying needs, and find a solution that solved the problem yet still made sense for the platform. 

Part of the way we achieved this was by dedicating specific areas of the site to primary goals. By clarifying the purpose in such a granular way, we could better justify and explain our design decisions to the Verge staff. For example, the masthead atop the homepage is a prime spot for brand expression, so we created the ability to cycle through custom mastheads, and generated a ton of designs for the Verge editors to use.

 
 

On the flip side, the reverse-chronological news feed on the homepage serves our users first and foremost. From our user research, we learned that our homepage audience is interested in timely and new content. The feed of stories on the Verge’s existing homepage didn’t serve that purpose as clearly as it could.

In the news feed explorations below, I focused on making content easy to skim and digest. The feed is condensed, and headlines and bylines are emphasized. 

 
 
 
 

The final feed maintains this simple reverse-chronological list of stories, and brand expression is limited to color and typography.

 
 
 
 

Fortunately, our platform is designed to support brand expression in a controlled way. For instance, Verge editors needed a way to call attention to a larger story within the feed. I explored different ways to blow out feature stories, as well as tie in some of the branding. Verge features tend to have simpler headlines and descriptive subheadlines, so the explorations below explore promoting the subheadline to varying degrees. 

The branding is distinct and commanding, but boils down to a feature slot in the river.

 
 

Sometimes, a few editorial needs escaped our initial research, and the needs were significant enough to justify a change to the core platform. Before making changes, however, we mocked up ideas across multiple brands (like this timeline view of stories) to see how they played out.

 
 

Often, our platform work fed back into the brand development team. One of the signature visual elements that the brand development team created is an angled line in a bright illuminating color, which we call a pathway. I explored how to apply that pathway language across the site—labels, pullquotes, feature stories, headers, etc. These explorations helped establish the two different usage patterns of the pathway element, which was later incorporated into the style guide.

 
 

Results

The site launched on November 1, 2016, to coincide with the Verge’s five-year anniversary. We have received great acclaim so far. Check out our work at theverge.com and read the Verge editor-in-chief Nilay Patel’s introduction to the new Verge

We are far from done. We are continuing to iterate both on the Verge’s website and the larger platform. If you want to hear more, take a look at this explainer by Mandy Brown about our underlying platform and its challenges.