Earlier this year, Thornley Fallis & 76design worked with the Office of Consumer Affairs at Industry Canada as Secretariat for the Consumer Measures Committee to design and develop a new online presence for the Canadian Consumer Handbook.

Launched in April 2010, the handbook provides users with a searchable and easy-to-navigate platform as well as the option to build a customized handbook that only contains information they are interested in.

The Handbook is intended to help users become better-informed and more confident consumers. It offers information on a wide range of topics such as online shopping, contracts, housing and home renovations, identity theft, collection agencies, and much more, to help users build their buying skills.

Along with consumer tips, the Handbook includes a directory of government and non-government contacts useful to consumers.

The Handbook was created and is updated by the Consumer Measures Committee. This Committee is a joint federal/provincial/territorial committee which provides a forum for national cooperation to improve the marketplace for Canadian consumers, through the harmonization of laws, regulations and practices and through actions to raise public awareness.

It is with great pleasure that we announce the launch of the City of Ottawa’s Light Rail website!

Many Ottawans felt as though they were left in the dark when it came to the City’s big Light Rail Transit (LRT) plans. Well folks, there is no longer any need to feel mal-informed. Thornley Fallis and 76design in collaboration with the Light Rail Implementation Team have created an “information-sharing mechanism” that arms the citizens of Ottawa with more than sufficient information relating to the project plan.

The communications efforts applied by Thornley Fallis & 76design were strategic and smart; we have received positive results on the site and its search functions, information content, structure and ease-of-use.

The website in particular has proven to be the most crucial piece of the puzzle. The website we’ve created is meant to engage the entire City; to provide all the facts our users require to fully understand the project and to provide them with a platform to communicate their feelings towards the project.

With the integration of various social media tools (Twitter, Facebook, YouTube), interested citizens are able to keep up-to-date and connect with the Light Rail Implementation Team with any questions or concerns. Any questions submitted to the team will be answered in a timely fashion; responses will then be posted on the website. The LRT website helps make a difference by providing comfort to Ottawans by reminding them that Light Rail green and it will only improve the City.

Since yesterday’s launch, the LRT project is getting great media play, print and radio; it is noted that there are happy people all around.

How many people does it take to handle the crux that is a paper jam? Turns out – all 9 of us housed in the pit of 76design. In a surge of energy usually reserved for client work, we turned our attention to a self-imposed initiative. Three hours of diligence produces a product, a history behind the product, and a website dedicated to solving an issue that riddles offices across the plant. It’s with our pleasure that we introduce PC Loadletter’s Paper Jam: the real full-page spread.

A good friend of ours and past comrade, Matt Wallace of paradisal.ca fame, a stock-photography agency, is launching his annual Paradisal* poster design contest.

There is no cost to enter. The winners get 25% of each sale once they’re printed, a $300 gift certificate for use at www.paradisal.ca and 5 printed copies of their design and 1 of the other winning design. Last year there were 64 submissions with entries coming in from all over the world.

Maybe 76design will simply enter the results of our Aural Design Challenge.

Last year’s winner

Overview

This first round of 76design Skunkworks gave us (Jordan Boesch and Shaun Scanlon, both web developers) the opportunity to utilize the Twitter API to create a fun project.

We decided to try to integrate Twitter with Mozilla Jetpack.  According to the Jetpack website, Jetpack is “a newly formed experiment in using open Web technologies to enhance the browser, with the goal of allowing anyone who can build a Web site to participate in making the Web a better place to work, communicate and play.”

What this means is that Jetpack is an API which allows the average web developer to develop add-ons for the Mozilla Firefox browser using languages they already use on an every day basis.   This was an attractive feature of Jetpack as web developers.

Project Phases

Concept Development / Brainstorm
After some brainstorming we decided to develop an unobtrusive twitter feed add-on in the style of a sports highlight ticker.  This was to be a collapsible bar at the bottom of your Firefox browser which could display new tweets and past tweets.  The tweets were to scroll in a manner similar to a sports or news ticker.

Design Concept
Jordan applied his design skills to develop a concept in Photoshop.

During this phase we came up with the idea of a news flash for new tweets.

Prototype
The work for this phase was shared between us.   It involved taking the Photoshop mockup and converting it to a regular HTML/Javascript/CSS file to be used in a regular browser.    We were able to get the basic logic done in creating the prototype.

Jetpack Integration / QA
We found this was the most difficult phase.   Jetpack has specific JavaScript hooks that are used to set the status bar icon for the add-on and to handle the initial loading of the JavaScript.

Within the scope/context of Jetpack a few of JavaScript’s default variables (such as “window”) were not accessible so we had to look for alternatives.   We also tried to extend the basic functionality of the prototype.   The extension of functionality required a lot of additional quality assurance time.

Challenges

• Jetpack development must be tested in the browser
  • The Jetpack plugin allows for development of the browser which is great because we can use common web development debugging tools
  • All code must be entered within a tiny textarea box on a webpage
  • This is very cumbersome because it is next to impossible to read an entire plugin within the box
  • We had to essentially work in a separate text editor and copy and paste into the box on the website
  • This makes for a frustrating debugging process

• Working on a single JavaScript file in a team environment
  • A Jetpack plugin must be self contained within one JavaScript file
  • The Jetpack library does allow access to the JQuery JavaScript library which allows for easy manipulation of HTML and CSS
  • Even with the ability to use JQuery, this set up does not lend itself well to team development
  • The fact that there is no separation of logic and visual layers into separate files makes it very difficult to contribute to the file without conflicting with teammates’ changes
  • As well, Images must be hosted on a separate server and linked to from the JavaScript
  • This makes for a cumbersome development process
• Jetpack is really only JavaScript-like, it’s not pure JavaScript
  • Because of the scope of being within the Jetpack API we found out the hard way that not all of JavaScript’s built in variables (such as the “window” variable) are accessible
  • This required us to revamp code to work around these unexpected roadblocks

What is next?

We could:

• Extend the current functionality to finish off the “news flashes” feature.
• Add some more spark to the animation and effects.
• Re-brand this type of concept to be used for client projects.    Some clients may be interested in having a Firefox plugin to market their brand.

Conclusion

Jetpack while an excellent concept probably needs some work to allow for easier development.   Editing a huge JavaScript file in a small textarea box on a webpage isn’t very realistic.

Other plug-ins, such as those created for Windows Sidebar or Google Desktop, are comprised of several files (similar to regular web development) and are then added to a Zip archive file.  This concept is a much more realistic development scenario.

We would not recommend Jetpack development for group projects, but could be useful for single developer projects.

All good things must come to end, and it is time to say goodbye to 76design’s beloved cork board homepage. We have launched our new 76design.com website, and there was no room for the green post-it notes.

In tribute of the bored of cork we constructed a full sized replica in our office with genuine green sticky notes.

The bored of cork will live in the physical world, and on our maintenance pages.