Experience

Latest Work

Audrey Valbuena

Refactoring the “PhotoFlow” component

Refactored our visual parallax component for greater layout and content flexibility.


Role
Designer and developer Timeline
December 2024 - March 2025Live product
Example PhotoFlow here 


Example story with the refactored PhotoFlow component

Project Brief

In the Post’s Interactive Storytelling template, there is a component that is colloquially known as “PhotoFlow.” It allows steps of text content to flow over a full screen background visual, one at a time.

This is an incredibly popular component for designers. However, it was often being modified and used in a variety of ways — split screen, with multiple text steps, or with quotes and other text-based components flowing over the photo.

The base component was created for one visual to pair with one text step. Myself and another designer saw the need to refactor this component to allow for more flexibility. So we set off to do so, allowing for the most common layouts to be achieved without ever entering the codebase.
The original PhotoFlow component allowed for one-to-one images and captions to be placed in parallax.



Context and research

First we did an audit of the most common layouts and analyzed which were repeated most. We also talked to folks who were modifying the component most to understand what their pain points were. Often, we heard that it was a struggle to modify this component on deadline, and that they were often copying code over from older projects — over and over and over again. This was immediately signal to us that these layouts could become a part of the component.

The most common uses we saw were split screen iterations of the component, and modifications for mobile views. We also wanted to allow for any content to be in what would traditionally be called the “text step” - including photos, videos and graphics.
In Figma, we laid out all the layouts we were seeing used.



Component design

Our first steps were to mockup all the different layouts we would want to see visually. We approached these all as variants to the base component.

Then, we translated these variants into a props table, to understand what could be edited straight in our CMS, so that folks using this component could get pretty high levels of customization without having to enter the codebase. We translated all of these layouts as different variants, so the same component was flexible to many different design needs.Early props table work








Refinement and development


We went through a few rounds of feedback with our editors to clarify these props and allow for edge cases to the component we hadn’t initially accounted for. Then we set off to code.

Through many rounds of code reviews we built out the component in React and Stitches, and tested it out on a few projects to make sure all was working as expected. We also wrote robust documentation for the component, which we refined with feedback from each person who used it.  Final props table in our Storybook documentation


Final designs


This component now lives in our Interactive Storytelling template. Designers can now use the PhotoFlow component fullscreen or split-screen, with more than one “text step” per visual, or can put any type of content, visual or otherwise, into the “step.” They can choose between three layouts on mobile - “stacked” (pictured right), “fullBleed” or “static” - depending on the type of experience they want to create. We also collapsed the component with another of a similar layout that allows designers to utilize “zoom and pan” within a PhotoFlow.

All of these features combined together allows for a huge variety of customization, without ever entering the codebase. Our goal is that it becomes ever easier to produce PhotoFlow based stories on quick deadlines. 

Mobile view of the refactor

Outcomes


We continue to collect analytics and monitor this component’s use over the next few months. 

Two stories are now live with the new component. Check them out here:
The house color that tells you when a neighborhood is gentrifying.
Who was at Trump’s Inauguration? A guide to notable guests.


This site is always a work in progress. It was last updated February 2025.

Email →

LinkedIn →

Are.na →