The New Racked

Aligning research and design with a new editorial strategy

By Courtney Leonard and boheekim Dec 7, 2016, 1:00pm EST

A new brand identity to support a new mission

If you’re a Racked reader, you know that the brand has made some big changes in the past few months in terms of editorial vision and strategy. Britt Aboutaleb, the new Editor-In-Chief, joined earlier this year and has since sharpened the values and purpose of the brand.

“Racked is for everyone whom Fashion with a capital ‘F’ doesn’t talk to,” said Aboutaleb in our first meeting to kick off this project. “Traditionally, shopping is a fluffy subject, one that gets wrapped up in coverage of the fashion industry, which actually speaks to very few people.” The brand wanted to become more accessible and inclusive. How are they doing it? The tagline says it all: Shopping, for real life.

Think about it. What you choose to buy and wear says something about who you are; it’s part of your identity. Team Racked wants to answer real questions around branding, manufacturing, the trends and the stories behind it all. They’ve been producing more long-form and investigative pieces around what you buy and why it matters. Whether it’s the Politics of Pockets (and why women’s clothes don’t have any) or wrapping your brain around what a +$75,000 sneaker collection looks like, Racked’s new voice is bold, its content is fun in tone but serious in nature, and their target audience is gender-neutral and all-inclusive. The problem? Their brand identity didn’t match.

There was also a large shift in Racked’s brand’s growth strategy. We’re living in a distributed content model, and Racked is now focusing on email newsletters and Facebook video as its primary platforms. In other words, the site was no longer a top priority. Therefore we needed to create a design that travels well, animates cleanly, and supports the great work of the newly-hired video and photo teams.

This post breaks down how we developed our design system based on the editorial vision, strategy updates, and research rooted in visual design and audience feedback.

Research what’s out there so you create a truly original identity that you can own

Our team has been increasing research efforts, and our studies have become paramount in shaping design systems and style guides that serve each brand’s audience and creative teams. We created a comprehensive competitive analysis of over 25 brands to see how others are executing their visual systems across multiple platforms. We collected screenshots on color use, typography, logo systems, feature and article layouts, photography, social pages, and video. The results helped drive conversations about how Racked’s new branding system needed to set it apart from the competitive landscape while serving similar audiences.

Don’t assume you’re solving the right problems and go talk to your audience

Once we were better informed by our competitive analysis, we made several hypotheses about our audience: how they shop, what they look for, where they’re shopping, and how or if they’re researching brands they wear. We tested our theories by conducting over a dozen informal, in-depth interviews with men and women ages 23-35.

One assumption we had made was that it felt too feminine and soft. Racked wanted to be bolder, stronger and more authoritative. The editorial team also wanted a site that could speak to men as well as women, and the pastels and script font of the logo seemed to create a huge division.

Audience interviews supported our hypothesis that Racked has been previously known to serve females first, which was indicated by comments made about the color palette, imagery, and tone. “It’s like a girl’s dream color-schemed living room,” one respondent said. We noted this as a high-priority that needed to be resolved by the new design system.

We validated a lot of our hypotheses, but also gained valuable new insights. While we did find that many respondents felt fashion content tended to be unapproachable. One audience member said that covering fashion should be more like covering music: “Like how a song was put together and how these random artists made it happen...something like that for fashion would be interesting. framing it as if it were music, which is a lot more accessible than fashion.” This type of feedback allowed us to build upon our competitive analysis by looking at the design systems of brands who uncover entertainment stories in interesting ways outside of fashion, like Complex and Pitchfork.

Our audience interviews haven’t stop there. Post-launch, we’ve conducted more internal interviews with Racked’s creative teams who will be using the style guide. Our job is to set others up for success so that design remains consistent and the brand builds equity in the minds of the audience. We do this by finding out if there are any pain points in their work flow and where the previous brand guidelines served them well. This context informs how parameters around visual elements will be set and what tools we’ll use to deliver assets so that teams can do their jobs efficiently and maintain creative freedom.

Logo exploration

We started designing logo options from scratch with the editorial mission in mind. Our designers, including Michael Spitz, explored many options with variations on the “R” in addition to more intricately stylized and plain text marks.

Many of these options were interesting and beautiful, but they weren’t able to achieve all of the goals we had set for them. The new Racked logos needed to be clean, scalable, and unique while boldly conveying authority, gender-neutrality, and transparency. Our final logos, designed by Courtney Leonard, accomplished just that.

Given that this was a social-first relaunch with a focus on video, we knew the mark had to travel well across mediums and hold up well at smaller sizes. Several rounds of small adjustments were made to increase legibility at small sizes. For example, we explored the height of the aperture (opening in the middle of the letterforms) and the way it affected each individual letter’s shape until it was at its most legible and balanced.

What our new logos achieve

The Racked wordmark and logomark create a system that elevates our voice and mission. Racked is moving beyond the idea that fashion is exclusive. Our branding emphasizes that we are creating space for all people through shopping, which unlocks "fashion" in a way that is approachable. Our audience knows what they like, and we uncover what’s behind the brands people shop and wear. We reveal the real stories so that anyone can shop with fuller context, without being snarky about it. However, we’re humans with opinions, personalities, and the informed attitude of your friend who’s always on top of the trends.

Our logos are gender-neutral and designed for a savvy audience. We are pushing past the notion that shopping is reserved for one type of person. Our content is for intelligent adults, and our logo gives them credit for how smart we know they are. They don’t need the whole story to know whether they like something or not. While our audience is capable of filling in the blanks by themselves, we’re creating narratives that cut through the surface of shopping to reveal what’s behind the surface.

Our logos are unlike the others. Generic branding, decorative and ornate branding—we’ve seen it all. We know what’s out there, and we’ve developed unique marks that pack the boldest attitude of them all. We chose an approachable sans serif that maintains legibility with the aperture, which represents transparency and speaks to our editorial mission.

Typography exploration

We began thinking about typography when we designed the logos because we wanted to use a font in our wordmark that could also be used across platforms. Gotham withstands transparency and emulates the attitude of the editorial content: informative, timeless, and approachable. It looks great from lower thirds to headlines, and has weights that support a social-first brand on devices of all sizes.

We chose Georgia for body copy as well as spaces where emphasis on text is needed to balance the bold sans serif. Georgia is a serif font that is elegant and extremely legible at small sizes.

Color exploration

There are a lot of considerations to take into account when developing color palettes for a multi-platform brand. These colors are visible everywhere: social media, video, photography, on-platform, and in print. We built primary, secondary, and tertiary palettes based on research, editorial goals, accessibility, and the range of tones our content covers.

What our color palettes achieve

Our primary and secondary palettes are gender neutral. We surveyed over 100 individuals so that our audience could give us direct feedback on our color palette choices. The overall response was positive, and we made slight adjustments based on their feedback.

Our color palettes are accessible. We take our accessibility guidelines seriously, and our team provides guidelines around how to use color palettes so that everyone can enjoy our content on and off platform.

Sample of our color contrast documentation

When we did our competitive analysis, we knew we wanted to stay away from softer pastels, shades of pink and other recurring colors, which you can see below. We’re not over here inventing new colors, but we’re putting more effort into redefining how we use our palettes.

Colors from our competitive analysis (greyscale removed)

Our primary and secondary palettes, which include olives and a hot pink accent, are unique in this brand space. They feel more gender-neutral and support the tone of our content well.

Expanding the system

Our signature aperture excites many opportunities for animation and creates visual interest in cross-platform layouts. The opening between elements reflects the space Racked creates for everyone left out of the fashion conversation, and the relevant context behind the brands we see. As a design element, it plays an integral role in the system accompanied by the application of color palettes and typography.