BuzzFeed Redesign
Time: 2 week sprint
Type: Desktop redesign
My Solution: A Redesign of Buzzfeed.com will increase user engagement with the site and lead to increased account creations/personalized content. This will be achieved through reduced repetition in navigation options, reduced ad clutter, and more transparency in source citation.
Role: UX/UI Designer
Team: Just me
Current situation: Buzzfeed.com entertains & informs users through easy to read, relatable content. It’s observed that the product is experiencing a high bounce rate. Social listening expresses a lack of trust.
Who is the user?
BuzzFeed reaches 7 out of 10 millennials monthly. They want quick, interesting news, and a fun quiz mixed in.
https://advertise.buzzfeed.com/
Where to begin…
An assessment of the current situation was in need.
What’s good, and not so good about current site?
What do users love and hate?
Where are we hitting the mark, and what can we learn from competitors?
How I did it:
UX Framework
UX audit: The UX Audit provides a baseline assessment of the current site. Best practices in place are identified as well as areas where such practices can be implemented.
On the Interactive Advertising Bureau survey, 54% of respondents cited ad clutter as the biggest obstacle to good user experience.
https://truelist.co/blog/ux-statistics/
A clear path and hierarchy should be implemented.
Competitive audit: A look at industry landscape. We gain an understanding of what makes BuzzFeed stand out and see how we can better communicate value.
Spreadsheets may not be pretty - but they are part of my process. It helps me capture essential info and refer back for organized comparison.
Social listening: In this step I gain a better understanding of what users are thinking, feeling, and saying on social media platforms. It gives insight for how to reduce pain points.
There’s frustration related to citing sources accurately and fairly. This leads to distrust.
Better source citation can ease negative press.
Can the click-worthy articles be presented in a more meaningful way?
Granted, BuzzFeed’s readers aren’t going there for in-depth, heavy content. BuzzFeed does not aim to be Time or the Wall Street Journal. On the contrary, they did research to understand their target audience, and found these users want news that’s not “depressing and monotonous.”
https://www.searchenginejournal.com/buzzfeed-content-ideas/303437/#close
Can BuzzFeed stay true to the content that pulls readers in; yet alter titles and presentation in a way to elevate their image? And expand beyond their current user base?
Data: Data provides meaningful guidance for decision making backed by actual user behavior and/or proven practices that lead to success.
First I needed to know the baseline bounce rate and how it compares. At time of case study, BuzzFeed was experiencing a 70% bounce rate.
-www.similarweb.com
-https://www.digital22.com/insights/is-my-websites-bounce-rate-too-high-industry-data#:~:text=Average%20news%20bounce%20rate%3A%2065.08,these%20websites%20via%20social%20media.
“The first visceral reaction to a site’s design influences how users perceive relevance, credibility, and even usability. By incorporating this knowledge throughout the design process, designers can make more effective products.”
-NNg
420 million people around the world use ad blockers. Poor user experience caused by ads is the most cited reason. While ads may be unavoidable, the way they are incorporated is critical and should not disrupt readers’ activities.
https://www.clickz.com/stats-of-the-week-ux-gets-an-f/101769/
Problem Statement: Considering all that was learned, I formulated a problem statement that will focus my work. I include a description of the user and business problem. From here I also ideate solutions and measurable goals.
Problem Statement:
Buzzfeed.com entertains & informs users through easy to read relatable content.
We have observed that the product is experiencing a high bounce rate. Social listening expresses a lack of trust and low credibility.
A Redesign of Buzzfeed.com will increase user engagement with the site and lead to increased account creations/ personalized content. This will be achieved through reduced repetition in navigation options, one clear CTA, reduced ad clutter, and more transparency in source citation.
Information Architecture: I created a sitemap of a BuzzFeed’s current structure, elements, and information. I then created an improved, proposed sitemap, simplifying navigation and creating clear routes.
Created in Sketch
Created in Sketch
Task Flows: Task flows are paths a user follows through the interface to accomplish a task. A helpful step to see if we can simplify any processes. I knew I wanted to include content personalization into account creation. Below is a task flow for this which still allows user control and freedom for those who do NOT want to personalize.
Created in Sketch
Hand sketches: With my previous learning in mind, I sketched out visual solutions for a new and refreshed BuzzFeed.
Wireframes: I designed low fidelity wireframes, possible versions of screens in greyscale. They consider the user’s journey, pains, needs (what’s loved about current site), and best practices.
Prototype in InVision
Homepage: After testing & iterating I came to this final version. Here’s how user feedback was incorporated.
Designed in Sketch
Personalization screen one: User feedback noted
Account creation screen: User feedback noted
Final Wireframes
Homepage final high fidelity mockup
Designed in Sketch
In summary
Reduced ad clutter which data and research shows leads to poor user experience.
An aligned layout of content for an ordered appearance, maintaining access to many stories from the homepage. Includes a side bar of trending hashtags.
Significantly reduced repetition in navigation and implemented a footer.
A clear call to action button on homepage for first time users. This 1) creates a clear path for the user and 2) allows personalization aiming to give users more of what they enjoy and less of what they find cringy.
Maintained emphasis on quizzes and what’s trending, the things users love.
Source citation isn’t seen in my mockup, my proposal would be that once a user clicks on a story, they see clear credits for content below the story title; this is important for elevating credibility as noted in social listening.
For this case study, I wasn’t actually partnering with a development team. However, in the launch phase, our redesign would go live and from here we could measure the acceptance of our product.
Annotations: Finally, I share with you a screen of annotations. Such annotations would be shared with development to define screens and functionality.