BET Photo Gallery Redesign
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 wanted to prioritize. On desktop and tablet landscape, the UX team 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, the UX team created an interface where the images are all stacked in a list format, with ads interspersed every few images. These changes increased the page view per visit by 332%.
Project Snapshot
Date
September 2016
Team Members
1 Product Manger
1 Data Analyst
3 UX Designers
Background
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 like the BET Awards.
Jon Tesser Provided Analytics to Showcase the Drop
Heuristic Analysis of Previous Gallery Design
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.
Strategy
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 put 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. The image gallery has a cinematic look and feel while the listicle uses an article template.
Image Gallery
Only content is images (may include social images such as Instagram images)
Shorter one line caption text with pre-defined character limit
More content density with no limit on number of images (designed to let users quickly skim images)
Listicle
More content types (single images plus galleries, video, and/or social media embeds)
Longer text blocks with no character limit
Limited content density (suggested max of 10 per article with the exception of 25 for featured articles)
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
The UX team put together wireframes to showcase multiple options based on my hypothesis and speaking to different stakeholders.
Design Comps
The visual design team 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.
