The Problem
What began as a fashion blog had grown to cover much more - career, motherhood, sex, politics, personal finance, etc. But this wasn’t accurately represented in the brand’s identity or site.
The editorial team felt the site architecture didn’t showcase the breadth of content. Readers had to endure slow page load and a poor mobile experience. The business saw low advertiser revenue because the site couldn’t accommodate the latest industry trends.
The goal was to better reflect the expanded editorial mission of the Cut, improve the reading experience with our latest publishing platform technology, increase page views and decrease bounce rates on the homepage, and increase ad revenue by meeting the needs of higher end clients.
Team & Responsibilities
In addition to myself, the core team included the Head of Design, Editorial Art Director, one product manager, and several engineers. We held daily standups, biweekly sprint planning sessions, and as needed stakeholder check-ins.
I helped define the design approach with my research, solved complex UI problems through wireframing and prototyping, established a visual design system, and ensured consistency by providing QA support to the engineering team.
Research & Insights
1. Understand the editorial perspective by conducting a card sorting exercise.
2. See how the Cut audience visits the site with audience metrics and user interviews.
3. Identify how to attract higher end advertisers through a brainstorm with ad sales.
The card sorting exercise revealed a content breakdown of light + fun / heavy + serious. This was consistent with audience engagement, which showed visitors enjoyed browsing the latest, easily digestible content as well as reading columns and long-form pieces. Additionally, ad sales emphasized the importance of sponsored content and creating a high impact ‘moment’ for luxury clients.
From this I narrowed in on possible solutions and considerations before I began wireframing:
Focus on rough groupings based on a Cut specific lens (Style/Self/Culture/Power), where timelines could be expressed within the larger groupings rather than in isolation.
Differentiate different types of content by highlighting beautiful imagery and clever headlines since these seemed to resonate with editorial, readers, and advertisers alike.
Find space for integrated ads after story cadence, but include consistent standard ad placement in between sections while being aware of the surrounding content.
Begin with mobile since that was how the largest audience percentage read our network of sites.
Design Explorations
If using an image, make it big - no bitty imagery if we want to make a statement
Don’t be afraid of text-only story promotions - focus on the text if that’s the heart of the piece
Content heavy, but grouping by theme helps it feel less overwhelming
Use repetition of structure throughout sections to make it more digestable
With the story cadence falling into place, I turned my attention to the desktop UI. The challenge of desktop was all that extra space. The Head of Design gave me some tips to think about before I began:
“If everything is important then nothing is, so decide what is!”
“Focus on establishing a clear hierarchy for the page.”
“Play around with white space to help create visual interest.”
Clearly, my first designs took his advice to the extreme! Looking at these now I grimace a little, but I had to learn that important doesn’t always have to mean big.
continued pushing the text only treatment - in particular, how to treat columns differently
placement of the latest stories - how important are they?
how to create a visual pattern across sections without it feeling boring/repetitive
consider how to handle sponsored content
You’ll notice how over time the visuals - font, logo, iconography - changed in the designs as well. The Editorial Art Director, with help from the print design team, was exploring these elements in parallel to my UI sketching. Even though we all met together to discuss her work and provide feedback, she was primarily responsible for those aspects of the project.
As she settled on a direction, I established a reusable design system to incorporate into the layout and continued to refine it until it was pixel perfect.
With a working design in hand, the engineers began thinking about building approaches. Together we ran through the pros and cons of CSS grid versus Flexbox, landing on the latter for it’s expanded browser support.
I had concerns about the flexibility of our designs in the real world, so I pushed for them to build a prototype so we could flow in live Cut content and stress test our assumptions before finalizing.
I also used the prototype to do guerilla style user testing around the office. This testing led us to reorganize the order on mobile and include links to see more content within each section.
The Outcome
The new Cut launched in late August 2017 to rave reviews. Traffic to the homepage increased by over 200% and bounce rates decreased by 90%. We also drastically improved our page speed, going from fully loaded in 16.5 seconds to under 6.
The work has received multiple awards, including winning SPD’s Best Redesign and Adweek’s Website of the Year in 2018, and attracted high end advertising campaigns such as Sephora, Cartier, and Chanel.
Let’s see it live at thecut.com!