A Redesigned Experience for Developers and QA Teams

Drawing of tugboats pulling containers

We have created a handful of products over the last ten years (Drupalize.Me, most notably) and Tugboat is the new rising star. In 2013, our development team saw an opportunity to vastly improve productivity for website projects. This vision became a reality by offering early iterations of the Tugboat product to our clientele. Tugboat was a hit from the start, allowing developers and QA teams to preview a live website for each individual feature, bug fix, or big idea. After several years of product iteration and improvement, Tugboat has received a complete product redesign and rebuild, along with a shiny new marketing site. We’re pretty excited to help teams begin working more efficiently. 

Take the stress out of onboarding

Through an in-depth user and market research process, we uncovered a pain-point in earlier versions of Tugboat and competitor products that needed to be addressed in the redesign: a cumbersome project onboarding process. As the redesign process unfolded, we made answering this question a priority: how can we help teams achieve success earlier in the onboarding process, even when the development stack for their website is very complex? 
What was the answer? Infrastructure as code. Provide teams with a config.yml file, alongside example code. This approach allows developers to spin up their first project, sync a repository via their version control provider of choice (e.g. Gitlab, Github, Bitbucket, or publicly-accessible git repository) and choose an account payment tier. Once the config file is submitted, developers are able to view their projects within a few simple steps. 

Manage previews and project activity from one simple dashboard

Taking inspiration from leading tech tools like Github, Slack, and Dropbox, a high-level theme for the Tugboat redesign was “show more than we tell.” According to our user research findings, developers are accustomed to minimalist, clean interfaces with a clear hierarchy of components and content. Stakeholders appreciate visual components in order to simply screenshot key updates for their presentations and meetings. With these themes in mind, we gave Tugboat a facelift — where once text-heavy listings feature preview screenshots, and identifying visual changes on the fly is accomplished at a glance.
Tugboat's redesigned UI
Three landing pages side-by-side illustrating Tugboat's Visual Diffs
The visual difference tool highlights changes made on your last pull request.

Usability testing helps to craft user-friendly copy for Tugboat.qa

Focusing only on a small set of prioritized talking points, and letting the visuals speak for themselves, is a powerful, yet seemingly-risky strategy for many organizations. Our goal with the Tugboat.qa marketing site redesign was to provide dead simple clarity for the big questions, and provide detail pages with more information, leaving the key pages simple, clean, and easy to parse. We tested several versions of the marketing copy with various audience segments, and landed on a version of the site copy that tells a meaningful story for both developers and stakeholders. 
Tugboat's redesigned marketing site on desktop and in a mobile browser

Take Tugboat for a spin

Tugboat clients are so excited about the site’s new experience. Sign up for your free account today, to help your team share work immediately and effortlessly, with anyone, via a secure URL. Benefit from the real-time feedback loop web development was meant to have. 
If your team needs help redesigning your product or marketing site, our design services team would love to chat with you about your needs and goals.
For more about visual regression testing, check out our article: Kickass Visual Regression Testing with Tugboat.