The Verge relaunch is a project like no other for Vox Media. This was the first time we’ve taken a brand that our company originally built and given it a full redesign.
We’re not just talking about the website, either. This redesign covers everything from the logo to event spaces to distributed platforms to YouTube thumbnails. It was born out of the definition of a new mission statement. Simultaneously, we also migrated The Verge to a new version of our publishing platform, and introduced a new homepage product — all to coincide with the Verge’s fifth birthday. This was no easy feat.
In this series of blog posts, we’re going to dive into the behind-the-scenes process for the entire lifecycle of this project, starting with research. In order to create a design system, we had to know what we were designing for through a thorough research phase. By mapping out the goals of the brand —from content to revenue — we knew we’d be able to approach design holistically for all design needs and workflows.
Doing thorough research upfront saves you time down the line
It can be challenging to rationalize taking time for research in the beginning of a project, especially if you feel like you already have an understanding of the brand and the goals of the refresh. But it’s important to challenge those assumptions. Through user interviews, we had the opportunity to dig up things we didn’t know, and get an up-close understanding of the Verge design’s strengths and weaknesses.
We want our design systems to support The Verge’s mission, so we knew that this direction would have to balance a diverse set of needs and workflows to empower the different creative groups at The Verge. We talked to each team within editorial — from editors to the social team to video producers— that had use cases for the style guide to get better context. Each person taught us a lot about their work, goals and pain points. We also explored which areas of the existing design system were serving them well. Most importantly, we learned so much about the brand from the people who shape and strengthen it every day.
Breakdown by time
We already have a wealth of knowledge through reports on The Verge. A lot of the audience data and goals had been previously documented. For the user research portion of this project we did:
- 9 hours of interviews (two people in each interview: one to ask questions and one to take notes)
- 8 hours to code those interviews and identify trends/patterns/anomalies.
- 30 minutes to create a survey
- 4 hours to sift through survey results and write up findings
- 20 hours on competitive analysis
One thing we didn’t get to that we wish we had:
- 5-10 hours: Follow up on survey respondents to interview members in our target audience. It would have been great to follow up specifically on women who responded, as The Verge strives to be inclusive to all genders.
Defining questions to talk to the right people
We started with a list of open questions, topics areas, and hypotheses to validate. These helped us identify who to talk to and kept the conversation productive.
How do we define The Verge?
Who we talked to: The Verge’s editorial leadership team
What we learned: The brand’s vision, its purpose, and the service it provides to its audience. We also got a list of competitors for different areas of coverage.
Who we talked to: The Verge staff
What we learned: How their day-to-day work expressed the brand’s identity. We dove into tone and intention, especially from social, video, and longform teams.
Who we talked to: Brand Partnerships
What we learned: We have to be clearer about what our differentiator was, because “tech as culture” had become a pretty common description across technology-focused media brands. We realized there were certain strengths we should continue to bolster and areas where we needed to rethink and pivot. As a group we aligned around the objectives of our partnerships and defined the competitors from a revenue perspective. This information defined the wide variety of competition we wanted to examine, breaking down types media brands (site-focused, social-first, distributed platforms) and real life applications (like events).
What are the goals of the brand?
Who we talked to: The Verge’s editorial leadership team & Vox Media’s leadership team
What we learned: We worked with editorial to focus the the brand in terms of coverage, distribution platforms and topics. This helped us articulate the value they wanted to bring to their audience, and use our design to help express their intentions.
Who is our audience?
Who we talked to: Growth and Analytics team
What we learned: We’ve moved into a distributed content model, which means that we’re telling stories on different platforms to different audiences. We dove into demographic data about our audience and defined our target audiences. A good example is Circuit Breaker, a Facebook-focused sub-brand, which has the highest proportion of women than any other group of content across The Verge. Understanding The Verge’s approach to growth helped us create a design system that was inclusive and appealing to our endemic audience and beyond.
Who we talked to: The Verge’s engagement team
What we learned: We got a lot of insight about the voice of The Verge through the engagement team. By taking us through the different tones this team uses and how it changes depending on topic or platform, we understood how flexible our design system had to be to support the brand’s editorial range.
Who we talked to: Our audience
What we learned: Through surveys put on different social channels, confirmed a lot of what our teams had told us: That our audience was heavily male and that our Facebook audience tended to be more engaged than our Twitter audience. We heard that the audience makes a distinction between tech coverage and gadget coverage specifically. We also got information from our audience about who else they read, helping us focus our competitive set. This information helps us refine directions so that our visual language will stand apart.
What’s good about the current design system, and what are the pain points we could fix?
Who we talked to: Every team that regularly uses Photoshop, Illustrator or After Effects on The Verge (Social, Video, Photography, Features).
What we learned: We mapped out the needs of other teams, first-hand. We translated research into the way we deliver assets to those who will use them on a daily basis. Tangible changes included:
- Delivering .ase files for color palettes rather than a static PDF, so users could stay in their workflow
- Creating an editable version of the style guide in Google Slides so everyone has one source of truth that’s always up-to-date. We had problems with old style guides floating around.
Turning qualitative research into quantitative
After interviewing the teams, we had tens of pages of notes that we had to make sense of. Sifting through to try to find useful information, identify patterns and note discrepancies can feel overwhelming in the beginning. We have a simple system that we like to use.
Coding the interviews
We mentioned above that two people from our team run the interviews. One will lead the group through the questions, and the other will take notes. These two people have heard it all, and they are the ones who will identify patterns and discrepancies in these interviews.
We’ve developed a method for organizing our research to make documents quickly scannable and focus on key results. We bold what is interesting or important. We highlight consistencies in one color and inconsistencies in another. After we’ve gone through all the interviews, we pull highlighted sections into separate documents in order and start grouping these quotes by theme. This document is what we hand the rest of our team, along with the original notes.
Learn more about where the audience consumes similar content through competitive analysis
After coding and interpreting the information from our interviews, we spent three days building a design-focused competitive analysis.
We worked with our editorial team to form a list of direct competitors in the tech, culture, entertainment and transportation landscape. However, The Verge is bringing the context of technology’s impact on culture to the audience in ways that reach far beyond the screen with conferences, music festivals, and installations. That’s why we didn’t only compare against other media brands, but also included artists, celebrities, and musicians.
Our competitive analysis was thorough: we studied more than 70 brands that make huge impacts on both technology and culture. We saw how they’re executing concert series, festivals, art installations, collaborative clothing lines, social media, video, photography, swag, color, typography, and design elements. Later in this series, we’ll dive into how the competitive analysis informed some color palette and larger design language decisions we made.
We learned early on that our assumptions were wrong, and our design system is stronger because of it
We all understood that The Verge covered the intersection of technology and culture. But in the five years since that mission was created, the mission statement became less and less defined. Everything could be technology and culture and everyone could be covering it.
We needed to redefine what The Verge brand meant in a clear way. Verge’s editor in chief Nilay Patel led the charge to create a mission statement for the whole company to rally around, and it became our bellwether for many our design decisions. If we hadn’t done this, our design would have been less intentional and meaningful. You can read more about The Verge’s mission statement here.
We realized that the system we created had to let photography and video shine through. The previous design had gradients over images to hide bad photography. Now, The Verge has a strong visual team and we want to display their work prominently because it’s become a core strength of the brand.
It was clear that the design system that in place failed because it wasn’t built to scale. Five years ago, we were thinking about websites. Today, we’re building brands on distributed platforms, that host crazy events, that wants to meet the viewers and fans wherever they might be. The current design became brittle as it was stretched beyond its limit, and we knew that to successfully relaunch, we had to fix this issue first.
The competitive analysis enabled us to have more educated discussions about what The Verge could be versus what already exists in the competitive landscape. It allowed us to directly compare design evolutions to other media brands and decide where we needed to appear familiar and approachable and where we wanted to take bolder risks. It also helped us to understand that we needed to create an identity that was inclusive, because technology affects all our lives and The Verge is for everyone.
Keep an eye on the Product Blog, where we’ll be writing about the logo, the design systems, the style guide and more over the next few weeks.