Taking the wraps off TableTop

TableTopOver 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.

[flv:tabletop_progress.flv 600 244]

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.

23 insightful thoughts

  1. I know you don’t want any “I want to play with TableTop emails”, but this is technically a comment, so if you want anyone to… um… “play with TableTop”, let me know.

    I’m interested from a business perspective, of course, but I’m 16, so my business perspective (http://www.ambitiondesign.com.au) doesn’t count for much.

    Great blog, and I hope the whole being robbed thing works out all right.

    – Chris Hawkins

  2. hi…its a really good idea…congratulation…i tried ur webapplication…but there is a problem: there isnt the way to delete a project…
    i think its very useful coz i guess to use it for universitary projects that i’ve to do with my workgroup…let me know the next developments…

    sorry for my bad english :P…


  3. Well done! I like the implementation of a progress bar and it’s Vista-ness 🙂 Did you also created the icons?

  4. The icons were not created by us. They are from a free-license icon pack which I forgot what the name is.

  5. Great idea and nicely implemented. In terms of the aesthetics though the main “Tabletop” logo could be improved by having 3d characters, much like the style of the MSN-buddy.

  6. Very nicely done. Congrats. I hope this gets picked up and made available for free, like most other Web 2.0 project management tools. The ease of use is definitely a plus.

  7. Pingback: Geeking Microsoft
  8. I gotta say, this looks amazing. I’m currently doing a project management course at university and we’re learning how to use MS Project. I love how easy and simple TableTop seems to be compared to Project which can be a little intimidating. How is Table Top feature-wise?

  9. This project looks great! I’m thinking of many ways it would be usefull for my trade of work (architecture/ interior design).
    This would be great for Construction Administration to document the project’s progress., “to do” list, and to keep the Architect, Engineers, Contractors,and other tradesmen on the “same page”. And who dosen’t like nice graphics, and that AJAX is great eye candy, yet very productive.
    I would love to explore this more.
    Well, done!

  10. I just have to say how impressed I am with the overall look and feel of your project. Why can’t I get my programmers to make cool stuff like this?

  11. Long, if you and your class mates end up selling this to Microsoft or Google for 1.5 Billion dollars, please remember me, ok? No, I’m serious, I need at least 1 million dollars out of the 1.5 Billion, its the least you can give me.

  12. So, who is who? I guess you’re the designer and Justin the coder? Or is it equally divided?

    About the site, this could be the start of something. Imo you should expand this to include a mobile version of this site – it will then have a lot of potential.

    For example, a user can be bound to a group (family, students etc.) and then get tasks assigned (and the assignments can be set by the assigner to be viewable only for the individual, the group or the whole community). This would be great for both students and families.

    The thing is that there are a lot of sites giving a user different social and environmental stuff to the keyboard, but this could be your way into that. Later you can, if you will, expand the social aspect of this site – even with a better approach then Facebook, because it’s far from perfect.

    Good luck with this and give us an update someday.

  13. @Morten: Simply put, I designed and did a bit of coding. Justin did some designing, some coding and most testing. Keegan did most of the coding and database design.

    A mobile version is a great idea, but because mobile web access isn’t very popular in Australia, we had never thought about it.

  14. I personally don’t like the way things are organized in Basecamp. So I wouldn’t go for another Basecamp clone. What for? I’m a happy user of Wrike http://www.wrike.com, which is email integrated and gives me much more freedom then Basecamp could ever have done.

  15. Hey Scott, we don’t have any plans for a public release at the moment because we’re all on school break. Development-wise it’ll take a few extra month’s of work to get it to a stage where it is safe and reliable enough for production use, but I’m not sure if we’re all interested to put in that time and effort.

Comments are closed.