Although I joined Asana back when it was a fairly new service, I have been unable to start using it properly. The main problem for me was desktop access, opening Asana again and again is slow, and keeping a pinned tab is annoying and difficult to find. What I really needed was a small native app, which could at least show me the tasks quickly (optimally a small widget on screen) and let me do the basic updates (completion / comment) without opening the main Asana website. And it had to support offline – so I was not constantly dependent on internet access when looking at task details. Since we were actively trying to deploy Asana at Marketlytics – it was time to find a solution. I combed through the Apple OS X app store, then through Chrome Web store. There were wrappers around the Asana’s main website – but the experience was still not optimal. Searches on Google revealed other people looking for the same solution but there were no answers. At the end of the week it was clear – the solution had to be created.
I did not spend too much time thinking about the design. Asana’s own design is top-notch and I tried transferring the design elements. The core problem was to design for a small interface – I wanted to keep this widget on screen. I opted in for an inline task detail design to reduce context switching and also integrated subtasks into the single view. Once I had all the elements figured out – it was time for implementation.
I was originally planning to go for a native Mac app – but I then realized the overhead would be too high. A web app container would be much faster to code in this case. Thus I turned my attention to Chrome apps. A Chrome app can behave like a native app, with its own window and dock icon. The app itself is a web app – so it met the criteria.
Next up was the frameworks. Styling was easy – bootstrap would suffice the basic design. A simple theme on top did the basic styling. For JS framework, I chose Angular. Together with Rectangular I could prototype this app really fast. Also a post on using Angular with Chrome Apps on the documentation assisted the knowledge transfer. I kicked everything off by scaffolding the app using Yeoman, adding the libraries using Bower and configuring a factory for the Asana API. In no time I had a basic list of tasks showing using their API.
Over the next few weeks (this was a side project), I continuously improved the app – slowly adding features to it one by one. Each week I would build the app and publish it to all the employees of Marketlytics who would then use it and send me feedback. This cycle was very important, for it allowed me to understand what was important and needed for this application.
After several iterations the app was ready. It is still very basic – it is essentially a task viewer. You can configure the workspaces and projects, do basic filtering by assignee, status and completion. You can add comments and upload files, and view details like hearts, followers and subtasks of a particular task. The two favorite features for me were the global toggle (command + shift + 5) which shows and hides the app instantly, and the auto refresh, which checks for changed tasks on a 5 min interval and gives notifications on desktop.
Our whole team is now using the Asana Task Viewer (still working the name) to check their tasks. We are also looking to improve it for a more wider audience. Using chrome? Download it from here and let us know what you think about it!
