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.

I am pleased to announce  the launch of  Thornley Fallis & 76design’s new online presence.

Our new websites, conceptualized, designed and developed by  our team of creative masterminds and technology all-stars, exemplifies our capacity to push the limits of innovation  in the world of social media and digital marketing.

Thornley Fallis & 76design is made up of individuals with fun, smart and professional personalities; personalities that have all contributed to the success of marketing & communications projects. To fully demonstrate  the range of personalities, talent and intelligence our  team has to offer, we’ve done something  a little outside the box.  Something very brave… or maybe something very stupid – we’ll let you know ;-)

We’ve created a live LifeStream for every one of our employees. This is more than just a standard funny profile picture and biography.  It is an aggregate of their work and online profile, intended to paint a picture of who they are, what they do, what they think and what they are interested in.

To explore the diverse and unique characters at Thornley Fallis and jokers at 76design, take a look through our people profiles and find out who you could be working with on your next project.

Not only is our team exceptionally talented (and good-looking), we are experienced & passionate about the work we do.  While adventuring through our People pages, zoom over to the Work & Services sections to see what Thornley Fallis & 76design has to offer.

My colleagues and I hope you enjoy perusing through our new sites.

Oh and one more thing… if you like what you see, don’t hesitate to call us, we’d love to hear from you!

76design is proud to have launched pictureitdowntown.ca late last week during an event which included a submission from Mayor Larry O’Brien.  This campaign calls on Ottawans to share photos of their  favorite activity or destination in downtown Ottawa for a chance to win valuable prizes. The contest offers daily prizes for the next 6 weeks; a Grand Prize package from Henry’s will be awarded at the end of the contest.

Every member of our team has contributed in one way or another to this campaign. A big high five goes out to our entire team for their hard work.  This project was completed with the City of Ottawa, and representatives from Ottawa’s eight business improvement areas.

Campaign Elements:

• Print (Newspaper, Buses & Bus Shelters)
• Radio
• Filming & Production of the neighbourhood walk through videos
• Social Media campaign  including Twitter, Flickr, YouTube and others.
• Public Relations support
• Design and Development of the pictureitdowntown.ca.
• Contest Support & Analytics

Many 76designer’s have already shared photos of the city we live in and love.  So come on Ottawans, get out and picture it downtown.

Our skunkworks Twitter applications are complete!  Over the past eight Friday afternoons our team has been working feverishly on experimental design & development projects using the Twitter API.  Why?  To learn and explore!  The web is a constantly changing landscape, and to be on top of our game it is necessary to research and explore. Not to mention, we are a creative and ingenious bunch who crave experimental projects to work on.

Skunk works or skunkworks is widely used in business, engineering, and technical fields to describe a group within an organization given a high degree of autonomy and unhampered by bureaucracy, tasked with working on advanced or secret projects.
- Skunkworks definition on Wikipedia

76design’s Skunkworks Recipe:

76design donates time each week (usually Friday afternoon), and the team donates an open mind, fresh creative ideas, energy, and finally a working demo. The projects are intended to encourage exploration, therefore the skunkworks recipe itself is iterative and malleable. Through skunkworks we will be testing new approaches to web dev with the hope of integrating the findings into our daily work. That said, the following was a guideline for our first project, but we expect this recipe to change over time.

Week 0: Preparation of project Theme & Constraints
Constraint breeds design. Therefore we present the team with a challenge while leaving plenty of room for creativity. The challenge also centers the  experimentation around a particular area of interest. For this project the Theme was Twitter, and the main constraint was the web application had to use the Twitter API.

Week 1: Brainstorming & Team Selection
The team gathered for a single large brainstorming session where everyone threw ideas at the whiteboard.  This generated a large quantity of ideas, and encouraged the team to be creative, critical, constructive, and considerate.  Following the brainstorm we broke into teams of 2 and selected the concepts we wanted to experiment with for the next few weeks.

Week 2: Research, Concept Refinement & Work plan
Now that the team has had a full week with their concept, they refine it into a concrete plan. Week 2 is all about editing  the ideas & features down into a reasonable plan which can actually be accomplished within the short time line. This exercise involves documenting each task’s level of effort and priority. At the end of the project the teams are asked to compare the outcome to their initial plan.

Week 3, 4, & 5: Design, Code & Test
These weeks are all dedicated to designing and coding the project. The teams check in briefly every week to discuss their progress and help each other with challenges. Inevitably, unforeseen issues or fresh ideas will cause the plans to change, therefore the teams are encouraged to work iteratively using agile methodologies. Teams are graded on their ability to define project scope and manage scope change.

Week 6: Present working demo to the entire team
The projects are now ready for a functional demonstration, and everyone gathers in the boardroom for a short 5 minute presentation and Q&A period for each project.

Week 7: Followup
The teams will write a reflective blog post about their project which includes an overview, the challenges faced, the outcome, and the potential next steps for their project.  Teams will also share the insights they gained from the skunkworks experience.  Furthermore, teams will post relevant information to our company wiki for future use. The Teams are free to continue the projects if they wish, or publish them online as they are.

So stay tuned. The first round of skunkworks twitter applications are complete and we will be posting the team’s project followups over the next week or so.

A pat on the back is in order to our very own Ben Watts who responsibly committed his source code to SVN and wound up with commit number 8000.   Who would have thought that we could have come this far with our favorite software version control system.  This event only happens once per repository, and we are very proud of you Ben.

If we celebrate this much for 8000, I can’t imagine what we will do when we reach 10,000.  Let the countdown begin!

What does a retired General, a former Olympian and a man they call “Dog” have in common? If you said they’re all speakers available through the National Speakers Bureau, you’d win the big stuffed narwhal.

For over 35 years, the National Speakers Bureau has garnered a reputation as the source for event speakers. They are the sole agents for over 100 speakers, and they work with over a thousand others in North America and abroad.

They came to 76design with a request, upgrade their brand. This included a new logo and revamping their site. During our analysis of their brand, we felt that their existing website didn’t accurately reflect the class of speakers they had, nor did it “speak” (so punny!) to their great customer service.

76 updated their corporate logo, created a brand new site with a focus on bringing their speakers to the forefront, improving the speakers search functions, and we also created a new interactive module on the homepage. Overall, our goal was to facilitate the user experience, but also motivate potential clients to call one of their reps to assist them through the booking process. The new National Speakers Bureau site launched January, 2009.

Take a spin on NSB.com, and book yourself a speaker or two. On a personal note, I am awaiting the confirmation that Strombo is coming to my Super Bowl party. Fingers Crossed!