News Photo Galleries Project
The original galleries were standalone pages that were hosted on a separate server. These pages were a completely different UX and sites from the original news sites. Mobile versions were created, but the galleries did not have responsive design, resulting in different experiences across different screens.
Screenshot of live gallery in use and setup by local market
In early 2014, we created a mobile version of galleries to address and improve the user experience of the increased audience on mobile devices.
This big improvement allowed users to easily navigate from a touch interface and allowed for mobile-specific advertising.
After some testing and research in the market, the UI was lightened to match the story pages instead of the old gallery design.
Previous Mobile Gallery UI
Alternate Version of Mobile Gallery
Research & Opportunity
Transitioning to WordPress VIP gave us the opportunity to bring the photo galleries into the CMS to access the images across stories and galleries.
With all markets reaching over 50% and some at over 75% of users coming from mobile devices, the mobile experience required a conversion to responsive design. The overall aesthetic was also in need of an upgrade to be more competitive with other local news outlets.
Our KPI’s (Page Views, Visits, Unique Visitors) were steady, but an improved interface was needed to improve consumption.
Main Problems to Solve
- Loss of revenue in ad inventory and impressions with a non-responsive site.
- Slow load times with a site that was not optimized for mobile.
- Poor UX that breaks the narrative from the story to the images and discourages further exploration of images.
Goals for Redesign
After months of meetings and conversations with News Directors and Digital Directors from different markets and needs, we found the most pressing and consistent needs for the photo galleries.
- Users should be able to stay on the same site when viewing galleries for improved load speed.
- Maintain user engagement numbers and level page views to compete with other local news sites on Comscore and other digital rankings.
- Allow galleries to be embedded into the story where it best fits the narrative.
We had fewer meetings with sales and came to conclusions faster with the Digital Sales teams.
- Maintain previously available ads for existing contracted clients.
- Increase ad inventory by at least 30% without interfering more with the UX.
- Allow fully responsive ads on small screens to allow for more 300×250 ads in ROS campaigns.
Wireframes for New Galleries
New Gallery Design Notes
The new galleries have 2 main settings – Galleries embedded in stories and a full page overlay immersion view. Within the full page view, there is an option to navigate the images from a thumbnail grid. This is designed to be helpful in very large galleries with similar themes such as weather photo submissions.
Final photo gallery designed to be placed in a story and also allow a full-screen immersion across all screens. It gives users control of the view and level of experience.
Desktop in page
Desktop - Full Screen Gallery
Desktop - Full Screen Thumbnail Gallery
Galleries in Small Screen
Metrics and Results
Some markets were using the default WordPress galleries that provided a poor UX and no additional ad inventory. In these markets, the sales opportunity has now tripled at least with the additional sales opportunities. Engagements in image views are now trackable to count towards our KPIs.
Galleries had an instant impact and improvement with more galleries entering the same CMS to improve UX on all screens and overall load speed. Continued work to enhance the performance will improve load times and overall experience.
Images used in galleries are property of AP Images