Author: Turhan

5 must-have project management tools to improve your web development workflow

Pixel Kicks brochure

We use a variety of tools at Pixel Kicks for managing our web design and development projects and always keep and eye out for new apps to see if they can help improve our workflow.

When trying a new service we look at how it can improve things for our team as well as improving the experience for our clients.

Below are some of the core tools that we use on a daily basis.

Trello

trello.com

Trello is a visual tool that we use to plan our projects, break down what needs doing and assign tasks to the Pixel Kicks team.

Each project has its own Kanban-style board, which is broken into different lists which denote the status of the cards that are on it, for example To-do, Doing and Done.

Tasks are put on to cards which are then moved across the lists as they are worked on. Depending on the project, a card could be just a simple job, or a more in-depth piece of development, which could be further broken down into separate checklist items on the card.

Trello board

The great thing about Trello is that you can easily see at a glance all the tasks for a project, who they’re assigned to, and what their status is – and because we can have several large projects on the go at the same time, Trello is indispensable in keeping track of where everything is at.

However, to see an overview of the status of all those projects we are working on, we still use the ubiquitous physical whiteboard and Post-it setup. #agencylife

Whiteboard with Post-it notes

Planyway

planyway.com

Used by companies such as Apple, Netflix, Uber and now Pixel Kicks, Planyway extends Trello by adding powerful functionality such as milestones, calendars and timeline views. We use it as a way to schedule work for a sprint and plan what each developer will be doing for the next few weeks.

In the web team, we typically use the team timeline view which shows all the upcoming tasks on for each developer. However, to plan all the different phases of a project, it is easier to use the newly introduced board timeline which shows all the tasks we have scheduled for a project.

Planyway calendar and timeline views

Planyway can also display external calendars. We pull in our team holiday calendar from Charlie HR so we can see at a glance if any developer is off over the next few weeks – and make sure we schedule their work accordingly.

We couldn’t go back to using Trello on its own again and we are in regular touch with the team at Planyway giving them suggestions for future updates and feedback on the latest features. According to their development roadmap, they’re currently working on a mobile app which we’re looking forward to using.

Basecamp 3

basecamp.com

Probably the biggest change in how we work day-to-day and communicate with clients came when we started using Basecamp. It’s a multifaceted app and helps keep everything in one central location.

Message Board

At its simplest, the Message Board feature is used to replace email.

It keeps all messages for a project in one place, and each conversation is threaded meaning it is easy for all team members to keep track of the discussion – unlike with emails where there can be many messages flying back and forth, on various subjects with not everybody necessarily copied in. Basecamp brings order to that chaos.

One of the reasons our transition to Basecamp has been successful is the fact that it doesn’t require our clients to have to sign in to use it if they don’t want to. An email is sent when a new message is posted, and if the client replies to that email, it is automatically added to the Basecamp conversation.

Basecamp message board

To-dos

To-dos are another invaluable feature in Basecamp. Here, we can create a number of lists of things to do and share them with the client. They can also be used to used gather feedback, for example a list of changes needed on a website before launch.

Our developers can then work through these to-do lists and tick off items once complete. Basecamp allows comments on pretty much anything, so if we have some questions, or need clarification, we can simply comment directly on the to-do item which the client can then reply to.

Because these lists are centralised, they are kept up to date and everyone is aware of their status – unlike back in the day when we’d try to manage updates with emails going back and forth and attaching a Word doc each time with the latest amends.

Docs & Files

Sending files to us, for example high quality product photographs or Word documents containing website copy, can also be done via Basecamp. Again, this keeps everything to do with the project in one place. It also means we don’t have to worry about expired WeTransfer links, or having to send files as attachments across multiple emails. Using Doc & Files, clients can simply drag and drop files from their computer to their Basecamp project.

Documents from services such as Google Drive, OneDrive and Dropbox can also be linked to and files can also be created natively using Basecamp’s own cloud documents which include full version history logging. This is great for writing up technical specifications to share with the client and for collaborating on design briefs.

Confluence

atlassian.com/software/confluence

As you can imagine, we have a lot of information that we share between ourselves at Pixel Kicks. For the web team this includes everything from onboarding information for new starters and useful code snippets, to detailed technical checklists for taking a site live. As our team continues to grow it is important to make sure everything is kept up to date and in one place.

Confluence is like our own, personal Wikipedia. And like Wikipedia, anyone at Pixel Kicks can create or edit a page. Our developers regularly update our documentation which helps us streamline our processes.

Adding new page in Confluence

As well as basic text and images, Confluence has some powerful macros allowing us to give the pages richer content and make the content (which can sometimes be quite hefty) easier to navigate. This includes adding an automated table of contents and sub navigation to pages.

You are also able to pull in content from other sources which is useful as it means we don’t have to maintain that content across multiple locations – and that any external content can still be found easily in our central Confluence site.

https://twitter.com/Confluence/status/1116033130203353090

Harvest

getharvest.com

When working on projects, each of our designers and developers track their time using Harvest. This is linked up with Trello meaning a timer can be started from a specific card, which captures the details of the task along with which project it belongs to.

As we have been gathering this data for a while, we can produce some really insightful reports that will help us improve our processes going forward. For example, we can break down time tracking by team member, project or task type. And because it is linked with Trello, we get even more detailed information about the task that was worked on.

We also pull data from Harvest on to a dashboard using Databox. This is then displayed on a large screen in the office so we have a real-time view of a selection of reports on rotate.

Databox dashboards

 

Meeting room with screen

Other tools and apps

We use a number of other apps and services that whilst aren’t strictly project management apps, have really helped improve our processes for web projects.

Previously we used Photoshop for putting together our web page layouts. However, over the past six months, we have made the transition to using Adobe XD. As well as being a package built specifically for wireframing and designing websites, there is comment feature allowing clients to leave feedback directly on the design itself.

Airtable is a cross between a spreadsheet and a database. We have started using it to store sets of data we would usually keep in a spreadsheet, but because of its database-type capabilities, we can link them together. An example would be having a table of websites linked to a table of clients.

Whilst Zapier doesn’t actually do anything on its own, it is used to integrate with different services you may already use. It can then perform automated actions between them. For example, we have created a Zap from Airtable to Trello. We use Airtable to keep track of a certain type of tasks. When a new task is added, the Zap automatically creates a new card in Trello – where it is ready to be assigned to a developer.