Planning a website build with Trello
2019 was a great year for me in terms of productivity and getting things done. All the tasks I checked off my todo list put me in the top 1% of all Todoist users. I've used that same level of enthusiasm for productivity to improve our website build process at my current full time job to track and action website tasks using Trello.
In this post I'll give you a high level overview of how I analyse a design, as a UI developer, and create Trello cards for the task of implementing it. This makes a clearer process for not only developers, but project managers and other stakeholders.
Project types
Initially we had one Trello board per client. All project tasks, IAT/UAT bugs and retainer work were put into a single board. While this does keep everything in one place we did have some mid-level projects, such as updating a registration process or a site rebranding, which would get lost amongst retainer requests. We experimented with columns for different types of work but I suggested it was better to have multiple boards per client, depending on the type of work. Prefixing the boards with the clients name would help keep them close to each other in the listing view.
A new board should be created for the following types of work:
- A brand new website project
- Retainer work
- A mid-level or redesign project
My approach detailed here works for both brand new website projects as well as medium-level or redesign projects. Suggestions on a good retainer board can be discussed in another post.
Setting Up
Our first step will be to create our board and set up columns. Create three columns called: pages, modules and technical. What goes into these columns is discussed below but they cover all the development tasks we need to work through.
A personal preference of mine is to turn off board images by default. Some projects can have many cards, and images in the listing view can become quite distracting and messy.
The Columns
Pages
By the time the creative reaches the development teams each page type in the sitemap should have been designed. List out each page type here with a link to the corresponding design mockup. This could be homepage, article listing, article detail or generic page depending on your project.
As you work through building the pages, add a link to the page on the staging site to make it easier for QA testing to locate and test the page.
Modules
This is where you'll go through page by page of the designs and screenshot every block you come across. Each block will have it's own Trello card. Paste in the screenshot and give the block card an appropriate name you'll be using while you code. Naming things is hard, so if you do it at this point, it will be easier when you come to code it.
When going through the design with a backend developer, each of these module cards can be expanded upon with things you'll require from the backend developer. API endpoints, custom WYSIWYG styling, or even how we would expect the client to put in the data via the CMS.
During this review period, it's likely questions will arise which might have been missed at the planning stages. What map service API are we using? Does the client have permission to use certain fonts? What's the expected user interaction and what animations can we use to add a bit of flair. All these questions can be detailed against each of the modules. Use Trello's categories to tag up any cards that need clarification to make them easier to spot.
Technical
The technical column should be left for the backend developer to add cards to for anything on their side. There are sometimes things they need to do which don't cross over with the designs or the frontend. Form data collection, for example, would be something for a backend developer to focus on.
Moving Along
As things progress I usually make secondary columns to the ones above to move cards to when completed, eg: pages complete, modules complete and technical complete.
Just before QA, all the modules and technical columns can be archived. As mentioned, keeping the pages column active can aid the QA team in finding the right pages when they are going through the designs and testing.
If you have a better way of running a web project via Trello I'd love to hear (or see!) what you do to keep things clear and running smoothly.
Bonus Tip: By adding four dashes ---- as a Trello card name, you can create a divider to help break up columns even further as seen in the screenshots above.
