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.

You need to create individual Slack channels for every client project.

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.

On the right you can see the pinned wireframes, weekly plan and contract.

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.

project timeline created with TeamGantt

The project timeline is then added as the description of the project channel in Slack.

The description under blurred sectionis a link to the project timeline.

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.

The weekly plan post in Slack each week.
We created this document during the weekly review meeting so that we know exactly what to focus on.

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.

Workflow in Trello

You can remind teammates in Slack about Trello card due dates, share Trello cards in Slack conversations.

Integrating Slack with Trello for project updates.

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.

New Photoshop creates Artboards, pretty cool!

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.

Export the files for both the client and developer to see

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.

Pointers from client about the design.

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.

Get everything you want, no more PSDs to Developers

In conclusion

The project ran smoothly and still learning ways to tweak my process. Please share your process on the comments’ section below.


Found this post useful? Kindly tap the 👏 button on the left side :)


About The Author

Lewis Ngugi is a Design Consultant. You can connect with him on Website, Twitter, LinkedIn, Facebook and Instagram.