Catch the Worm is web based game that aims to take nightowls and transform them into earlybirds. Change your waking habits over a period of 70 days by becoming a Wormcatcher.
Getting up in the morning is something we all struggle with, throughout our teenage years and in some cases right through to early adulthood. Changing a sleeping habit takes a great amount of time and motivation and as with any major shift in habit often results in failure. It was with this problem in mind that I hit upon the idea of 'Catch the Worm'.
By turning the act of waking up each morning into a game, I could provide the motivation and incentive needed to reprogram the habit. Every time the user was successful at rising early they would be rewarded, and when unsuccessful penalised.
Central to CTW is the rising plan, this takes the time the user would normally rise at and the time they would like to rise at, and constructs a plan were they rise increasingly early each week until the target time is reached.
From research it was evident that it took up to 70 days to cultivate a habit, so this is the period of time I based the plan on.
As a Wormcatcher each user must capture and rehabilitate, the dreaded 'Verm.' This new species of worm has come into existence because of the widespread use of harmful pesticides and has result in a new breed of dangerous mutant worms, hell bent on revenge for the treatment of their earthworm cousins.
To catch the Verm, is as easy as 'punching in' at your allotted time each morning. How early or late you punch in directly effects the number of Verm you will catch that day. If you're too late or don't turn up at all, you will be fined a proportion of your earnings for the week.
Not all Verms are created equal, some are rarer or more dangerous than others. The higher the rarity or danger level the more you can expect to get paid. To catch the more dangerous Verm breeds you must first prove your skill by collecting the required amount of experience to unlock each danger level rank (5 in all.)
As you make your way up the rankings you have a higher probability of catching more profitable Verm.
Catchtheworm.co was created, designed and developed by Will McNeilly (me) a 24 year old Web designer based in Belfast, Northern Ireland.
Having graduated from a Foundation Degree in Interactive Multimedia Design at Belfast Metropolitan College, I went on to study the same course at Degree level in University of Ulster which I will graduate in June 2011. Catch the Worm was developed as my final year project.
I have been working part-time as an in-house designer for McNeill & Thriftway Travel, Belfast and World Travel Centre, Dublin for four years.
You can find me on twitter as @willmcneilly
When I first decided on taking the idea of 'Catch the Worm' and making it reality, I knew it was quite an ambitious task. Requiring me to take on a wide range of roles; game designer, PHP developer, UI Designer and Illustrator.
About a third of the total time spent on the project was thinking of the main concept and honing it until I had a clear idea of how the game would play out.
Quite Early on I worked out how the Wormcatcher grading system would work, the logic that determined how Verm would be caught, the attributes and stats that each Worm would have.
Soon after getting the story line and the game concept finalised, I started work on how the Verm would look. Each would be based on well known character or have a special deadly ability. I started with the base Verm, who would act as a template for all the others.
Probably my greatest challenge in the whole project was developing the logic that would run the game. Having never developed a web application before and with only a rudimentary knowledge of PHP, it was a steep learning curve.
The use of Codeigniter framework was extremely valuable in simplfying tasks such as form validation and database queries. Learning this framework was quite a task in itself as it was the first time I had ever used the Model, Controller, View paradigm.
I would like to thank Tim McKinstry who was responsible for the creation and illustration of some of the Verm; Vermsicle, Vermbeard, Vermibilly and Verminstein.
I would also like to thank all the lecturers at University of Ulster for their help and advice over the last couple of years.
I went through one and a half Moleskines throughout the course of this project using it for sketching illustration concepts, wireframing and working through the odd bit of logic with diagrams.
Invaluable for quick paper-prototyping
Used for Wireframing, Infromation Architecture and ordering copy.
While Malarkey would have us believe it's best to design in the browser, I still prefer going into Photoshop to at first create rough concepts of each page in several iterations and then put the best ideas together in polish final version ready for slicing.
Photoshop was also used for colour correcting all illustrations used within the project.
All Verm illustrations where created within Illustrator.
My text editor of choice.
Another Panic product used for FTPing to server.
Used for Version Control. Responsible for getting me out of a number of tricky situations.
The language all the logic was programmed in.
When styling the front end of the website I did so with modern Web Browsers in mind using the latest CSS3 properties. The CSS3 was used to add an extra layer of 'polish' to those browsers that support it. On those browsers such as Internet Explorer 7 & 8 that don't support it the users experience will be different but not worse.
I set out to use many of the new elements in the HTML5 specification as possible. One that was particularly relevant to this project was the 'time' element.
The framework on which everything is organised.
Invaluable in making DOM manipulation easier. I used it extensively through the website for adding interactive touches. It's also used as the framework that runs under all the plugins.
A great plugin by Jan Sorgalla that I used to provide the interactivity in the Plan View.
Used to position form labels on top of text inputs, keeping all the forms clean and tidy.
Featured in the logo and used as the brand typeface
Used as the sans-serif of choice for the Web.
The serif that is used in any extensive body copy.