Dropfort™ is a web application that helps you organize your Drupal projects and manage all your Drupal websites in one place. At Coldfront Labs Inc. we created a variety of internal tools that we used to deploy and manage Drupal 7 applications and websites for our own clients. These include building virtual machines using vagrant and puppet, github and gitlab for version control and packaging releases. By using Dropfort™, these tools and their data are integrated into one interface thereby making it easier to package releases for production, observing modules that require updating, as well as displaying statistics for all of our sites and applications in one place. Coldfront Labs Inc. has released a beta version of Dropfort™ to the public and you can sign up at http://dropfort.com

Dropfort™ Logos Dropfort™ Logos

Building a Base

One of the largest challenges for staff at Coldfront Labs Inc., was figuring out how to put all the tools and features that the developers were creating into a single interface. My biggest challenge was trying to convince the developers to stop adding features before we figured out the workflows and interfaces for them. To allow for the developers to add new features and test them (as for all projects) we started with style tiles and created a living in-code style guide. The style guide allowed for all the UI components to be styled cohesively. In the event that new forms, fields or tables were added to the application - everything would look complimentary.

Dropfort™ UI Components Dropfort™ UI Components

The Application

Initially we went through iterations of both a light and dark interface. Eventually settling on a darker interface, in order to add more weight to the navigation and have the page content stand out. As for the dashboards, we decided to use cards to display information that could be moved around and rearranged in a more modular format. Inside pages that displayed content for individual nodes were provided with page headings and a slightly different design that distinguished them from the dashboards that contained varying types of content.

Dropfort™ UI Components Dropfort™ UI Components
Dropfort™ UI Components Dropfort™ UI Components
Dropfort™ Mockups Dropfort™ Mockups

Building a Product

To compliment the application we needed a product site to explain what Dropfort™ does and to provide updates on any new features. I designed and created a simple site that displayed the features upfront. Coldfront Labs Inc. wanted the website to be simple and straightforward. We knew that most of the people coming to the site would be signing up or logging in so those functions were displayed as main menu items. The blog and pricing options were located at the bottom of the site discoverable as a user makes their way to the end of the page.

Dropfort™ Landing Page Dropfort™ Blog

Marketing Material

Dropfort™ Marketing Material


Iterations and Features

Coldfront Labs. Inc is still in the process of building Dropfort. New features are being released each month. One of my favorite features of Dropfort™ is that you can easily create environments containing virtual machines with an GUI and customize them to have all the tools you need for development. Presently, the application is very task oriented and the design reflects a focus on data and function. Moving forward, there are definitely things that need tweaking in terms of workflow - but it’s a work in progress and something that I am proud to have made. It was important to me to stress to my team that although a feature/internal tool might exist, it does not necessarily mean that it is a good idea to put it into Dropfort™. The application still needed to make sense to someone who had never seen it before. Therefore, with testing, utilizing descriptions and including a help feature and walkthrough on each page - I think we accomplished that.