Labs is a small independent unit within Teehan+Lax tasked with exploring the creative uses of technology in the digital channel and framing technical possibilities for the agency, clients, and wider community.
Recently, I gave a talk about the development of a typographic portrait generation engine we built for Bell Social Portrait. It’s a story that explores some of the challenges of building a complex web application meant to be experienced on many different screen sizes and platforms. The project taught us valuable lessons that will surely influence future work.
Bell Social Portrait is a site that pulls a users social feeds and programatically generates artwork from an associated profile or user-submitted image. Traditional typographic portraits are normally constructed in graphic design software like Illustrator or Photoshop. We knew it’d be a challenge to simulate the process programatically – never mind deploying it to as many browsers and devices as possible (a self-imposed requirement).
Yesterday we (Labs) ran a half-day hardware hacking workshop internally for all of the Teehan+Lax employees (everyone from designers and developers to the project managers and the “HR” people). It was meant as a light introduction to physical prototyping. Here are some of the creative, fantastic (and horrifying) results. We were very excited to see everyone’s results at the end of the day. The great thing was that everyone had successfully created something by the end of the workshop from scratch.
“The perception of system output must be greater than the perceived user input, and within that range there is a sweet spot where [user experience] is delightful and magical.”
- August de los Reyes
I can still recall the first time I saw an Augmented Reality demo. There was a sense of wonderment from the illusion of 3D models living within the video feed. Of course, the real magic was the fact that the application was not only viewing its surrounding environment, but also understanding it. AR has proven to be an incredible tool for enhancing perception of the real world. Despite this, I’ve always felt that the technology was somewhat limited in its application. It is typically implemented as output in the form of visual overlays or filters. But could it also be used for user input? We decided to explore that question by pairing the principles of AR (like real-time marker detection and tracking) with a natural user interface (specifically, touch on a mobile phone) to create an entirely new interactive experience.
The outcome of this examination is something we’re calling Touch Vision Interface – a tool that enables touch interaction on many different connected surfaces through a mobile phones’ camera view. The translation of touch input coordinates to the captured video feed creates the illusion of being able to directly manipulate a distant surface. As a result, the interaction feels natural and almost invisible. Read more >
“It’s clear that simplifying and physically tailoring input to output with tech like NFC is a good way to enhance user experience and can lead to some unique interactions. We plan on taking this idea further by experimenting with other platforms and input devices.”
—Physical and Frictionless Input. 7 June 2011.
It should be about the experience. Not the technology.
Continuing on with physical interaction we’ve been experimenting with Arduinos, RFID/NFC, social network APIs, and dreaming up various other end uses that we will discuss in a minute and end off with a really quick (but verbose) demo. When dealing with technology for novel interaction we really want to make sure that the interaction is put before the technology. A tech demo for tech sake isn’t always the best approach. Inventing solutions to problems that don’t exist doesn’t make much sense. Products (specifically tools — and digital or physical) are meant to service something and then get out of the way. If we take this approach to using RFID/NFC then whatever that tool ends up being should show up, do the job, then completely disappear so you can get on with living life. Without you needing to do anything. You don’t give the plumber step by step instructions do you? You just call and tell them to come fix something. Read more >
In the last years, with the advent of new web enabled devices — smartphones, tablets, connected TVs and more — our digital landscape has been rapidly expanding beyond the borders of traditional desktop/laptop screens. As mobile devices are increasingly becoming the primary way we access online content, responsive design has emerged as a popular design strategy.
Designing for all devices: apps and mobile websites
Smartphones and tablets have complicated the task of digital strategy and design by adding new resolutions and technical constraints. With plenty of different mobile devices around, dealing with this complexity—in particular, reconsidering the traditional 960px fixed width viewport—has been approached in two ways:
Create complimentary (native) mobile apps (a trend fostered by manufacturers with their ad hoc SDKs and app stores);
Create multiple mobile versions of websites and try to cover as many variations as possible.
UPDATE 07/20/11: Updated the demo to take better advantage of built-in Paper.js features. UPDATE 07/27/11: Compacted the demo even further utilizing the active layer object.
Recently, we’ve been exploring various vector graphics libraries in an order to craft some more compelling data visualizations. I’ll admit, we weren’t too enthusiastic about the prospect of manipulating SVG or learning some strange custom syntax. Fortunately for us, Paper.js was released a few weeks back. Read more >
Ryan Challinor is a programmer at Harmonix Music Systems who is best known for his gestural menu system in Dance Central for Kinect. Immersing himself further into Kinect UI, he’s currently developing a synaesthetic experience using Kinect, Ableton Live, and Quartz Composer. I had the opportunity to chat with Ryan about his work on developing UI for the Kinect. Read more >
Lately, we’ve been thinking about ways to improve online collaboration and group participation. One aspect of collaboration that we really want to explore is input – in particular, physically linking the input experience closer to output. Imagine manipulating a real-world replica of a virtual object and synchronising both, or in a more real example, being able to check-in to a location through Foursquare by physically touching it – an experience profoundly more unified than scrolling through a list of locations based on your GPS coordinates. For our initial exploration, we decided to build a simple, frictionless way of manipulating an object and broadcasting the input to multiple clients.
Here’s a simple snippet that can add some nice styling to your three.js projects. We’re big fans of camera vignetting, and the effect was very easy to spin into a WebGL shader. Read more >
I knew coming to Portland that I’d love the city. It’s like a smaller and friendlier version of Toronto with superior seafood. Delicious sushi and oysters aside (do visit Jake’s Famous Crawfish if you get a chance), the real reason I made the trip was to attend NodeConf – the first conference dedicated entirely to Node.js, a platform we’ve recently been heavily exploring.
Node has been something of a sensation this last year. It’s often rare to leave a developer news site without seeing at least one mention of its name. In fact, try to remember the last time “node.js” wasn’t buried somewhere on the first few pages of Hacker News. I certainly cannot. Along with HTML5, it’s part of a shift in the development world that’s raising Javascript’s utility to new heights. Read more >
The digital industry is experiencing turbulent times at the moment. That’s a good thing. Rapidly evolving technologies – cloud computing, powerful mobile devices, modern web browsers, and connected TVs to name a few – are creating opportunities for serious innovation. Already we’re seeing the early stages of convergence and seamless communication between devices. The digital channel is being reshaped, as are the experiences we deliver through it.
Of course, this comes at the price of higher complexity in both ideation and execution, but what’s opportunity without challenge? For most agencies the biggest challenge won’t even be technical, it will be temporal – time to learn, to experiment, to share, and to see ideas from start to finish. Compounding this will be the need to think in terms of problems and solutions. Ideas are dormant and lazy. The meaningful application of an idea requires that it has context in real-world problems.
Today we’re excited to announce Teehan+Lax Labs, our answer to the challenges of the future. Labs is a small, independent innovation unit operating within the agency. It’s tasked with not only exploring new technologies in the digital channel, but also framing the possibilities they empower.
Of course, it would be a mistake to entirely split off a skunkworks team from the agency, removing employees who focus on client work from R&D. We want to foster a culture of innovation, not displace it. To that end, we’ve designed a high degree of integration. Client-working employees contribute the bulk of experimentation along with the Labs team – who provide all necessary direction and resources. We’re all members of the brain trust.
Sharing is also an important characteristic of Labs – not only for employees and clients, but also the digital community as a whole. We’ll be talking about our successes, failures, and experiences. Labs is our mouthpiece for bleeding edge technology and design thinking. It’s meant to reduce technical complexity for the agency, but also we hope to contribute to advancing the industry we love. Over the next few weeks, we’ll be launching supporting feeds, a blog, and project pools for anyone to follow. We hope you do.
At its core Labs is about technology and the possibilities buried among the clouds, APIs, and screens. While convergence is the theme we’re most interested in exploring, we also plan to undertake projects that push the boundaries on individual platforms. After all, assembling a team of talented tinkerers is bound to produce some fringe but valuable results.
It’s an exciting time to explore and experiment in the digital channel. Of course, Labs is an experiment unto itself and no doubt there will be bumps and bruises along the way. But after all, what’s opportunity without challenge?
