This project is a continuation of the Research leading up to the redesign, which is written up here.
The objective was to create a separate experience for BuzzFeed News (that was recognizably distinct from BuzzFeed’s entertainment content) to help position us within the broader landscape of other news outlets. We felt that doing so would increase the perceived credibility of the brand and content.
With the formative research and UX explorations behind us, we moved into higher fidelity layouts.
Due to business constraints, it became clear that the we (the tech team) wouldn’t be working with a branding team for the redesign. We were tasked with exploring a visual identity that would stand apart from the competition and apart from the BuzzFeed entertainment brand. We tried to think of the initial News explorations as visual experiments: something we could explore and test out with users to learn how different approaches would be perceived.
We kept a few things in mind when exploring the News brand. In terms of a readers’ first impression, we tried to think outside the box. What sets us apart from our competitors? Major functionality changes were off the table, so we tried to keep the main product features consistent with the current experience (aside from the navigation & tagging mentioned above).
I started out with desktop layouts, because I felt it was the easiest place to begin leveraging a visual language. Additionally, the BuzzFeed News homepage had more traffic on desktop than it did on mobile (unlike our article pages, which were primarily mobile views).
I shared these initial rounds to get feedback from the team (designers, engineers, and people in the newsroom). The feedback was generally consistent: push the boundaries of the grid further, blow out big stories, and lean into strong typographic treatments.
One of the biggest challenges of the project at this stage was the lack of constraints. Everything was on the table, from introducing new typefaces and colors to an entirely new grid system. It was clear, however, that bringing in a professional branding agency was out of the question. The only constraint we did have was our timeline, which was relatively short, as we intended to ship an early MVP and learn.
Working without constraints
Working in this environment was fairly freeing. I was encouraged to try “out of the box” ideas, they would help us learn more than any subtle changes would. The open-ended nature of this project meant that any progress (whether it fell flat or not) would help carve out a little more clarity than before.
Optimizing the Feedback Loop for Non-Tech Stakeholders
After a few rounds of sharing low fidelity wireframes, it was clear that our marketing and newsroom stakeholders were looking for higher fidelity work to react to. We decided to jump to more visual designs so that we would get quicker feedback on what was working and not working.
These designs exhibited a lot of experimental brand moments: different motifs, typeface choices, and completely new color palettes. We worked with designers from the Newsroom’s Art Desk in tight feedback loops. Any direction that elicited a reaction or feedback from stakeholders and team members helped give us clarity and direction to move forward with.
We jumped right into visual explorations and combined different typefaces, colors, and grid breakdowns to see what felt right.
It was clear that a bold style felt more at home with the brand, but balancing the visual language with the content itself was definitely a challenge. It was on our radar that if we were to choose any one of these directions, we would eventually need principles to help identify and work through these challenges (such as content vs. presentation).
Beyond the "above-the-fold experience", I tried capturing some explorations of the feed itself. I kept in mind the important elements mentioned in the stakeholder meetings and sprints, such as bold typographic choices, breaking up the grid for bigger stories, including topical tags and consistent author attribution
Breaking up the traditional two-column feed with “breakout” full-width packages and big stories was a theme across all explorations. We wanted to test our hunch that breaking up the monotonous grid would help with engagement
Our process was admittedly scrappy, but being able to show work early and often allowed for tighter feedback loops. Once we gained consensus around the direction, we pulled out the elements that felt good across the mocks, such as bold typography, breaking up the grid, and utilizing accent colors & horizontal rules.
We used these elements to form a collection of patterns, which allowed us to see how the various elements worked with each other. We knew this wasn’t the most polished approach, but treated it instead like a working document that could change per direction.