Recently, we built a web application in the market for 9 weeks. Every day, we review the results of the data from the previous day and iterate on the application - the design, copy, and product offering.

Each day, updates are made to the site. Design considers different emphasis on different elements, color boldness or neutrality, and updates copy to align with the signals from A/B tests that are being run, continually re-orienting focus on project-long and weekly goals, as measured by KPI's.

In the flow of a project, the pace is extremely rapid. Each day is spent sensing the response from the market, and in turn, responding by spending time creating new content and product features. And repeat.

Looking back after 9 weeks, it is natural to reflect on how the design process evolved and what we learned. What might that look like?

We created snapshots of each version of the landing page to help convey the evolution of the process. Technically, I stepped through Git history to screenshot about 10 relatively major design updates.

Though, talking it over during coffee with my colleagues at Neo, I questioned how can we get visual history for "free"? How about emitting the artifacts automatically from our natural workflow?

Problem

how can we get visual history for "free"?

This particular project was deployed on Heroku, and Heroku offers Deploy Hooks. This means that Heroku can send a message to a web service of your choice on a deploy.

Solution

I created an endpoint (a URL where you can send data) to accept the data, and screenshot it, and save it to S3.

The screenshots are captured in a folder on S3 and named with the SHA of the deployment. So, the end result of a single deploy is a folder called website-name with a screenshot in titled something like 659188.png.