.jpg)
In agency settings development work is often fast-paced and demanding, leaving little room for thought about workflow and experience.
In my current role, I have started to apply an ethnographic style approach to boosting developer satisfaction and increasing throughput. I started by observing and assisting with several projects, while noting outlier processes that took inordinate amounts of time and were mentally draining for the development team.
Simplifying asset handoff - compressing images in bulk
As much as devs and designers tried to be on the same page, assets were almost always handed off at incorrect dimensions or in formats that needed additional preparation. Clients in particular would often send folders filled with 50mb uncompressed files direct from a photographer.
To solve this issue I built a simple command line tool can be run inside a folder of images. The developer is prompted for desired width or height (the other dimension will be adjusted to match without distortion), format, and quality/compression level.
.jpg)
The tool will then compress and output all images into a new folder with filenames that reflect the settings (eg. image-1-w-1500-q70.jpg).
This allows developers to grab entire folders of assets and with a single command optimize them to be placed within a given context, all without leaving the code editor.
There are certainly other compression solutions available, but having access to this tool greatly streamlines the process, presenting the minimal configuration options needed for developers to get exactly what they need, without going back to the designer/production team.
Highly regulated industries rely on screenshots for legal review
Pharmaceutical clients make up the primary client base for the agency. Legal teams in this industry needed pdf screen captures of every page of the website (desktop and mobile) that were extremely time consuming to capture, especially for large websites with lots of dynamic content.
These captures would go through multiple rounds of legal reviews, with the entire site needing to be recaptured from scratch for each round.
To address this pain point a command line tool wasn't quite enough. Websites varied drastically in structure, so instead I created a screenshot "starter kit".
The starter kit is a package that enables a developer to point at a sitemap of a website and the kit will open a virtual browser and screenshot every page of the site, then automatically combine these into a pdf.
.jpg)
.jpg)
This is much more robust than a basic "full page screenshot", which often fails on websites with any dynamic content, interactive elements, or animations.
The kit contains configurations that can be toggled on and off for pre-scrolling to force any animations or lazy-loaded images to appear, as well as "scripts" that can be added for closing cookie banners, opening accordions, or logging in to gated portions of a site.
Getting perfect screenshots is not an exact science, and I am still regularly adding functionality to this tool, but the time savings compound each use, and the feedback has already been rewarding:
"[The screenshot automation] was invaluable in getting [client project] across the finish line and was incredibly helpful for quick turn rounds of legal review and for easily marking up edits internally on multiple [client] projects. It's making an ongoing problem much less tedious, and the #efficiency gains are growing each time we use and refine it on new projects."
Command line tools reduce switching costs, improve efficiency, and keep developers happy
Both these tools have a two-fold impact. The time savings alone justifies the effort spent identifying and solving these user pain points, but beyond that both these tasks are inherently frustrating and unfulfilling for developers.
By creating these automations using native developer interfaces these tasks are turned from burdens to painless steps in the process, that even can be satisfying to run and watch work in the background.