Tackling VICE.com’s Ground-Up Redesign (Part 2)— One from Many
Creating a Foundation for our Design System
As discussed in Part 1 of this series, the design team at VICE took on a network-wide redesign all of our websites.
From conversations with brand designers and site editors, we knew that strategically, each site should maintain its own brand identity. However, beneath the surface, we needed all VICE sites to work the same way. To do this, we needed to design a single functional layer — the core of how the designs worked — and apply a different set of styles to each site.
We set out to design a foundation for the whole network, and create a design system that would let each site have its own logos, fonts, and colors. Our first goal was to design experiences that belonged everywhere.
Where to Start
Knowing that we were designing the future of a dozen existing sites, plus more to come, where were we to start? What should comprise our core feature set? What layouts would be available to everyone, and how should they change across sites?
We realized that we couldn’t take everything on at once. We wouldn’t be able to design each page or feature across a dozen sites to get a sense of whether or not it would work. We needed to start simple, with features that were universal to all sites. We identified our most critical experience — reading an article — and started our explorations there.
A focused reading experience
As more users were finding their news through social media, we recognized that our article pages had become our front door for many users, and the entry point for the majority of our audience. We wanted reading an article to captivate them and draw users into more articles and videos.
Our goal was to create a spacious, focused reading experience, that would let each of our sites’ stories and images speak for themselves.
In creating an article layout, we had a few competing considerations. There was a natural tension between helping users stay focused on a single story, but also offering up other stories a user might read next. We also needed to balance a clean aesthetic with ad placements—like most publishers, our journalism is supported by including advertising—so we looked for ways to incorporate ads that would be clear, follow a regular cadence, be impactful for the brands advertising, but minimize unintended distraction from the stories themselves.
A clear path ahead
How could we make it easy for users to keep reading? Looking back at all the approaches we had taken for each site, we revisited older designs that had been most effective. From our own experience, and a survey of other publishers, we mocked up a sampling of possibilities that we believed would entice our users to stick around.
We also wanted to try something new for VICE — infinite scroll. Although we didn’t have our own data to back it up, we believed that our audience would be more likely to keep reading if another article of interest just appeared without making them choose what was next.
Thoughtful detours
Infinite scroll offers a single, linear path to the next article, but what if a user isn’t interested in what’s shown? We’ve been experimenting with ways to surface articles and videos that give users more paths through the VICE network. These experiments happen at three levels.
Level 1: Invisible. Without changing the layout, we’ve tested different types of content in the same positions. For example, the frequency at which our sites publish original video varies by vertical, so some of our regular visitors would see the same video for several days in a row. By presenting one of the ten most recently published videos instead, our loyal users got more variety, and were more likely to watch a video.
Level 2: Minor tweaks. Without changing the layout much, we’ve tested adjustments to the UI or information presented. Again, looking at our related video placement, we experimented with different positions of the play button to see which one users were more likely to click on. Other concepts at this level might include showing or hiding an author name, or adjusting the size of a thumbnail image.
Level 3: Brand new placements. Here, we’ve carved out new spaces for articles or videos to appear. This requires the most product and engineering work, but also offers the largest potential upside.
New features need to be informed by the layout as a whole, exist harmoniously with similar features elsewhere on the page, and still allow for a simple, focused reading experience. Our goal here is to try different experiments, see what performs best, and keep the most successful ideas while paring back the others.
As we settled on the core network-wide experiences, we moved into crafting a system that would set each site apart. In the next post in this series, I’ll write about the challenge of allowing each separate site and brand to be itself and hold on to its individual identity.
Follow VICE Tech and Jessica Brown for the next installment: Flexibility Within Constraints
