Our project in on information visualization and we're attempting to present information is an easy and intuitive manner. We're hoping that users would be able to save time and proceed to be more effective in understanding the vast amount of information that was presented to them.
Remember the day you signed up for School of Computing and suddenly find yourself having to plan your 4-years here? Everything look so daunting. In addition to planning the 4-year, you'll have to plan your timetable (and deal with timetable clashes), bid for your modules carefully (Argh! Outbidded again!), look for CCAs to join, go for orientation, scout venues, get used to new environment, make new friends and so on. People who live on campus will have an extra step of having to move their stuffs on campus and having to shop for necessities. It's all very complicated. Well, welcome to a new chapter of life! =) But sometimes, wouldn't you just wish that part of the process could be easier?
Like most freshies, I was armed with my copy of the NUS Bulletin with me while planning my 4 years down here. Some people wanted to clear all their cores first. Some people wanted a balance of what they like and the core modules. Some people want to test their interests and proceed to take modules that they think that they'll like first. Some people choose their modules based on what would give them a better time-table (I had an Arts student friend with 3 free days per week back then!). Some people choose their modules based on number of bid points left, and choose modules to maximize bid points rolled over the next semester. Whatever it is, we're unique individuals and we probably want to do things our way.
The NUS Bulletin does its job quite well, but at first we notice that there will be a lot of flipping of pages to check descriptions to see if you'll like the module. Since most of us don't have a very huge working memory ('buffer?' =p), we tend to forget those we read first and only remember those we read last clearly. We were thinking, wouldn't it be nice if all the information were presented in a single page, then you save the trouble of flipping around. We think that people should be able to memorize a single page better than multiple pages.




Argh!! I'm going crazy! How to make sense of all these?Then we decided to take it a step further. Some of us play computer games and one thing that we notice is that mapping your modules could be similar to skill trees (in role-playing games) or technology trees (in real-time strategy games). First, you start off with the basic modules, and there are a lot of paths of 'upgrade' until you finally acquire a good arsenal of skills (or technology). Since we're unique individuals, there should be a lot of paths but it should lead to one goal:- graduation.
Or we could think of it like a map. If we go down to Google Maps, we would realize that there are a lot of information all at the same time (elevation, bus service information, places of interests, direction and so on), but we are able to tell direction and get the information that we want from a map through legends and other guides. I suppose many of us find reading a map intuitive (especially so for places which we are familiar with).
So we began a journey of mapping all possible routes you could take through School of Computing in NUS and condensing the information into one-screen. We believe this would be doing a great service to the new students. In addition, we hope that it looks cool too! (So that the new students can say, "I'm so proud to be in NUS, they have cool module map! =)")
We probably underestimated the mess that we got ourselves into and how convoluted our module dependencies are. Here is our first try, on paper, where we tried to organize the technical elective trees with color code. We used post-it notes so that we could quickly re-arrange and re-organize the tree as needed but it still looked messy at the end of the day:-
The mysteries of School of Computing modules.Refusing to give up, we tried again on another day, to get the mess more into an organized mess. =) We tried to make sure that the module dependencies (arrows) do not cross each other and we tried to make them straight (minimizing diagonals). This is inspired in some ways by circuit design (PCB design) where you have to route the copper in ways where they do not overlap:-
Now this looks somewhat like a printed circuit board. =)However, the general consensus was that while the module dependencies (arrows) look better, it is still not that intuitive and clear. We thought we could probably group more things together or use colours as a way of classification. Our third attempt was once again on paper:-
This looks a lot cleaner right?We tried to visualize the above
in Prezi as well:-

(If this isn't that clear, do click the Prezi link above to get a better view.)And one last attempt at the prototype, just in time for Home Assignment 2 submission. We tried to minimize crossing lines and adopt an outward radiating hierarchy. And our final version of the prototype, with minimal crossing lines and a outward radiating hierachy:-
Pretty!Our work has only just began. In the future, we hope to improve this by adding intelligent animations. For example, the user could just mouse-over one of the modules and all related modules should be highlighted and unrelated modules should be fade out or be blurred to background so that the relevant information should 'pop-out' to the user. It would be great if the tree could re-arrange itself to a simpler view when mouse cursor is over interesting points.
Also, the full view is convoluted and not always what the users want(or need) so we would also like to add features that allow the user to easily hide information that they don't need.