How we manage web projects
The tools and software we use on a typical web project at No Divide
On Dan’s #LETSTALKDESIGN show a question came in from Brett White on Twitter:
And we thought it would be great to get together and discuss the tools that we use when working on a typical web project.
You can watch the episode above, or if you prefer reading, then you’ll find everything we spoke about below — Enjoy!
The tools we use
.01 Slack
Slack is one of those amazing tools that has really gained traction in the last 18 months or so. Put simply, it’s a communication tool for teams — and it’s great for remote teams like us! You can create a channel for your whole team and everyone can contribute and get involved in the project, including clients. There’s also great integration with apps like GitHub, Twitter and loads more.
The way we have it set up is that we have a channel for every project we’re working on, so an example would be we’ve just launched Charity Bank so we had a Charity Bank channel and then we integrate that with all the different services we use.
We will often invite clients into a channel so that it can be a communication route with them (we have some American clients who exclusively contact us via Slack). It’s good for the client because it integrates with services like GitHub and Trello, so as we’re working on their project updates appear in the channel and they can see progress happening without us having to constantly send them updates.
Slack becomes a passive way for everyone on the project to stay up-to-date on a project without having to be in direct communication. Which is a big time saver, allowing us to focus on getting the job done.
… And it integrates with Giphy. Which is great sometimes, but more often that not — utterly terrible.
BUT — It also integrates with Trello…
.02 Trello
We use Trello for our project management . We take a sprint approach to the way we structure our projects.
Our Trello boards usually look something like this:
We have a column for reference/resources, one for the backlog of work, which is all the tasks outstanding for the project. A blocked column for any work that cannot be started due to another outstanding piece of work, there’s then an In Progress column for anything we’re working on right at that point, a big report column for any bugs that have been reported. A QA column for the client or another team member to check the work that has been marked for review and then finally a Done column for work completed.
This setup has been great for us as previously we all used different notes apps and could never settle on one. So having one place to check in and see what needs to be done is great. And being able to assign tasks to people means you can easily see what you need to do on any given project.
When you have both Trello and Slack working together, it gives a nice way for people to get a complete overview of what’s happening on a particular project. Even if you’re not working on it, and one of the advantages of this open communication is that it leads to spontaneous contribution, so if a client has asked one of the team a question and someone else knows the answer they can just add their thoughts to the Slack channel.
.03 Google Drive
We use Google Drive a lot, but it’s not typically seen by the client as much. It’s the one place that we keep all our documentation, contracts, service agreements etc.. And although our proposals go through InDesign, to be nicely polished up, they start out as a collaborative document in Google Drive.
Put simply, it’s a great tool that can be used for collaborative writing and well worth checking out.
.04 Dropbox
Of course, there’s probably very few people who’ve not heard of Dropbox. So we don’t really need to go into much detail here, but we couldn’t imagine a life without Dropbox for sharing work folders and large images with our team and clients. It just works.
.05 GitHub
Ryan has been using GitHub for a while (he even talks about it in his book, Version Control with Git). GitHub, or similar, is a must have if you’re working with a developer, and particularly if there are multiple people working on a project at the same time.
Beyond the fact that GitHub allows you to store a backup of your work in a remote location, the collaboration features and issue tracking make contribute greatly to the project management process.
No longer do you have the same issues that we once faced with FTP where files were on your machine and that’s it. The beauty of services like GitHub, Dropbox and Google Drive is that they are accessible from everywhere. So if you lose / destroy your laptop you can get back up and running fairly easily.
.06 Deploy HQ
If we’re working on a fairly standard web project, that’s built on Craft, (or similar) then we use Deploy to manage our site deployment.
You can set-up a webhook with GitHub so that when you push to a specified branch, it then triggers the webhook and Deploy deploys your changes to your web hosting automatically. It’s a really good service!
.07 Forge
We use Forge to deploy projects that include Laravel builds. This is a service that Taylor Otwell (who developed Laravel) built and it’s an intermediary service, that sits between GitHub and your hosting, and can be used to monitor changes and deployments, set-up SSL certificates, schedule tasks and much more..
It’s obviously perfect for Laravel, being built specifically for it, and allows you to use all of the tie-ins that Laravel comes with as standard. A great tool for getting your Laravel build online quickly.
When all of these tools work together something magical happens. You can be working on a bug in your code editor, make a commit, the Slack Channel is then updated, everyone working on in the channel can see the bug has been fixed and the client can also see the bug has been fixed. It’ll fire off to GitHub, GitHub triggers a webhook, Deploy picks that up and deploys it to your hosting. And all from typing in git commit -m ‘Grid layout bug has been fixed. Fixed #4.’. Which is a huge time saver for us here at No Divide!
For now, that’s it! We hope you found this useful, and please feel free to add comments / notes to the post or in the YouTube comments with the tools you use for your web projects!
Watch the rest of the #LETSTALKDESIGN series on YouTube — click here!
Let’s work together!
If you’ve got a project that you think we’d be a great fit for, then get in touch with us — we love to talk!
