Tackling VICE.com’s Ground-Up Redesign (Part 1)
Designs are sexy—starting them the right way isn’t
This post is part one in a series about VICE’s ground-up redesign. Read Part 2 here.
By 2015, the digital footprint of VICE had grown from a single website into a sprawling network of over a dozen websites with hundreds of instances around the world— sites like Motherboard, Noisey, Munchies, and Broadly. When created, each site was branded, designed, and built separately, which helped the fledgeling brands build strong identities and audiences.
At the outset, this approach was a reasonable one — each new website was an experiment, yet to be validated, and the strategy of spinning up new sites one by one seemed straightforward. However, as these sites succeeded in finding their audiences, and additional new brands were introduced, the costs of maintaining each site independently became clear—and the user experience across VICE had sprawled.
In tandem with a massive technical replatforming, we set out to redesign the whole VICE network of sites to create a more consistent, cohesive experience across all our sites — while maintaining the authenticity and branding that the audience had come to know.
The Stakes
Product redesigns carry inherent risk. Users have come to know (and hopefully even love) your product, so they may quite naturally be averse to change, and react badly to an overhaul.
In approaching our redesign, we knew we had to keep our audiences engaged to succeed. That said, as we re-platformed, we wanted to take the opportunity to make substantive changes to our core experience.
Over the past year, as we’ve brought the VICE network into a single design system, we’ve continued to grow our following. Through the process, we’ve taken away a handful of lessons about how to design a system to work well at this scale.
This post is the first in a series exploring how we chose to tackle this sizable product redesign.
Starting at 10,000ft
At the beginning of this redesign, it was tempting to jump straight to mockups, especially in a media company, where “something to look at” is the most common request when even talking about technology.
Taking on a meaningful redesign is an exciting project for any design team, and visualizing ideas is a particularly thrilling part of the process. On top of that, when we kicked this off, the VICE Tech team hadn’t yet formalized a UX design process, so the larger team of stakeholders was accustomed to seeing visual designs to spur conversations.
Ducks on a Pond
To the untrained eye, a solid design process can appear slow to start. It might seem like forward progress isn’t being made when early design artifacts don’t resemble a potential final outcome. However, the early phase is when furious effort surfaces critical questions, and more rough shapes are far more effective than fewer, prettier ones.
It was a challenge to hold off on visualizing to zoom out, but to we needed to ground our thinking by conducting research and setting goals.
In this phase, we did a careful assessment of the current state of affairs. We wanted to understand each site — who were our audiences? Where did they overlap? What features were common to many sites? Which were distinct?
Understanding the users’ contexts and having respect for them would allow us to create a space they would enjoy.
We dove deeply into several sources of truth, examining analytics, market research, user research, and our competitive set, to assemble a clear picture of where we stood.
In addition to research, we also took this time to more clearly articulate our goals. How would success be measured? We defined four key areas of focus to carry forward into designs. On the qualitative side, we drafted a short list of critical experience goals most vital to user happiness.
We also discussed, at length, the future of the brands. Knowing that we were creating one set of templates to power all of our sites, how different should each site look? Which elements would be customizable? We settled on an overarching brand strategy to guide our design work.
So, What does that look like?
Where we started:
Here you can see the full differentiation of three of our websites. Even the main element meant to connect the sites into a network, the top dark-grey network bar, is rendered wildly differently across sites.
Differences extend in all directions — from font families down to actual functionality.
Most extreme unification:
This step was an exercise in extremes — how might things look if we reduced these vibrant brands to little more than watermarks on an identical page?
This design was not intended to be taken in its exact form and refined down to a final outcome. Instead, this is what I might call a ‘can-opener’ design — one that will help pry the lid off of key insights and reveal the constraints that would help create the final product.
We wanted to focus on a few key questions, using this design to provoke thoughtful answers.
- What underlying constructs were most important to each site, and how did they support that site’s users? For example, is it vital that one site have “columns,” and another have “horoscopes?”
- What functional elements were used to further growth-related goals for each site? For example, was one social network or partner legitimately more vital to growth than another, and were they the same or different?
- What visual elements communicated the essence of each brand? For example, was a unique color, or a body-font choice key to the health of the brand overall?
After rounds of research, the picture of what we needed to design was coming more clearly into view. We established a core ethos for the project at this point that guided further thinking. It was:
VICE users should only have to learn how to use VICE once — but should be able to differentiate and fall in love with our sub-brands separately.
Our initial result:
By steeping ourselves in research, and answering some of our foundational questions, we were able to bring this strategic thinking into our next phase: wireframes.
Our core strategies remained a constant as we moved forward, serving as useful constraints in design explorations.
Follow VICE Tech and Jessica Brown. Click for the next installment: Defining Our Design System.
Jess Brown is Director of User Experience for VICE Media’s global tech team — VICE Tech.
