Behind the scenes: Recode design process

We just re-launched Recode, our tech/business news and analysis brand. For our Brand Identity team, this marked a different type of redesign. Not only did we have to look at the site and all social platforms, but we had to imagine the brand in a more physical sense and extend the design to Recode's booming events and conference business.

During this project, we worked very closely with our platform team, the Recode conference vendors, and the Recode editorial team to help build the brand identity and bring its elements into fruition online through customizations on Chorus, off-platform, and Recode’s conference materials. We also worked with two design freelancers: Cory Schmitz and Jacqui Oakley, who designed the Recode logo and the Code Conference illustrations.

This was the second brand re-launch on our new version of Chorus, but a lot has changed on the Brand Identity team since the first one. In this post, we’ll talk about process, collaboration, challenges, and the adjustments we’ve made along the way.

Research

Competitive analyses, user interviews, conference site visits, and stakeholder questionnaires laid the groundwork for redefining Recode’s new branding system.

We took an extensive look at competitors’ websites and conferences to explore and understand strategic differences between brands. We discussed their niches, markets for conferences, the wants and needs that aren’t being addressed in the general competitive landscape. We compared desktop and mobile websites, site speed, brand colors, social media, video channels, and podcasts.

Recode’s editorial team gave us great insight into how they view their brand, and went into great detail about the qualities they didn’t think were embodied by the former visual identity.

• Recode goes where the story takes them.

• Recode is lively but straight-forward.

• Recode is  urgent, immediate, reliable, authoritative.

Conference attendees value the "live journalism" that happens at the conferences, as well as the suspense and excitement for events to come as Kara and Walt step out onto the stage. The conferences are an exclusive experience where significant information about tech and business is often released to the public for the first time. When our team members went to the conference site, it was apparent that the visual system didn’t quite achieve the energetic buzz that the speakers’ content warranted. Moving forward, we aimed to build out design directions that would achieve these goals in a physical space and online.

Sketching and ideation sessions

Early brainstorms and whiteboarding sessions allowed the team to talk about first impressions from our research and ideas on how to recreate a respected rebrand with elements of human-generated content, a delightful and customized conference experience, and the sophistication to grow its well-informed audience.

Three design concepts

After the sketching sessions, the designers put together three different conceptual directions from which the stakeholders could choose. We gave them each a name: Re/imagined, The Interview, and Re/constructed.

Re/imagined was a concept that freshened and built upon where the Recode brand has been, adding an element of elegance and authority. It took Recode’s old visual elements and amplified them with an expanded color palette and updated typography. The slash was used as the primary design element alongside energetic photography. This framework was meant to be malleable for Recode's many events, so we can swap out photography and illustration each year to provide a fresh experience.

The Interview is the second direction, and the one we ultimately chose. It's led by the creation of a mark that represents conversations and elements from actual code. An off-centered red highlight (which you can see in play on the new site) is used throughout to emphasize specific text in articles, meme images, videos, and more.

We've developed a system of symbols and visual treatments from this mark that make Recode feel entertaining while preserving its well-established authority in the industry. The patterns have a lot of flexibility and were built with animation in mind. The illustration style is meant to provide people of importance with the customized detail of an expensive, exclusive event in a way that feels fun and exciting. The colors and type balance the playfulness of the symbols by commanding attention and authority.

Re/constructed was the third direction, which focused on the dynamic, bold and occasionally irreverent quality of journalism that Recode practices. We did this by breaking the current design language down to it’s basic elements, and then re-assembling it, using the diagonal lines of the slash motif. The concept has a degree of immediacy, intensity and energy often found in punk/rock zines. Its elements portray the crackling excitement surrounded by the Recode conferences and the unapologetic, straight-forward, relevant tech news analyses. We kept pieces of this concept alive in the features template on new Recode.

The final direction

Our stakeholders within the company and on Recode's events and editorial leadership teams choseThe Interview as the direction to move forward with because of the bold color palette, strong typography (although we went with Klavika over Refrigerator), and the flexibility of the mark. As we moved forward in building out the system, we borrowed elements from other directions, such as the feature article header background from Re/constructed.

Conference materials

Several weeks were spent developing and fine-tuning a conference style guide for a continuously-growing list of conference materials. From badges to custom illustrations and sponsor activations, every element of the physical and interactive environments were designed to align with the direction while giving conference participants the information they need.

The design system was expanded so that we could create assets and designs for printed materials — something completely new and different for our team of product designers! We got to put our design school hats back on to give recommendations on custom printing processes with details on die cutting, types of paper, and custom PMS inks. No spoilers, though! You'll see more at Code Conference on May 31.

The logo

Cory Schmitz, the designer behind the Polygon, Eater, and Curbed logos, worked with us again to redesign Recode’s new mark. Here’s a look into his research and early iterations:

The final wordmark that Cory designed for us is an elegant and bold modification of Avant Garde with an implied slash. The full logo uses the logomark from the chosen design direction, The Interview.

On Chorus

Thanks to an awesome new design configuration tool in Chorus, our Brand Identity team was able to work on fine-tuning all the precious details of the site: padding, colors, font sizes, hover states, accessibility, and more.  We were able to make this modifications on the fly, without needing to log issues for engineers, modify CSS, or schedule deploys.

This is our second brand to be on our new and more unified version of Chorus, meaning the site will continue evolving as we grow the platform's capabilities.

Off-platform

We created a comprehensive style guide to include suggestions for video introductions, lower thirds, and credits; podcast covers; newsletter designs; RSS readers such as Apple News and Flipboard; and all social media channel avatars, covers, and meme images.

Process adjustments

The Brand Identity team is a really unique team here at Vox Media. Our team is made up of designers Georgia Cowley, Warren Schultheis, and myself, along with product manager Bo Hee Kim. We don’t have any engineers, which means we work closely with other teams to implement our changes, and we strive to become more self-reliant by constantly developing our own front-end skills, through styling ourselves or through our configuration tool, which allows us to make visual changes on the page without writing our own CSS.

It’s essential that we communicate effectively, especially because our team is entirely remote, so we’ve been experimenting with the best ways to collaborate and take ownership of our own work. We make a conscious effort to have conversations about what we’re doing, while taking ownership of the work we are assigned. Doing this helps us ask the right questions and conduct the right research to get the job done efficiently.

We made a number of adjustments to project processes since the Curbed on Chorus launch. Previously, we did more hand sketching with pen and paper for a few weeks before we put ideas onto the computer. Recode’s timeline was much shorter, so we spent a lot less time away from the computer. We find a lot of value to more tactical design brainstorming, but in this particular case, getting into illustrator faster allowed us to experiment with brand applications quickly to see what concepts we could build and what might fall apart.

About four weeks before re-launch, a new product manager joined the team. During this time, we needed to coordinate tightly with other teams to implement the designs both on- and off-platform. In order to manage all of our individual work, we used Trello and GitHub earlier and more often, organizing what we need to do, what’s being worked on, what needs reviewing or feedback, what’s been passed off to other teams, and what’s finished.

Our currently weekly process

Monday: We have a weekly planning meeting during which review the work in the backlog together. We call out ideas to research, complications that might block production, and estimate how much time each task will take. We do this together on video calls so that each team member can share their knowledge and experience, and just in case someone needs extra help or direction on a given task. After we discuss as a team, we prioritize and divide up the work into paired or individual assignments.

Daily: We have a video stand-up in the mornings to review what we completed the day before and what we are working on that day. Questions, product blockers, and progress updates are discussed. At the end of the day we check back in  to show each other design work ask more questions, and get feedback from each other.

Friday: We strive to work in weekly sprints and we do a retrospective at the end of the week to determine whether we’re on track or if we should adjust how much work we take on in the following week. We review what we said we would do on Monday, take a close look at each task, and comment on what assignments were easier or harder than we had originally expected and why. If a task was more difficult or complicated than we had anticipated, we have shared knowledge that similar tasks might require more time or resources. We make suggestions for how we could improve our process, and we list out action items and methods to experiment with the following week.

Rinse and repeat.

You ship, you learn.

We learned a lot from the first Chorus launch and adjusted according to feedback in our project retrospective. We had the privilege of working with two product managers on this project, whose time briefly overlapped one another, and the team became more organized and tight-knit despite being thousands of miles apart. We worked even more closely with the Chorus editing config, invariably alleviating even more stress from our developers. Since our teams were more familiar, we were able to help them prioritize customizations without any major compromises.

Our visual branding is successful in that it pays homage to the old branding with an implied slash, yet it introduces a more personal visual language and the appropriate amount of intensity and sophistication to align with their editorial content. The system creates a cohesive experience between environmental conference design, the website, and off-platform activations.

Major props to other product, events and editorial team members who contributed to the launch:  Ally Palanzi, Ben Alt, David Zhou, Pete Mall, Dan Frommer, Lia Lorenzano-Kennett, Jill Pendergast, Adam Tow, Kara Swisher, and Peter Kafka and so many more.

For more information on the re-launch, check out the editor's note, follow us on Twitter and Facebook, listen to the Recode Radio Podcasts, and subscribe to the Recode Daily Newsletter.