At Hot Studio, “sustainable” is more than a buzz word–it is the goal we strive for and the way we get there. As a 21^st Century experience design company, much of what clients see may be digital but that’s not the whole story. Because we are human-centered, we are sustainability-centered. Our job is to do the thinking, innovating, planning and designing to positively evolve people’s experiences so that they do not waste their time, energy, or resources. When that experience improves it is good for our clients and good for us!

The way Hot treats its employees and the way we interact with our community and local environment matter. Issues of fairness, reaching one’s full potential and, in particular, live-work balance are important to us. As a woman-owned business, the integration of family and workplace has been a top priority since our inception. Hot Studio has been shown as an example in articles and publications such as Babies in the Workplace. The way we see it, employee happiness = better work = client happiness, and the cycle continues.

Our dedication to being kinder to the planet is reflected in our thinking and in our services. How we operate in our physical environment matters. The following are some of the ways we’ve transformed how we operate:

Reducing

• We replaced tungsten light bulbs with CFL bulbs
• Employees are directed to turn off monitors and power strips at night
• We discontinued bottled water and installed a filter
• We order fewer but larger deliveries of office supplies
• Auto light shut-off sensors have been installed in restrooms and all conference rooms
• We encourage commuting by public transit using Commuter Checks incentive program
• We travel by using Zipcar car sharing service rather than employees’ own cars

Reusing

We reuse everything we can: either a second time or continuously. We have our own dishes and flatware in our kitchen and wash them ourselves. Printing mistakes go into a scrap paper tray and we use a dedicated black-and-white printer for non-crucial prints.

Recycling

We recycle 45% of our total waste

We compost 15% of our total waste

We recycle toner cartridges through Give Something Back, our office supplies vendor, and we are located next door to Green Citizen where we drop off our used batteries, tech and e-waste on a regular basis.

Through ease-of-use collection, design and signage, we have channeled 60% of our waste OUT of the landfill and continue to improve.

Closing the Loop: Buying Sustainable

Hot closes the loop by purchasing products and materials containing the highest post-consumer recycled content possible. Our 12-foot-long conference table is made of Richlite, a product made from super-compacted recycled paper. Our carpets are by FLOR, recycled materials, sustainable and reusable. All detergents and cleaning products used at Hot Studio are biodegradable. Fruit purchased is locally produced and coffee purchased is fair-trade, locally roasted, and delivered on bicycle.

Last but not least, Hot is also a member of the Designers Accord, a global coalition of designers, educators, researchers, engineers, and corporate leaders, working together to create positive environmental and social impact. By walking the talk, we spread these sustainable habits to our homes, families, friends, neighbors, and business partners.

Mashable.com recently held a poll about Farmville and Foursquare after TIME.com listed both applications in an article titled “The 50 Worst Inventions.” TIME.com described Farmville as a “time suck” and Foursquare as “narcissistic.” Mashable brought the question to its readers: Are Foursquare and Farmville really among the worst inventions ever?

Now as it happens, I’ve played both Farmville and Foursquare extensively. It all started out innocently enough as research for a project at Hot. I was working on concepts for an iPhone application and immersed myself in various online games for inspiration.

I am not the stereotypical gamer–or so I thought. I recently discovered that I am quite close to the average age of a social gamer. According to PopCap Games, maker of popular video games like Bejeweled, “the average social gamer is a 43-year old woman.” The key word here is “social.” We’re talking about Farmville and Foursquare–not the traditional video games you might find on Xbox or PlayStation.

Farmville, the incredibly popular Facebook game from Zynga, was both addictive and tedious. It felt like a chore to have to click every square plot to plow, plant, and harvest my crops of virtual wheat or raspberries. Yet I continued to plant and click and was rewarded with gold coins, higher levels, and… And what? Was it a sense of accomplishment? The thrill of advancing? The competition with my neighbors? Why? Why was I spending my time on all this tedious clicking? I got so bored with it that I had my seven-year-old daughter click everything for me.

The answer is the “compulsion loop,” as it’s called in the gaming world. The idea here is that the player plays the game, achieves some goal, and then receives some sort of reward for achieving the goal. The reward induces the player to keep playing the game and the cycle–the compulsion loop–continues.

At the same time that I was playing Farmville, I started playing Foursquare. Foursquare is an iPhone app in which players “check-in” to various locations and get rewarded with points and badges. Like Farmville, it has the same compulsion loop popular in game mechanics. Checking in multiple times a day gets you more points. Checking into 10 unique locations gets you the Adventurer Badge. Whoever checks in the most at a certain location becomes the “mayor” of that location. However, unlike Farmville, I loved playing Foursquare. It didn’t feel tedious. It didn’t feel like a chore. I loved posting tips on what to order at my local café (a bellini at happy hour, for instance). I loved checking into obscure venues like Sleeping Beauty’s Castle at Disneyland. I liked seeing the check-ins from my Foursquare friends.

There are a number of reasons why I preferred Foursquare. One is that the Farmville compulsion loop is based on an “appointment gaming” mechanism. Players must come back to the game at a certain time in order to harvest their crops (and get the reward) before the crops wither and die. This is known as a hard penalty. It seems so clear that a game designed to mimic my real-world life of appointments would seem like a chore. Working full-time and raising two small children with my even busier husband, I really don’t need more appointments in my day. I don’t want to log in and see that my raspberries have withered and died because I forgot to harvest them.

The gaming mechanism in Foursquare is based on rewards, not penalties, and there is no appointment mechanism. I can check in as much or as little as I like. I was delighted when I got my Adventurer Badge. When I was mayor of my local café, I felt like I had finally arrived. (Mayors often receive special deals or discounts.) It’s true there are some penalties. If I don’t check in enough, I might lose my title of mayor–but it felt different then being greeted with a bunch of dead plants.

Game mechanics aside, the social rewards are the real difference between these two games. Farmville will (optionally) post updates to Facebook if a player wins a new ribbon or needs help on the farm, but these activities don’t feel real to me. They’re based on rather boring virtual activity–the mindless clicking of plowing, planting, and harvesting. The truth is, I really don’t care what my friends are planting in Farmville.

The posts on Foursquare are based on offline activities that are, by their nature, more interesting. They aren’t pre-programmed; they’re real. Take this example from my friend and colleague, Josh, who checked in at the Fillmore: “Listen to live jazz while shopping the Farmer’s Market every Saturday.” These posts are more like Facebook posts; mostly about activity happening in the real world. I suppose the activity doesn’t have to be offline, but at least right now my friends tend to do more interesting things in the real world.

So do Farmville and Foursquare both qualify as being among the 50 Worst Inventions, along with New Coke and Subprime Mortgages? Not in my book, and according to the results of the Mashable Poll (below) at least 42.4% of readers agree with me.

Yesterday was a spectacularly exciting day, as one of Hot Studio’s key clients, Kno, officially launched at the D8 Conference in Los Angeles. Kno, formerly known as Kakai, has been in stealth mode for over a year, as we’ve quietly collaborated with them on the new dual-panel textbook eReader. We believe this product will profoundly improve the way students learn.

Over the past eight months, Hot Studio has worked with the talented team at Kno on various aspects of this exciting new product. Our collaborations began with the visual design of the eReader’s user interface. Working closely with Kno’s user experience designers, Hot created a touchscreen visual interface that is both compelling and highly intuitive. Allowing students to do all kinds of things with the digital text books, from the basics of reading full spreads, to writing in notebooks, to taking tests, to buying textbooks and learning apps. Learn more about the Kno tablet.

Our second engagement was to design and build a small launch website that would support Kno as they came out of stealth mode. That site was launched yesterday. It’s a great place to learn more about this amazing product.

At the moment, we’re honored and excited to continue to work with Kno on even more exciting aspects of their company and product. Exciting things are coming soon!

Today, students are forced to carry heavy textbooks with them wherever they go. They also carry separate notebooks and study aids, PLUS their laptop computers. While the Kno is large with dual 14″ displays, it’s important to remember that students will actually have a lot less to carry now. It’s all in the Kno.

There has been a lot of press covering the launch. Here are a few links worth checking out:

Engadget

D8 Conference

Gigaom

One of my favorite things about working for a design firm is that I get to immerse myself in a different company’s business and culture every few months. Whatever the project, I end up falling in love with the people I’m working with, and getting deeply invested in helping solve their problems.

A recent website redesign project, and the organization behind it, really made an impression on me. To be honest, I hadn’t heard of the Independent Television Service (ITVS) before we started talking with them. The acronym they use as their moniker, and their previous website, did little to communicate what they do, and the immense value I think they’re bringing to all of us.

What Do They Do?
ITVS funds, and assists with the production of, amazing documentaries and stories from filmmakers who take creative risks, tackle complex issues, and express points of view seldom explored in the mass media. These films are shown on public television stations and in other public arenas. Why is that such a big deal? Because you could imagine how bland, and how one-sided, our programming would be if everything was produced by those with the means to fund a film. And for all of us–even those who don’t have high-priced cable, or easy access to independent theaters which might show such films–ITVS is bringing quality programming with these diverse points of view right into our living rooms.

The Creative Process
A core group of ITVS stakeholders met with us for weekly work sessions. We exhausted about 20 dry erase pens, their white board, and our lead User Experience designer Tanya. What ITVS wanted was totally unique. They needed to serve the needs of  many different audiences (try dissecting “the general viewing public” and adding in “educators” and “broadcasters”) and they wanted to push the boundaries of technology to create a platform that would serve them well for years. Even deep into the Design phase, we were sketching and re-sketching concepts for pages such as the Watch Video section. The visual design, which Senior Visual Designer Brian spearheaded, needed to balance showcasing the content of the films while re-introducing the ITVS brand to the world.

ITVS.org Before and After

Why I Cried
Content, content, content! We can work some miracles through design, but ultimately it’s our client’s content which carries a giant part of the emotional impact of an experience. Because they have such amazingly rich content, and because they had such a deep commitment to getting it right, ITVS’s new site really delivers. When the site launched (after tons of hard work from ITVS and CarbonFive, who implemented it), I was so impressed.

I watched a trailer for the Horse Boy and cried at my desk. I don’t know if it was just because I’m a total sap, or because of the autistic boy, or the horsies, or the fact that I was able to learn more about the film and process behind it–but I’d been affected by my viewing experience.

And that, I’d say, made it a job well done. I’m not crying anymore, I’m gonna go have a drink to celebrate! Hope you enjoy the site, and catch more ITVS-funded productions in the near future!

…520 Broadway, that is.

Our New York office has moved to a bigger space in the heart of Soho – on the corner of Spring and Broadway. We’re seven floors above Balthazar, steps away from the original Dean & DeLuca and across the street from Baked by Melissa’s famous mini stuffed cupcakes. If you’re in the neighborhood, be sure to stop by and say hello.

The iPad’s recent debut has stirred an incredible amount of buzz in the publishing world. Here’s a device that could serve as a catalyst for an entire industry, especially for magazine publishers. Hot was fortunate enough to work with Zinio in designing and creating their free iPad app, which allows users (for a fee) to access thousands upon thousands of magazines, providing a new way to experience their content.

We asked Rajan Dev, our company president, to take us a little deeper into the app’s significance and what other digital publishing opportunities are still out there.

In what way is the Zinio app a game-changer for magazines?

One way is that the iPad is ideal for presenting a new way of experiencing large format magazines. It can beautifully deliver the super lush aspects of magazines, especially photography. The bonus is that it also supports video, audio, motion graphics and gaming! There really hasn’t been a really great digital platform for magazines ’til the iPad, which is also the first platform people expected to be mass adopted.

The other way – and it’s one of the things we’re most excited about — is that the Zinio platform could serve a democratizing function. Because the technology is leveraged across this whole set of participants in their ecosystem, indie magazine publishers can participate in a way that they could not, based on their own economics.

Could you explain?

OK, current digital distribution of magazines requires that publishers manage a certain number of PDF files to display on a reader. So the PDF was often just one big asset. But what we’re doing now with interactive content, like what the Zinio app does, calls for managing hundreds if not thousands of interactive assets in one single issue of a magazine. So on a given page, you would need assets for slideshows, ads, videos, and/or audio complementing the content on the page.

The production on this can be very expensive. We’re talking about spending tens of thousands of dollars per interactive edition of a magazine for the iPad. Independent publishers can’t afford that. But, by leveraging Zinio, indies can afford to publish interactive versions of their magazines.

Remember, what we’re seeing are different expectations of what a digital magazine experience should be. This is more than just an electronic representation of printed words and images. We’re seeing new expressions of content that feels similar to what’s in printed magazines, but will also seem more like a movie, or a game, or a music video, etc. People really want this sort of rich content, in context, but it’s not cheap.

And the same applies for ads, doesn’t it?

Absolutely. We’re talking about a whole new advertising model. By adding additional interactive content to ads, you can do additional monetization with core readership; think of it like bonus features on a DVD. Don’t forget that people buy lifestyle magazines for ads, so you have to make the ad content as compelling as possible.

We’ve developed new ways of putting ads in front of people, monetizing interactive ads with other consumer electronics and publishing clients. This leads to trackability. Over time the metrics available to magazine publishers will be much more like the metrics of other interactive marketing rather than the old school metrics of selling space in a hardcopy magazine. And you can have more immediate ties to transactions; you can link to a transaction, take a commission on a sale.

So what’s next? This Zinio model adds a layer of interactivity to the content magazines are already providing, but it’s not shaping the current design of the content, or the very content itself.

Right. One of the things that’s been so great about this project and this partnership, is that not only are we participating in this massive catalyst in the magazine industry, but we’re now committed to taking our Hot systemic thinking about best-in-class design solutions and evolving services and products that really speak to the next level. We’re talking about disaggregated content, digital asset management, and best-of-class curated content. Instead of a PDF, it’s one thousand pieces of data and assets held together by something else, perhaps HTML.

Going forward, publishers need to think, what are the best ways to connect with my audience? What is the most appropriate set of curated content that I should serve to them, depending on the context they’re in? What device is the content being experienced on—the iPad, a phone, a laptop, or another emerging platform? Are my editorial systems built in a way that can help me support that?

It’s a new ecosystem that magazine publishers are playing in. It’s about interacting, not just browsing.

The San Francisco Business Times has a nice write-up on Zinio, whom we partnered with on developing their iPad app.

In a nutshell, the article by Patrick Hoge points out the iPad (and similar tablet devices in the offing) are the hardware Zinio needed to “show off what Zinio’s software can do.” (Note: The bulk of the article is behind a pay wall, but there’s enough of a preview for you to get a sense of what a big deal this is for the digital distribution of magazines.)

We’re sure this won’t be the last we read about how Zinio will be shaping the future.

This is the second post in a series about how the Hot Studio engineering team tackled a set of interactive content modules for Zinio’s new iPad application.

In the previous post, I gave you a little bit of background – we were essentially creating an entirely new magazine experience – and detailed some of the key challenges we faced.

In this post, I’ll dive into more details by talking about volume controls and how we got creative with the events Mobile Safari gives you.

About Volume Controls

Our user-experience designers are always concerned with how a user will interact with our applications and what sort of scenarios they will run into, no matter the device or medium. The iPad is no exception.

Matthew Carlson, the design lead, immediately felt we needed to have volume controls, even though the original player did not. His logic was that you could be in any orientation when a video starts. This didn’t matter on the iPhone and iPod Touch because they were so small, but now we’re talking about a fairly large device and having to rapidly hit those volume controls on a plane or in a doctor’s office or some other closed, quiet space. And those controls could be on the bottom, side, top, or natural position. Instead of having to find them, you should just be able to use your finger to adjust the volume right where your eyes are already looking. Sound logic, Matt!

So we designed it, developed it, and then tested it. And tested it. And double triple tested it. In the end, the volume property was definitely being adjusted. My math was sound. But no matter what, even on the real device, we could not get the iPad volume to adjust.

Edit: This is what Apple’s Vicki Murley responded to me with.

Sorry, it’s not possible to programmatically change the volume for <audio> or <video> in Safari on iPad.  This is by design.

Hopefully, someday the Mobile Safari team will add the ability to have volume controls. When or if that’s possible, here are the basic things you need to address so you can roll your own:

The property you’re going to touch is:

volume (float): The current volume - from 0.0 to 1.0

Here are the basics:

var player = document.getElementById('player')
player.volume = .5; // Half the full volume. Volume is 0.0 - 1.0.

It can definitely get more difficult, but you just talk to the volume attribute. It’s simple enough. It’s so simple that you really can’t mess it up. But like I said, even though it’s so simple, no matter what we tried, the iPad volume would not adjust. And nobody is talking about why Edit: See above for Apple’s response. So we ended up bailing on the idea, resigning ourselves to seeing users frantically search for the volume rocker in the stone quiet reception areas.

Creating the Scrubber

You’re probably thinking, “A scrubber? Ah, well, there are definitely events that are perfect for that! Safari Dev says so!” I thought so, too!

Turns out that quite a few of these great events that the player will radio back and forth about don’t actually work in Mobile Safari. This became especially challenging for the buffer amount indicator (shown below).

In particular, I wanted to use the “progress” event:

progress - Browser loads data

It seemed perfect! “Browser, you tell me when you load new data, and I’ll adjust the loaded scrubber ok?” But Mobile Safari never actually responds back about this. You’ll wait all day for that one. So we ended up watching for this event initially:

canplay - Video can be played, but possibly must stop to buffer content

But we found that this could result in a delay, and nothing happening makes users impatient. And when they get impatient, they start smashing things (at least, I do). And we definitely don’t want that.

So we went another route and started watching for the “durationchange” event:

durationchange - Duration has changed (for streams)

This event actually fires once the first scrap of (meta) data is in the pipe, and from there we can monitor it, albeit with polling, as inefficient as that is. (Polling wouldn’t be necessary if Apple had hooked us up with the “progress” event like we had hoped. But, alas, it was not to be.)

So here’s the code block where we used “durationchange,” monitored it with polling, and also checked for an internet connection.

player.addEventListener('durationchange', function(event){
     updateDuration(); // we use this function to talk to the duration numbers
     checkSourceForConnect();
}, false);

The checkSourceForConnect() function will fire off a check for internet connections (all videos are typically streamed from Zinio’s CDN), and then, if all goes well, we move on to this function:

function getBuffered() {
     var bufferedPercent = parseInt(((player.buffered.end(0) / player.duration) * 100));
     $('#currentTrack').css({'width' : bufferedPercent + '%', '-webkit-transition' : 'width .3s ease-out'});
     $('body').delay(300, function(){
          if(bufferedPercent < 100) {
               getBuffered();
          }
     });
}

Here’s what’s happening inside of getBuffered():

Now that we’re ready for retrieving a buffer amount, we grab the current buffered percentage. This is represented by the var bufferedPercent. The math translates it out into a round 0 – 100 number. You can read about the various properties inside that math here: HTML 5 Video – DOM Attributes and Events

Next, we apply the bufferedPercent to the CSS, so that our buffer bar stretches across. At the same time, we apply a CSS transition to width, and every time we update the transition property, it will animate out to the new width.

After that’s done, we relax for 300 milliseconds (the time it takes for the original animation to finish), and give it another go if we’re not completely finished buffering. Note: This is done with the delay plugin for jQuery. We liked it more than setTimeouts.

The effect ends up being pretty classy. It’s kind of a ease-in / ease-out animation that springs into action. It makes it seem like your download is having bursts toward the finish line. Or… that’ s how I thought it looked. I’m sure our designers have some better buzzwords to describe the effect.

Here’s a quick clip of it in action (on the iPad simulator):

Whew! If you’ve made it this far, congrats! Before your head explodes (these posts are getting longer and longer), I’ll save some for the next post, where I’ll talk about how we got fullscreen (or pseudo fullscreen), track down exactly why Apple’s not a fan of autoplay (and why it sort of makes sense), and how we went about making our audio player from the video player.

I’m particularly excited to write about the fullscreen jazz we’ve done, as it let’s us use an unbridled amount of CSS3 Transitions and Transforms that Mobile Safari supports.

Until next time!

I just got the amazing opportunity to attack a set of interactive content modules that Hot’s design team put together for Zinio’s new iPad application.

This is one of the first projects I’ve had as the Hot Studio Senior Design Engineer where I really flexed my muscles with all sorts of CSS and jQuery Voodoo. In the next three posts, I’ll give you a close-up, first person account of how Hot’s engineering team tackled the project and ultimately created an entirely new magazine experience.

Background

Imagine you’re flipping through a magazine and you see a photo you like. You tap the photo and up pops a bunch of additional content. That could include more images, text, or, better yet, videos from the photo shoot.

That’s what Hot’s designers envisioned when they created a series of exquisitely designed modules that would launch from Zinio’s static magazine content. They had poured over the interactions, and had gone through several iterations until they had something that, in my opinion, was really sleek. Now it was up to me and the Hot engineering team to make that vision a reality.

Of special note are the ways the modules are displayed. They launch inside the app, and don’t show browser bars at all. If I did the scripting and CSS properly, it would feel just as native as a normal video player, but with the ease of being written as editable HTML, something publishers are widely getting better at.

I started with the slideshow, making it feel as native as possible. I got tips from iPhone developers about what Mobile Safari apps lacked compared to normal apps and incorporated the feedback. Once the slideshow was humming (don’t worry, there will be another post about that process), it was time to tackle the HTML5 video and audio components.

I started out fearless, thinking that even if we went completely overboard on customizations (which we did and they turned out amazing for all our efforts), it was only a few controls. How hard could that possibly be?

Shockingly hard.

Why? Mostly because there was so much that wasn’t documented or talked about yet. Sure, lots of people are buzzing about HTML5 video, but nobody is really talking about wiring up your own controls (not even in the forums). That being said, there are some fantastic resources that we ran into here, here (invaluable resource, even if all the events didn’t work), and here. Hot’s designers (and myself) felt those controls were essential to maintain the essence of the Zinio brand, and so we trudged on in a very new world of HTML5 Video.

What We Learned

So, here are the key takeaways. I’m passing them on because you’ll want to get on top of them right away if your rolling your own controls with HTML and Javascript…

Volume controls are out in Mobile Safari.

I’ll explain why we wanted the iPad to have volume controls later, but, in short, we felt they were integral to the experience. Apple’s Mobile Safari team apparently did not.

Prepare to get creative with the events that Mobile Safari gives you.

The HTML5 spec has all these lovely events that you get to play with. Mobile Safari, well… doesn’t. For instance, writing the scrubber’s “buffer bar” Javascript was something I thought would be trivial (because I was already familiar with the available events for HTML5 Video through the spec).  Boy, was I wrong. Without a few key events, it became a very kludgy affair.

Full screen from Javascript is not exposed.

We went with stretching the video as much as possible, depending on orientation. This ultimately presented a huge amount of problems: from jittery animations to loads of orientation math for vertical & horizontal centering.

There’s no auto play, either.

Not only that, there’s no way around it it’s pretty hacky to get around this. I’ll get into the reasons why later.

Update: Rob in the comments has posted a great demo of getting around this by wiring up a play event to a link and using Javascript to click it. Check it out below!

Audio tags? Not if you want one that actually works.

So we used the video tag, which worked exceedingly well. I’ll explain how we did it and why it worked in a later post.

That’s it for now. In the next post, I’ll walk you through our experience with the volume controls and talk about the challenges we faced with Mobile Safari events (code samples included). Then finally in the third post, we’ll chat about Full Screen (which covers some pretty great CSS Transitions and CSS3), auto play, and the Audio tag.