Article Page Engagement

Product designer, 2023 for Advanced Local. Aimed to boost the user engagement within articles across all of the ten brands by prioritizing interaction and content engagement. My role included understanding user behavior, resolving content issues, and improving visuals with local branding, resulting in increased engagement.


Product Design


Figma, Dscout, Notion, Slack




Advance Local


Low click-through rates for embedded messages in articles

While our data indicates that embedded messages within articles have garnered a mere 0.1% click-through rate, a critical gap exists in our understanding of their impact on content views and user engagement. This absence of comprehensive data poses a significant challenge to evaluating the efficacy and sustainability of this innovative content promotion strategy


How might we address the issue of intrusive and distracting advertisements that present a formidable barrier, hindering users from accessing the site's content?


Harmonizing User Engagement Features for Engagement Optimization

This solution seamlessly integrates embedded messages into the content while maintaining consistent branding, aiming to elevate both click-through rates and content views, ultimately fostering increased reader engagement.

Design Process

Breaking down the current problems

Our research helped in identifying the following problems with the user engagement features.

Analyzing the competitive landscape

My role initiated with conducting competitive analyses of prominent local news organizations, yielding invaluable insights into their content promotion strategies, content diversity, writing style, user experience, design, and the interactivity of their article pages on digital platforms.

Market Research Results

I conducted thorough research to examine how other local news platforms integrate content into their article page. This research allowed me to synthesize valuable data and insights, that helped me explore opportunities to increase user engagement and satisfaction.

Who is our customer?

After familiarizing myself with the existing website and market research, I got the clarity of the user group and needs. I identified my persona and listed their goals and frustration to make sure I understand my customer problem.

Designing wireframes

I created wireframes to improve embedded content on mobile and desktop. I analyzed how to integrate messaging with ads, considering placement and aesthetics. I explored different module placements based on reader engagement timing. Throughout this exploration, collaboration with the developer remained close-knit to ensure that the design aligned seamlessly with a simplified minimum viable product (MVP) tailored for testing purposes.

Low-fidelity wireframes
Mid-fidelity wireframes

Usability testing for Content Recommendations

Before conducting usability testing with users, I first outlined objectives, goals and procedures in a usability testing plan document. This served as a rubric during testing sessions. A total of 18 participants were asked to complete a series of tasks tied to scenarios during unmoderated testing.

  • Confirm whether users recognize that the module's content is created by the market and is not sponsored, branded, or affiliated with Taboola.
  • Determine likeliness to engage with the module and if users understand that the link can be clicked on.
  • Determine if presenting the article after the third paragraph is an appropriate location.
  • Users said they were hesitant to click on the related article without knowing if it was a recent story. They were interested in knowing if the related article pertained to a current event.
  • Some users were uncertain about the origin of the related article and believed that clicking on the module would redirect them away from the website.
  • The majority of users did not notice the module while reading the article. They assumed it was an advertisement and skipped over it.​
  • Most users wanted content recommendation module to be more prominent and emphasized to enhance its visibility.
  • Users wanted to know the origin of the article were concerned that clicking it might lead them to an external website.
  • Users sought information about the news timeline to gauge its recency.

Usability testing for Newsletter Module

I continued with conducting usability testing with users for the newsletter module, by outlined objectives, goals and procedures in a usability testing plan document. This served as a rubric during testing sessions. A total of 10 participants were asked to complete a series of tasks tied to scenarios during unmoderated testing.

  • Confirm whether users are noticing the newsletter module
  • Validate if users understand the module is content produced by the market and that it is not sponsored, branded, or Taboola content
  • Determine likeliness to engage with the module
  • Gather feedback about the content and overall design
  • Familiarizing with the article page and locating the newsletter module
  • Sign up for the newsletter
  • Users said that newsletter icon helped them know the purpose of the module even before they read what the purpose of the module was
  • All the users found the sign up process intuitive and easy
  • Users could easily skim over the information very easily and understand when it's delivered
  • The green success icon helped them quickly understand the confirmation of their sign-up
  • Most users find icons more effective in providing context
  • The content becomes readily recognizable for users when it diverges from the usual pattern

High fidelity wireframes

Breaking down the Content Recommendations

Breaking down the News Widget

Breaking down the Newsletter Module

Key takeaways

Working within boundaries of constraints

My role as a product designer on this project involved skillfully navigating through a range of constraints. This required finding the right equilibrium between technical limitations and user requirements. These challenges compelled me to excel in converting intricate situations into straightforward, comprehensible concepts and design choices.

Effective team communication

I picked up this approach from the senior product designer, who consistently emphasized the value of "over-communication" right from the project's outset. It proved invaluable in helping me understand and manage the project requirements comprehensively as a designer at all levels.

Creating detailed redlines

To ensure precise implementation by developers, it's crucial to clearly specify padding and margin dimensions in your designs. I've adopted this practice to eliminate ambiguity and attain designs that are perfectly aligned down to the pixel.

Other work

If you want to learn more about my work, or just want to grab some coffee, i'd love to chat