Taking the wraps off TableTop
Over the course of 13 weeks, I’ve had lots of fun and frustration working on a group studio project as part of my degree. Last night, we (Keegan, Justin and I) were awarded one of two ‘best project’ prizes in our year level so I thought I’d show you what all the fuss is about.
It’s called TableTop - a simple project management tool for light personal users. It’s one of my most ambitious programming and design projects undertaken and I’m pretty proud of what we’ve been able to achieve in 13 weeks, only 7 of which were spent programming.
Project management software is aplenty to say the least, so our goal was to make it fun, rewarding and simple. We drew a lot of inspiration from 37Signals and their Basecamp project management product which are clear leaders in the field of Web 2.0 software and design. However, unlike their product, we were targeting much less-involved users such as students who aren’t familiar with the business approach to project management and neither need its extensiveness.
Because the live demo is not ready for public access, I’ll just walk you through some screenshots.

The first thing a user will see if the home screen. Besides it being a promotional page, it also served as the login and registration page.

Of course, what you don’t need/use will fade out when you hover over each other login or registration forms.

We used a lot of AJAX (courtesy of jQuery) to make the user experience as fluid and responsive as possible. So input errors are validated on-the-fly and does not force the page to refresh.

Once you do sort out your password problems, you will see the dashboard. This is a quick overview and portal to all your projects current and past. It includes a summary of all the tasks to be completed and any new changes made to projects since last login. Although it currently works as intended, this page could still be improved.

Once you click on a project, you will see the project summary - the gold nugget of TableTop. Here is pretty much where it all happens. From top to bottom, it has the project title, project description, a status summary, list of tasks, list of files (documents), comments and history.

We use AJAX to allow for in-place editing (inspired by Flickr) so users can edit the project title and description without leaving the page.


We use a simple progress bar to indicate the percentage progress of the project (number of tasks completed / total number of tasks). If the project has any overdue tasks, it is then “behind schedule”, also the progress bar becomes red.
The progress bar responds live and also animates when you check/uncheck items in your task list.

The cool thing about the tasks list is that you can re-order the tasks simply by dragging it around.

Adding a new task is also really simple. Even when picking the person(s) responsible for the task, auto-complete will find the name and emails of all the people who are involved in your current project.

Another aspect of projects is the documents page. This serves as a file repository for all the documents and file versions which make up a project. We group files by documents, which can be for example a “business plan” or “logo design”. In each document, you can upload as many files as there are relevant to that document. Together, you can make comments on documents.

By putting together files and comments in a single view, we found it was much more intuitive and easier to follow as a conversation.

Last but not least we have the profile page, which is not all that special.
In case you’re wondering, we used a combination of PHP5, MySQL, jQuery and late-nights to make this work.
What we finished with is definitely not ready for production-use. It has little to no security verification (although the security infrastructure exists) and I’m sure you could exploit via some SQL injections. But it works great as a prototype.
If anyone out there is interested in this product from a business perspective (so don’t send me “I want to play with TableTop pretty please” emails), we have thought of a few viable business models during our planning and implementation stages so there could be opportunities here. I think I speak for the entire group that we’d love to put more time and effort into this if there are outcomes, so feel free to get in touch.
Written by Long Zheng. Read more great feeds at is source WEBSITE
no comments.
Read more articles on blog.
- [+] Digg: Feature this article
- [+] Del.icio.us: Bookmark this article
- [+] Furl: Bookmark this article















