Under the Healthline media portfolio, each website publishes an upward of 200+ articles per month. To meet that demand, we have a team of photo editors that conceptualize, find, and produce article art sourced from photography stock sites. Given their workload, this takes a huge amount of time, effort, and cost.
Often finding one image to represent a complicated, or sensitive topic, increases production time. Additionally, by continually using generic stock imagery that have non-exclusive licenses means any competitor can use the same image. By depending on stock sites, we are missing an opportunity to express each brand’s visual identity.
To increase production efficiencies and create unique branded art, I initiated and created a drag-and-drop collage system. Within this library of components included multiple layouts, different collage accents, and swatches of textures and colors. When used in combination, it allowed for hundreds of different layouts that could be created by the photo team. The overall production of the web assets can be made under five minutes.
My drag-and-drop system was designed to be scaled, which meant different brands in Healthline’s portfolio could use the library as well. The result of my design system means photo editors (and any non-designer) can create collages and custom artwork without the additional scope of an illustrator or graphic designer. This initiative has decreased production time and empowered our photo team to create branded images that meet their daily needs and workflows.
Preset Layouts
This library was built for Healthgrades.com. The mockup showcases a few preset collage compositions editors can choose from. Each color block denotes where the editor can place an image or texture.
Final Collages
Using the preset layout, the photo editor simply drags the relevant imagery and drops the image in a designated clipping mask in Adobe Photoshop. This system cuts down on production time while creating uniquely branded artwork.
Collage System
I designed this system to be used in Adobe Creative Libraries, which enabled the design system to sync across all our teammates work laptops. By designing for the cloud, we’re also able to push out any updates to the design system or rollout improvements.
Scaleable Solution
This system was designed to be scaleable across the portfolio of brands. With minor tweaks to color and accent components, we are able to tailor each design system to each brand’s visual identity.
Textures and Accents
Medical News Today uses textures in their branding. Within the MNT design library, there is an additional layer that you can drag-and-drop on top your preset layout.
Medical News Today Collages
Collages made by photo editors using the collage system for Medicalnewstoday.com
Short Turnaround? No problem.
The collage system cuts production time for major promotional campaigns, like Healthline’s Season of Self Care.
Spread the Workload Around
With a design system in place, the system I created allowed multiple designers to work together in order to complete artwork for 40+ articles during our seasonal campaign. The preset templates established increased efficiency and output to the holiday production process.
