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.
Next, I lay out the requirements. The user should be able to:
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.
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.
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.