.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.
Two initial areas stood out:
Image preparation - 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.
Screenshot capture - this is more unique to healthcare websites, the primary client base for the agency. Legal teams 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.
Another area was the QA of sites, but this required a deeper dive and will likely be a discussion and post of its own.
To address these needs I built two command line tools to allow developers to execute these tasks without leaving their code editor interface.
Compressing images in bulk
To solve the first 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 users to get exactly what they need.
Automating screenshots across content-rich websites
For the second issue, 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.
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 actions that can be added for closing cookie banners, opening accordions, or even logging in to gated portions of a site.
Getting perfect screenshots is not an exact science, and there is still work to be done, but the time savings from this tool compound each time it is used, and the feedback has 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."
For future versions I plan to add more robust configurable actions to support a wide variety of things including filling out forms and navigating between modals before capturing.
Outcomes
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.