The library page on Industry Dive’s publication sites was recently redesigned to feature more content from our in-house content studio, Dive Brand Studio. Originally, the page featured both Brand Studio content along with promoted content from clients. How could the new page account for both content types while making their difference clear to the user?




  1. Increase leads from campaigns
  2. Ensure that the page is valuable to the user
  3. Increase Brand Studio brand awareness

Then, I looked at the current options available for each listing and considered other possible requirements Brand Studio might request. This would help when explaining the scope of the project to the backend developer helping with the project.

  4. Photo vs. no photo - Ideally all items have a photo but what if they don’t?
  5. Title



wireframe Wireframe featuring one item promoted at the top

To make it more appealing for the user to enter their information, the actual download process needed to be simpiler. Historically, users had to click on the title that then took them to a landing page, which took users to a third party site to download the content. Wouldn’t it be easier to have it all hosted on our site?

wireframe Option to download item on the page


In the first few mockups of the page, my main challenge was how to layout each item with each variant (the ones mentioned above). What happens if a photo isn’t uploaded? How can I better indicate what type of content the item is? Is the item made by a client or by the Brand Studio?


mockup First mock with filtering options
mockup Mock with additional ad/signup placements

For the download process, I looked primarily at the Amazon’s checkout process to see what would increase conversions. As previously stated, I wanted to make this more seamless. When talking to our audience development team, someone suggested adding the feature to sign in with LinkedIn.



mockup Mock featuring client content at the bottom of the page
mockup This mock moves client content up the page


I knew this would be a large tech undertaking so after meeting with a developer, we decided to break it up into phases:

  • Phase 1: General library page redesign: adding photos to each item, the differentiation between client and Brand Studio content and some back-end refactoring to make the CMS process easier for users
  • Phase 2: Ad placements and a tool that makes the page easier to organize
  • Future improvements: Migrating third-party landing pages to our platform for easier downloading and lead generation

This way, the back-end could be restructured before adding new larger features, such as an “easy-to-manipulate” layout. Initially I thought a drag-and-drop layout would be ideal for laying out the page but until that is built, there are radio and checkbox inputs in the CMS to indicate the item type.

CMS Screenshot from library item CMS

Phase 1

The final product for Phase 1 looks relatively similar to the final mocks. The one difference is that instead of having the icon overlay on the photo, the icon along with CTA text appears on hover so the user can see the whole photo. Also the styling of the “Industry Intel” (i.e. the client content section) is slightly different.

phase1 gif

phase1 mobile gif

Next, I will look at engagement on the page and make tweaks accordingly as well as pushing forward on Phase 2 of the project.