The Cut

The goal of the project was to improve the brand identity, traffic growth, and marketability of the Cut. I worked on content hierarchy, UI solutions, wireframes, and prototypes. The scope included a homepage, basic section page, and navigation. Through discussions with the editorial and ad teams, user interviews, and analysis of visitor metrics, we defined our design strategy. Built with flexible components that can be reused throughout the broader New York ecosystem, the redesign launched in August 2017 with a modern, mobile-first design that has garnered rave reviews and received several awards.

The Team

I was the product designer on the team, working with the Art Director, interim Design Director, Product Manager, and several engineers. A project of this scale meant that several upper management stakeholders were involved, including the magazine’s Editor in Chief and the President of the Cut. The core team held daily standups and biweekly sprint planning sessions, and we frequently checked in with stakeholders.

Context & Goals

By 2017 the Cut had evolved from its beginnings as a fashion blog to cover an array of topics such as career, motherhood, sex, politics, and personal finance. But this breadth of content was not being reflected in the architecture of the site and the visuals no longer represented the editorial mission. Page speed was significantly lower than on article pages which meant a low Google score (affecting SEO) and a poor reading experience.

With a stylish brand refresh and a faster, responsive site reflecting the full range of Cut content, we hoped to decrease bounce rates, increase page views, and attract higher end advertisers (and in turn increase revenue).

The Research

The challenge was balancing reader engagement with the editorial team’s perspective and the needs of our advertisers. To start, we looked at visitor metrics and interviewed loyal Cut readers to learn what they did or did not like about the current homepage. Then I conducted card sorting exercises with the editorial team - having them classify and then label a month’s worth of story headlines - to try and extract an organizing principle from the content itself. We also had brainstorming sessions with our ad team to come up with new ways to integrate branded content.

The team narrowed in on several key insights:

• User type breakdown - “time wasters” who browse the site versus engaged readers who consistently visit for one or more topic/writer/column/etc

• Surface most recent stories while also grouping content based around the concepts of light and fun or dark and serious, with labels that make sense and are meaningful

• Site should highlight the breadth of content, beautiful photography, and clever headlines

• Support major takeover experiences and branded content slots

• Go where our users are by designing mobile first

Design & Testing

Considering the large scope of the project, the interim Design Director suggested pursuing the visual identity in parallel with the fundamental organization and flow; my coworker focused on the former and I was responsible for the latter. Using the groupings the editorial team had narrowed in on - STYLE / SELF / CULTURE / POWER - initial wireframes looked at story cadence, differentiating various types of content, and expressing chronology within groupings instead of in isolation. Starting with mobile forced me to constantly consider hierarchy because the amount of space was so limiting.

As the Art Director narrowed down her explorations of logo, typography, colors, and possible iconography, I incorporated them into the layout to see how everything worked together. There was a lot of jumping back and forth between identity and structure as we refined the designs together. We were also constantly incorporating feedback from the interim Design Director and key stakeholders - specifically, playing with story weight and focusing on scale and white space to create visual interest and express hierarchy.

In order to ensure it was a truly responsive site, I discussed the best building approach with our engineers. We looked at implementing CSS grid but in the end went with flexbox for its increased browser support. I suggested building a prototype in a staging environment so we could flow in live Cut content and stress test our design assumptions before finalizing. The prototype also allowed me to do guerilla style user testing with non Cut coworkers to validate usability.

While the team continued to collect feedback and refine the homepage designs, I turned my attention to the site navigation. The goal was to display the high level labels - so they felt akin to a tagline - and under a collapsed menu include more specific content buckets. While I briefly explored a three tiered structure, testing showed it was too overwhelming and unclear for our users. The PM and I worked with the SEO team to ensure the terms were as SEO-friendly as possible.

The Outcome

With my knowledge of front-end coding I felt comfortable providing QA support, working with the team for several rounds of feedback until the homepage and navigation were pixel perfect.

The entire project was a true collaboration between editorial, product, engineering and design. It was a great experience with some really exciting UX challenges. The refreshed branding is elegant and modern to match the site’s elevated content. The layout is complex in the varied ways it displays content, but also easily scannable. And advertisers love the scale of the site with its nod to print magazines and the flexible integrated ad units.

Check out The Cut.