Matt Modrowski logo

Matt Modrowski

Quench - Case Study

Screenshot of Quench

In mid-2015, I published an article on my blog called "Using Gulp in Your Web Design Workflow." The online design community reacted positively to the message, amassing over 5,000 hits in the first two days of publication. What I learned from that successful response and the ensuing discussions on social media was that designers were interested in task automation, but were having trouble getting started.

Enter Quench. Quench is a Gulp file and project generator that was created to solve the problem of introducing non-technical users to the world of Gulp automation. It allows users to select options particular to the project they're building and download either the resulting Gulp files or a generated project framework.

Automating automation tools might seem duplicative, but Quench has helped a number of designers get started with automation tools that otherwise would not, giving them a solid foundation to build upon and learn from.

Laying the Foundation

My design explorations begin by analyzing the project goal: to introduce non-technical users to Gulp automation. First, what do we mean by non-technical users? These are users that don't have a background in programming; they might be familiar with JavaScript through the likes of jQuery or some other library, but they don't have the techincal knowledge to piece together their own automation scripts. The persona I had in mind as I approached this project is a web designer who is skilled in visual design, but needs some hand-holding when it comes to development.

Next, I lay out the requirements. The user should be able to:

Sketch It Out

Quench Sketch
The first series of iterations: a simple one-page application.
Quench Sketch
The second series of iterations: a more robust and teachable three-panel interface.

Next, I do a quick sketch session where I rapidly sketch out design and layout ideas that meet the project requirements. With Quench I began with two main design approaches. One was a very simple one page app. It presented a basic introduction to Gulp alongside a few options broken down by category. An additional slideable pane gives more information about what Quench is and how to use it. The other approach was a more robust one-page interface, using a three panel layout for selecting options, previewing the Gulp project structure, and previewing the selected file.

The first series of iterations was approachable and easy to understand, but it was obfuscating important supporting information about Gulp and how to use the resulting generated files. I liked the simplicity of presenting the list of options on its own, but as I made my way through these series of sketches, I realized a more teachable interface was necessary for users.

The second series of sketches helped to achieve that teachable interface by including instantly updated code in a preview pane. With the file explorer panel, I played with the additional idea of allowing users to download a fully functional project framework with basic files and directories based on their options. This series of sketches helped me move in the right direction, but now things were too overwhelming—what was meant to be a simple and approachable interface was becoming too unwieldy.

Refine, Refine, Refine

Quench Sketch
Refined sketches combining the option list with a pared-down version of the file preview panel.
Quench Sketch
A rough sketch of the final design, incorporating the application alongside introductory information.

Finding a happy medium between the simplicity of a basic list and the complexity of the panel approach became the new goal. Some time and a few more sketches led me down a new path, combining the option list with the a pared-down version of the file preview panel. I ultimately decided that the opportunity for education through the instantaneous feedback a file preview panel provides is important enough to become a new requirement.

I've honed in on the functional requirements, but Gulp basics are still missing. Inspired by product landing pages, I explored a basic feature list layout, presenting how Gulp can help in a design workflow alongside next steps for using the generated files.

Bringing It All Together

Quench Full Screenshot

Response and The Future

Quench launched on Wednesday, May 6, 2015, and spread like wildfire thanks to some loving users on Twitter, Designer News, and Reddit. I continue to receive great feedback and suggestions for ways to improve the application and overall experience.

Like all design projects, the design process for Quench continues indefinitely as I integrate new features and iterate on existing functionality with the help of other users on GitHub.