Welcome to the UX/product portfolio of OD Ntuk


Welcome to the UX/product portfolio of OD Ntuk


No products in the cart.

BET Image Galleries

Refreshed Galleries Based on Heuristic Analysis and Business Goals

Project Overview

After an agency led redesign prior to my hiring, the KPIs for the BET galleries dropped significantly. I was tasked with performing a heuristic analysis to create a hypothesis of why the numbers may be dropping. I met with the analytics team to look into their data, to further solidify my theory. I also met with the ad ops team to figure out what they want to prioritize. On desktop and tablet landscape, I came up with an interface where there are large images, and thumbnails are hidden as an icon option. The interface also automatically progresses the images to increase our page views, but the user has the option to stop the image cycling. Finally, once the gallery ends, it cycles into the next gallery associated to the particular gallery. The interface also includes a right rail where ad impressions cycle every few seconds. On mobile and tablet portrait, I created an interface where the images are all listed out in a list format, with ads interspersed every few images. These changes increased the page view per visit by 332%.


Project Snapshot



After an agency led site-wide redesign the numbers on the image galleries dropped significantly. Image galleries drive a significant amount of ad revenue for BET due to their connection to BET shows and tentpoles such as awards programs such as the BET Awards.


Jon Tesser Provided Analytics to Showcase the Drop



Heuristic Analysis of Gallery Design

Gallery Design Post Agency Redesign


The Analysis

  • The gallery automatically pops out over a new page.
  • The gallery automatically cycles through images
  • The controls are confusing to the user
  • The user has the option to view thumbnails outside of the player


Suggested Improvements

  • Embed the gallery module within image content pages, or allow it to load on top of content pages, allowing the user to close it and return to the page to which they first interacted with the gallery call to action (CTA)
  • Give the user the option to stop auto-cycling
  • Embed thumbnails within the gallery experience, so users focus their attention on the gallery module.




After the heuristic analysis, I spent time defining the difference between two types of galleries, one being a listicle and the other being a true image gallery.


The Difference between a Gallery and a Listicle

A gallery only contains images while listicles can contain mixed media. A gallery can be long and have several images while a listicle is intended to be short. To sell the difference between these two content types I started by putting together personas.


Personas showcasing the difference in the use case between a gallery and listicle


I put together some rough wires with additional definitions to explain the key differences between the layouts. These wires look very similar although a listicle can have different content from an image gallery which only contains images. I made the suggestion to consider making the gallery verticle even in desktop but could not win that battle due to the need for autoscrolling in a horizontal gallery for page views.


Gallery vs Listicle Definition


Benefits of Using Listicles and Improved Image Galleries

  • The ability to generate content/articles faster
  • More opportunity for ad dollars through pinned cycling ad placements More user engagement through an improved user experience
  • More cross-promotion by giving the user the ability to swipe or click between articles/galleries and/or swipe or scroll directly into the next article/gallery


Hypothesis and Effect on KPIs

  • More content will lead to more page views and ad dollars
  • Better user experience and giving users control over of moving between content will lead to more user engagement, a lower bounce rate, and a higher visit depth


My Hypothesis of How KPIs may be Affected by my Suggested Changes


Wireframes I put together to showcase multiple options based on my hypothesis and speaking to different stakeholders.

Design Comps

Trevor put together the design comps based on my wireframes and definitions. I worked closely with him to iterate some of his ideas and feedback through design.