Skip to Main Content
Product Ideas Pitch Portal
Status Needs review
Created by Lowell Kissling
Created on Jun 6, 2024

Vertical Hero layout for tall/narrow lead images

No description provided
Project Lifecycle Status Pitch
Product value score
2
Business Priority (Optional) Engagement
Values Curiosity, Public Service
State your hypothesis, tying your project back to the impact it might have.

Folks in editorial have for some time now been asking for additional story treatment options. This is one that could be fairly easy to implement, fairly easy for Arc users to utilize with regularity, and serve as a "quick win" for the product team.

Which metrics would you use to track the success of this project? We will use this as the foundation of our experiment design. (Optional)

External: time spent on page, scroll depth, traffic from shares

Internal: amount or % of stories for which writers/editors use this story treatment

What problem are we trying to solve for our communities with this experiment? How might it help us better serve them?

A large percentage of our site traffic comes from users on phones with narrow screens. Despite that, we enforce a 16:9 aspect ratio on hero/lead story images that will always render fairly small on those devices.

A Vertical Hero story layout would allow for non-16:9 hero images that would display much more prominently on mobile devices. In addition, they could provide a visually distinct new story treatment option for desktop users.

Attached are screenshots showing a potential option for how this could look on desktop and mobile devices

Lay out the potential project steps to the best of your ability, including key teams that would need to be consulted. This is your best knowledge of the systems, tools and lift that would be required.
  1. Attain buy-in from editorial that this type of story treatment is desired and would be used

  2. Design treatments for desktop/tablet/mobile browser views and for mobile app

  3. Plan out technical implementation

  4. Implement

  5. (Concurrent with 4, possibly optional) work with Mercury to implement on mobile apps

Effort (scale of 1-lowest to 4-highest) 2
Urgency (scale of 1-lowest to 4-highest) 1
Business Impact (scale of 1-lowest to 4-highest) 2
Cost (scale of 1-lowest to 4-highest) 1
Alignment with Values (scale of 1-lowest to 4-highest) 3
  • Attach files