silverlight

Who is Tanagram and why you should care…

On July 2nd last year Tanagram turned 18 years old. It was a time to reflect and celebrate our “childhood” and look to a future of unlimited possibilities.

One of our many ruminations were on the topic of our brand and our legacy as an interactive design firm. While we’ve been recognized as the first at many great things, we couldn’t help but wonder how we remained relatively invisible in the marketplace today. As a result of our pondering we have realized that the presentation of our brand, as intentional as it is, is too complex. We are too complex. Don’t worry, we’re not going to become less complex, we’re not even sure we could do that if we tried. Instead we are spending some time to help all of you understand what makes Tanagram unique in the interactive development space and there is no better way to get started than to shout it out. So here goes:

———————

Tanagram is unique in that we design and build software for the digital frontier. Thirty percent of our project portfolio is made up of government funded “advanced” research. We do this specifically so that we can apply our learning to our commercial client projects and our ability to make ideas real to our government projects. We focus on three specific areas:

  1. Complex workflow applications (e.g. a hyper-local enterprise media management tool for Geomentum.com)
  2. Innovative web sites that change the way the Internet is used (e.g. http://www.skybeautiful.com and http://universityofchicagopress.com)
  3. Mobile applications that bring data to users in contextually relevant ways (like our Augmented Reality Platform).

———————

Here are links that might better illustrate Tanagram’s niche in the interactive design marketplace:

Complex Application:

Innovative Web:

Mobile / Augmented Reality:

In addition we’ve really turned on the PR machine. Above you’ve seen links from the New York Times, Gizmodo, and ABC featuring our work. Here are a couple of other great stories that you might not have seen:

If we haven’t lost you yet, here’s a Google Blog Search with the infinite number of posts about us.  YAY VANITY SEARCH! :-)


Microsoft IE9 – Here’s why you should care.

Greetings! In case you’ve been living under a rock for the last few days, Microsoft launched the 9th version of Internet Explorer (IE9) on Wednesday. Tanagram was honored to participate in that event by creating a “demo” site that illustrates the capabilities the new browser brings to us. Before we go into that awesomeness, I wanted to post something about the prevalent skepticism that I encountered while speaking with the Press. 

Why would anyone be skeptical about the launch of IE9 you ask? Well, let’s just say Microsoft is trying to recover from a string of disappointing browser releases. :-) With IE6 at the top of the most-hated browsers of all time, (at least by developers), Microsoft IE7 and IE8 were improvements, but still failed to overcome the stigma created by IE6. Despite the clamoring of the developer community Microsoft failed to hear that we wanted a browser that unconditionally supported W3C code standards and didn’t require workarounds or the use of Microsoft proprietary markup to achieve sustainable results. 

I should say that I don’t speak for Microsoft, I am not (you can decide for yourself) biased by the opportunity to work with them. This post is intended to place them in a critical and honest light. A light that I believe they would appreciate. While I was wandering the event floor, I had an opportunity to talk to product managers, coders, and even senior leadership on the Internet Explorer team and the one message that I heard over and over is, “we are going to make this right, this release is for developers and users.” Having worked for 4 months with alpha and beta builds of IE9, I can tell you that this release isn’t perfect, but the overall improvement is huge. Here’s how: 

Relinquished “ownership” of the web

Dear all, Microsoft got your message. They heard that you are tired of them trying to “lead” the web development space with proprietary markup and software platforms that complicate cross-browser web development and provide zero transparency with regards to the machinations running beneath the surface. For the launch of Internet Explorer 9, Microsoft funded (not bribed!) the World Wide Web Consortium (W3C) to speed the ratification of many key elements coming in the new HTML5 specifications. The key here is that Microsoft has taken steps not to steer, but to encourage development of standards that will make the web better for all of us. Not to put the W3C in a bad light, but they aren’t the fastest group when it comes to ratifying new standards (sheesh). This is probably a good thing. To me, this step means Microsoft is learning to play well with others. You can draw your own conclusions.

Really, really good hardware acceleration

One of the outcomes of Microsoft’s involvement in the standards ratification was the approval of the SVG and Canvas element. These are two of the primary elements used to create the gorgeous animations and interaction that are typically associated with Adobe Flash, and Microsoft Silverlight applications. What happened next was really really beautiful. Microsoft has the best people on the planet when it comes to software compiling (my opinion) and that’s why Visual Studio dominates the software development space. Microsoft took what I call their code-compiler-rocket-scientists and had them build a compiler into IE9. Not just any compiler, this particular compiler takes the reams of JavaScript and HTML 5 we create and smashes into a binary that runs in the super fastest parts of your computer. The nitrous-oxide injection occurs when the compiled binary hits the GPU (the computer that lives on your graphics card) and holy wow is it fast! I had an excellent video of Chrome and IE9 (shot myself) running the same application simultaneously and how Chrome was turtling away while IE was enjoying an “Arnold Palmer” (while juggling) at the finish line, but I left my phone on the plane and … well you get it. I invite you to test out the performance yourselves here. Please review the code for the test drive sites too. You’ll find no sneaky IE9 tunings, just clean HTML5. I want to make one more point here and that is to acknowledge Apple has been hardware accelerating for 5-ish years now with Safari and Quartz but do not currently have Canvas or SVG acceleration. Firefox also has acceleration but has, for some reason, disabled it in the current release of their browser. Likely what you will see is both browsers chasing Microsoft with rapid updates to provide the same acceleration. Yay! We all win. Thanks Microsoft. 

Open Code

Yup, no hiding anymore. This is the new web. If you want to know how a particular HTML5 site runs, right-click and save-as my friend. IE9 will download all of the JavaScript and JSON files used by the app for your review. This is a game-changer. Think about all of the folks out there who built their businesses with proprietary code. Gone. Sure you can obfuscate the code, sure you don’t have to use HTML5 but given that HTML5 can and does solve the need for rich user experiences and is community defined, I believe it won’t take long for developers to move away from closed platforms like Flash and Silverlight. That’s where I’m spending my next dollar for sure. Part of me does question why Microsoft has seemingly doomed their own Silverlight platform but I’m sure they have a plan…

So what does this mean? Microsoft, to me, is sending a message to us. They are saying the web is not about proprietary code, it’s about service and relationships. We all want rich experiences, and it’s time they got out of the way and instead helped make them happen. IE9′s minimal chrome (no extra junk), pinning (you can pin a site to your task bar), lightning-fast, built-in debugging tools, new malvertising protection, and overall support for HTML5, CSS3 is a win for all of us. 

Here is a link to the application we built for the demo: www.skybeautiful.com My next post will talk about this in detail. 


We’re making movies!

Tim is showing the world our Touch Behaviors on Touch.codeplex.com


Touch.Codeplex.Com – Multi-Touch for everyone, now.

Tanagram is proud to announce the launch of Touch.Codeplex.com. Our exploration into the state of the Natural User Interface (NUI) connected us with folks at Microsoft and together we identified an adoption issue. While the technology to build Touch applications exists, it is currently cumbersome to implement. Marc Schweigert and James Chittenden had an idea to use Expression Behaviors (literally drag-and-drop onto any object) to act as a bridge. Together we launch this humble beginning with a bold vision. We hope you join us as we expand this library in the months to come.

Writeboard Panorama of calculation debugging.

Writeboard Panorama of calculation debugging.

Project Overview
The APIs in WPF4 plus the Surface Toolkit for Windows Touch make building common touch scenarios easy. However, implementing many of the same touch scenarios using WPF3.5SP1 or Silverlight 3/4 involves writing a fair bit more code. Furthermore, the touch APIs across WPF4, WPF3.5SP1, and Silverlight are different.

Project Goals
The goal of this project is to simplify building common touch scenarios when using WPF 3.5 SP1 or Silverlight 3/4 by using Expression Blend Behaviors to provide a consistent way to implement these scenarios across WPF & Silverlight. Expression Blend Behaviors can be used within Visual Studio without a dependency on Expression Blend by downloading the Expression Blend 3 SDK. You can also find more Expression Blend Behaviors at http://expressionblend.codeplex.com/ and http://tinyurl.com/ExpressionGalleryBehaviors.

Project Roadmap

  • Beta Release of core Scroll and TranslateRotateScale behaviors to developer community. <– You are here
  • Revised Scroll and TranslateRotateScale behaviors
  • Gesture Behavior (repurpose awesome code from here)
    • Erase (Back and Forth Gesture)
    • Create (Single Finger Draw ‘+’)
    • Delete (Single Finger ‘X’ Drawn Over Target)
    • Select Lasso (Single Finger Draw Lasso)
    • Split (Single Finger Diagonal Line)
  • Hold Menu (Single Finger Touch & Hold Context Menu)
  • Draw (Three Finger Pen Grasp)
  • Clone (Two Finger Double Tap)
  • Open / Edit (Single Finger Double Tap)
  • Select (Single Finger Tap)
  • Global Rotate (Five Finger Grab and Rotate of Application)
  • Global Perspective Rotate (Five Finger Pressure to Rotate Application Perspective)

See the whole deal here.


Joseph Juhnke caught on the Red Couch

I may have had a drink or two or perhaps the interviewer was particularly charming. Either way I opened up for the folks at Level 3 and shared our dreams and visions for where Digital is going to take us in the coming years. I wish you could have seen the interviewer’s face. These were not answers he was prepared to address. Tell me the truth… Do I sound like a nut? Check out the other interviewees here. Great thinking and commentary from all.


Tanagram presents Big Shoulders

The dust has settled, we’ve caught up on our sleep (Rudy is a sleep camel), and now we would like to reflect on the Phizzpop competition. We really had a blast “Phizzing” and “Popping” the challenge. While we don’t usually share intimate project details with the public, Phizzpop was purely conceptual work so there are no lawyers to hunt us down. That said, we’re thrilled to share the gory details with you.

Assignment
Our assignment, from a high level, was to engage teens between the ages of 13 to 18 and get them excited about the 2016 Olympic bid. We were to build a system that would empower them to show their support, build a community, and create momentum showing the world that the 2016 Olympics could be held no where else. The result had to include a rich interactive experience using Microsoft Silverlight technology, three days to design and build it and 8 minutes to present it. You can download the full assignment document here. It’s a great read, very well prepared.

Method
Tanagram, with development partner Geneca, responded to the challenge using the same processes we use to develop social architectures for clients like Tribune Interactive.

  1. Understand target demographic and project goals
  2. Define quick-convert subset(s), key penetration points and growth/sustain model
  3. Prototype, test and evolve

With three days to produce results we didn’t explore the situation with our typical rigor and we didn’t have the opportunity to field test prototypes but initial feedback on the results has been very strong and we’re very satisfied. 

Understand target demographic and project goals
During our presentation I joked that Rudy spent the weekend hanging out at American Apparel watching teens. Truth be told the internet and some high-level research from our friends at Ogilvy provided us with our pool of insights. Obvious findings included teens are extremely socially motivated. They care a great deal about social status, peer recognition, and to a large extent fame. Interesting findings included 97 percent of today’s teens carry a cell phone and do a great deal of connecting via SMS or text messaging. The phones they carry are not rich media devices like the iPhone but instead hand-me-down Motorola Razors, or cheap carrier-branded phones.

Project goals included:

  • Building a large community rapidly (the Olympic bid decision is October 2, 2009)
  • Designing a system that would be valuable before, during, and after Olympic events (we added 2012 AND 2016 to our goals)
  • We added building a system that would capture and execute upon the goals of WorldSportChicago, an Olympic bid leave behind organization dedicated to encouraging youth to achieve athletic excellence
  • We added help change the U.S. perception of exercise and athletics including motivating people to get out and burn a few calories
  • We added pushing the social networking domain by exploring real-time connectivity experiences

Define quick-convert subset(s)
The key to rapidly growing a social network is to leverage the power of multiples for expansion. This is done by identifying those members of your demographic set that are most easily captivated and converted to use your system and giving them tools to recruit new members for you. We chose “athletically inclined youth” as our champion subset because we found they were most likely to have knowledge of and be interested in the Olympic institution, they were already participating in an athletic program, and likely had some form of basic support network (meaning potential recruits) already in place.

Key penetration points
Key penetration points are valuable offerings that enhance the lifestyle of the champion subset. Key penetration points for our system included:

  • A place to record and publish athletic achievement
  • A place to voice opinions and build integrity among a community of peers
  • A platform that provides easy addition and presentation of text, audio, photos, and video streams
  • A mobile component that leverages available technology in ways currently unavailable to our champion subset
  • A system that encourages real-time participation and interaction multiple times daily
  • A brand association that improves the desired perception of the athlete

Growth/sustain model
We found that one of the keys to the degree of success of an athlete was a strong support network. Friends, family, peers, and even competitors connected to give support and guidance for the athlete in training. We designed our system to enable athletes to recruit a support network by adding fans to their distribution list for their training blog. With a meager goal of converting 1 million athletically inclined youth each recruiting an average of 10 fans we were satisfied that we had a model that would expand appropriate to our needs.

We built a ranking competition / reward system into our model to help motivate the recruiting process. The athlete’s ranking in our system would be determined by the number of fans in their network, the amount of interaction with the system, and donated calories provided by exercising fans.

Fans, once signed up, would receive both blog and statistics (i.e. new best time) updates from the athlete and could respond with messages of encouragement (improving ranking). Fans could also “donate” calories burned doing basic exercises to athletes to further add to the athletes ranking score. It was critical that all of these activities be tied to the Olympic bid. At the very start, sign up as an athlete or a fan includes a digital petition showing support for the 2016 bid. Athletes could also flag themselves as Olympic potentials in the system and in doing so gain additional ranking points and benchmarking capabilities.

Athletic training requires dedication and daily commitment. Our system was designed to be a key component in the training process and because of that it would be very relevant to our champion subset’s daily needs. We designed our system so that athletically inclined youth could capture/monitor their training progress, share it with their supporters and even benchmark it against peers and Olympians. Our system would provide connections between athletes at various levels of training; novice athletes could connect with Olympians for inspiration and guidance, expert athletes could connect with others for support and to share best practices. To maximize the value of the interactive system we built a rich-media blogging platform that enabled athletes to post (in addition to text) audio, image and video streams of meets and other events. The video blogging system was enabled by Microsoft’s Silverlight Streaming cloud service, a system that allows simple upload, conversion, and hosting of video files (up to 10GB for free). Our goal was to develop a system that enabled athletes to build a digital record of their career, a monument of their effort.

Finally and perhaps most exciting to us, we built our system to be fully enabled through SMS. For the demonstration we used a 3G GSM modem connected to an ActiveSMS server to show a small scale version of what our system was capable of. For purposes of the presentation we did not expose the full feature set (even though we sent and received ~300 SMS messages in a period of 8 minutes) but our system was designed to enable subscription, bi-directional communication to multiple subscribed circles (perhaps by sport) for both athletes and fans, performance statistics entry by the athlete on the field, and the ability to send cheers to athletes as they compete. We thought it would be cool if athletes carrying a cellphone on silent could get occasional nudges (vibrates) from fans wishing them well. Testing would determine if this was annoying or distracting. We were on the fence.

Why Big Shoulders?
Carl Sandburg has had his poem “Chicago” associated with far too many initiatives but for us we referencing it allowed us to talk about Chicago without making our concept about Chicago (the Olympic bid is a U.S. initiative) and it also allowed us to talk about a support network in an interesting manner. Big support comes from big shoulders.

A note about athletics in the U.S.
It will probably not come as a shock that athletics in the U.S. are in decline. We found one study tying the decline in athletics to the tripling of obesity in teenagers since 1974. Another study found that today’s teens are less able to get and hold jobs because of lacking athletic experiences. Obviously studies all have their slants, but it’s clear to us that athletics in America need our help. We built our system to allow fans to donate calories with the hopes that if one person did 10 push ups and it wasn’t that hard and did it again, perhaps they might consider a regular exercise routine, maybe even develop over the years to have Olympic aspirations of their own. Physical fitness is a key health issue in the U.S. increasing fitness will reduce health care costs, improve stamina and positive attitudes in practitioners and even teach values like honor and commitment. The value of hard work is a lesson being lost on today’s teens and America will benefit if we can find a way to teach it.

Big Shoulders screen shots

Big Shoulders home screen pristine

Big Shoulders home screen pristine


Big Shoulders home screen with SMS text flowing in background

Big Shoulders home screen with SMS text flowing in background

[caption id="attachment_439" align="alignnone" width="150" caption="Big Shoulders home screen with Rudy hot state"]Big Shoulders home screen with Rudy hot state[/caption]
Big Shoulders home screen with Rudy Details open

Big Shoulders home screen with Rudy Details open

[caption id="attachment_441" align="alignnone" width="150" caption="Big Shoulders home screen with Rudy Stats screen open"]Big Shoulders home screen with Rudy Stats screen open[/caption]

Big Thanks!
Special thanks to the folks at Microsoft (Chris, Bob, Josh, Brian, Sara) for inviting and supporting us. Thanks to our team-mates at Geneca for their support. Supreme thanks to Rudy Chou and Matthew T. Boeke for staying awake for three days to develop this awesome concept. You guys rock!


Phizzpop Highlight Reel!

Congratulations to Manifest Digital for winning the Phizzpop Chicago 2008 design challenge. It was a good fight and you guys came packin’! I’m proud to say by unofficial tallies Tanagram came in a very close second. (I may need to retract so stay tuned). We will post the full details on our solution this week but for now you can enjoy the highlights reel below. 

P.S. We hijacked this video from Chris Bernard’s Design Thinking Blog an excellent source for all things convergent between Microsoft, User Experience, and Technology. 


Digital Champions Sharpening Swords

We’ve been a little quiet but that’s because we are spending all of our free minutes leering at our competitors in the Phizzpop conditioning training. We’ve been digging through the dusty catacombs of C# code looking for golden treasures while avoiding the Indiana Jones-like traps of certain death. Let’s see what other metaphors can I use to make this seem like a super exciting activity…. The picture tells the truth. We’ll be receiving our challenge today at 4PM. Stay tuned!!!


ROMANS! err… Phizzpop!?!

The arena is set. The gladiators have been carefully chosen. The crowd taunts with bloodthirsty cheers (at least in our heads). The last team standing will be the victorious!

Tanagram is competing in the very exclusive Phizzpop Chicago 2008 competition. We will be competing against the 4 other top design agencies in the Chicagoland area and the grand prize is bragging rights for the rest of the year. Microsoft has gone to great lengths to secure the best and the brightest (trust us) for this invite-only event and the result promises to be a bloody bloody mess to the very end. 

The challenge will be given on November 17th and each team will have three days to create the best possible solution using Microsoft Silverlight technology and our bare hands. We already know who we’re squaring up against and while we can’t tell you who they are yet, we can say we are geared up and ready to PWN them. 

Get your tickets to the final presentation at the Chicago Cultural Center on November 20th and be prepared to bask in the glory of the victorious and the anguish of the defeated. No water balloons please and let the trash talk begin!!!