How we use Slack, Trello, TeamGantt, Illustrator, Photoshop and Zeplin for a design project.
It was a chilly morning, I had just slept 4 hours after a night’s coding session. I received a Slack message from the client. He is pissed!!!
The project pace was the issue. The main concern was they needed provision for actual dates along with what the client should expect from their end and even send proposed review/follow-up dates upon delivery.
That was gibberish to me at the time because this project was so rushed I didn’t even get time to organize myself leave alone the project.
The most painful part was when I was told, “You are ideally running this project and we are the clients, so I’d say it’s upon you to take lead on this and give us the regular feedback, updates and drive this project to it’s conclusion.”
Boom! Boom!! Boom!!! Boom!!!!
It’s a wrap ladies and gentlemen! I have been told to be more professional. Manage the project like the pro we believe you are!
Turning point
That was a wake-up call and I needed to do a serious 360 paradigm shift. So where do I go? Google Search obviously, my best and first option. I found books with 1200+ pages, 15-paged websites with the history of project management, images of diagrams and finally!! Guess what?
A MIRACLE!!!
It’s still work in progress. You never know, it might work for you agencies and freelancers out there! Plus, it makes you feel professional. :)
Task 1 — Project based channels
There was an already existing private Slack channel that was created separately for this project by the client. Tech-savvy clients. Team members were guys who were involved in the project, CTO and I!
We shared documents, images, links, and feedback in the channel. This keeps everybody up to speed on any changes in direction.
Task 2 — File Storage
I created a Dropbox folder for the project documents where the team and clients can access the legal documents, instead of always uploading them on Slack. All you do is copy the share link on to the Slack channel and you will be asked to integrate. Please do.
Task 3 — All files pinned to project channels
I pinned the Wireframe PDFs, Site Image JPGs, contract PDF to the channel so that every person knows what the team is contractually bound to do.
Task 4 — Project timelines
This is the miracle! I started using TeamGantt for creating project timelines and share with the clients team. Prior to this, I had used Excel to create the timeline which was A LOT OF WORK!! TeamGantt detailed out the intended timeline so easily, so I had the same expectations the client did. It also covered meetings and milestones.
The project timeline is then added as the description of the project channel in Slack.
Task 5 — Post weekly plan
I created a new Slack post every week and pinned it, replacing the post from the previous week. It outlines each individuals overarching goal for the week.
Task 6 — Integrate Trello with Slack
The Trello based workflow is important. You create cards and I use this style of listing tasks in projects as I work.
You can remind teammates in Slack about Trello card due dates, share Trello cards in Slack conversations.
Task 7 — Design
First, Information Architecture is an important step in UX. So start by creating Wireframes in Illustrator.
Then once the client approved, we were good to go forward with the design.
Task 8 — Integrate Photoshop with Zeplin
Now the best way I have come across for making life easier for the client and the development team is by using Zeplin. A masterpiece. You add the Zeplin Plugin onto Photoshop and you export the work to Zeplin.
Task 9 — Collaborate
The client can now give you feedback about design on Zeplin where you can defend your direction. All of this happens instant and records are kept on Slack when you integrate them.
Task 10 — Save the Developer
One of the beauties of Zeplin is it gives you CSS there and then. Smiles on the designer, project manager, client and developer.
In conclusion
The project ran smoothly and still learning ways to tweak my process. Please share your process on the comments’ section below.
