How I hacked my workflow

As a freelance web developer and product maker, I have to constantly switch back and forth between editing code and mockups, managing to-do lists, executing command lines, checking email and Twitter, and analyzing user behavior. This requires doing lots of repetitive actions all the time. Launch the code or image editor and open project files. Open the web browser and navigate to a project board in Trello. Launch Terminal and type commands in it. Everything is accessed in different ways and stored in different places. That turns the workflow into a real mess, especially when working on multiple projects. I thought that I could dramatically improve my productivity by gathering everything I need for my work in a single place and organizing them by projects and workflows. Everything would have a right context and finding something I need in my work wouldn’t turn into a nightmare anymore. That’s how I came up with Freeter—the app that does just that.

In this article, I’ll show how I boosted my productivity with Freeter with an example of a workflow I have when I work on it. Hopefully, this will help you see how you could enhance your workflow too.

Workflow

First, I analyzed my workflow, including all “sub-workflows” and anything I use often, to find what I need when I work on the Freeter project:

1. When I develop an app or a website, I need to open the app/website files with the code and image editors, access my task manager, launch the file watcher, open the repository with GitHub, make backups, and build the app/website releases.
2. When I discuss new features with the community, I need to access the Freeter Development Forum, the roadmap post, and my task manager.
3. When I check emails, I need to access one of my Google Mail accounts.
4. When I check mentions on Twitter and reply to tweets, I need to access notifications and Emojipedia.
5. When I analyze users’ behavior in the app/website, I need to access reports in Google Analytics.

Now it’s time to turn the workflows into dashboards in Freeter — one dashboard per workflow to keep everything organized and easily accessible.

App/website development

To have quick access to all things I need for developing the app/website, I set up a dashboard with the following widgets:

• File Opener, which opens the project folder with the code editor.
• File Opener, which opens the design mockups with the image editor.
• File Opener, which opens the project repository with GitHub.
• File Explorer, which helps to browse through the project folder and open files.
• Commander, which launches the file watcher (gulp watch).
• Commander, which builds the production version of the app/website.
• Commander, which backs up the project.
• Webpage, which embeds the Trello board into the dashboard.

App Dev dashboard

This dashboard enables me to immediately switch to the development workflow, launch all the development items with a simple click, and have quick access to my tasks.

Community

To discuss new features and bug reports with the community, add new features to the public roadmap, and turn them to tasks on the Trello board, I added a dashboard with three Webpage widgets on it:

1. Embeds the Freeter Development page into the dashboard.
2. Embeds the Roadmap post into the dashboard.
3. Embeds the Trello board into the dashboard.

Community dashboard

With this dashboard, I can discuss new feature requests, add them to the roadmap, and add tasks to Trello from one window.

Email

To check emails, I added a dashboard with the Webpage widget embedding one of my Google Mail accounts. I’ve set Session = Project in the widget settings to access different Google accounts from each project.

Mail dashboard

This dashboard allows me to get quick access to a specific Google Mail account without the necessity of logging out and logging in if I previously used another account.

Twitter

To check notifications and tweet on Twitter, I added a dashboard with two Webpage widgets:

1. Embeds Twitter’s notification page into the dashboard. I’ve also set Session = Project in the widget settings to access different Twitter accounts from each project.
2. Embeds Emojipedia into the dashboard.

Twitter dashboard

With this dashboard, I can easily check notifications from Twitter and write a tweet with emojis.

Analytics

To analyze users’ behavior in the app/website, I added a dashboard with two Webpage widgets embedding Google Analytics.

Analytics dashboard

This dashboard allows me to see reports on both properties (app and website) at the same time.

Switch between workflows like a superhero

Now, when I need to work on something, I just push Ctrl+Shift+F to bring Freeter to the front, open a dashboard having the things I need right now, and immediately start getting things done. No more hassle with searching for things in many different places! I can easily switch between workflows in my projects and stay focused at the same time.