The Barbarian Group’s user experience team is going behind-the-scenes to show and discuss some of our kickass work. We’ll chat about our latest projects, and how we tackled them. First up: Tweet Wrap.

We launched Tweet Wrap in early December to rave reviews about the project’s concept, design and ease-of-use. The site, created as part of our Boosted campaign for Samsung and Intel, allows users to create their own customizable wrapping paper using tweets.

Chad Vavra, TBG’s interaction design director and the UX lead on the project, sat down to discuss how his portion of the project came to be. Read on!

The client’s goal was to create awareness around this Intel and Samsung partnership that was taking place near the holiday season. That’s where Boosted came from: Boost your holiday.

When I came on to the project the Boosted and TweetWrap ideas had been sold through with the clients and the task was now to make it real.

My goal was to create a user flow and experience that would be very easy to accomplish. When you think about the task of creating a physical product, there’s a lot of steps that could go into doing that. What I wanted to do was minimize those steps in a way that made a novice user become an expert in one attempt.

We knew we were asking people to do something they’ve never done before, and that can be very daunting. We wanted to make sure people didn’t feel hindered in any way. By actually designing the instructions into the experience I think we achieved that.

The fact that the page reacts to the users’ input as part of a linear process, that you were allowed to deviate from but would still get you to your goal, is really the magic behind making novices experts.

At the minimum we wanted everybody to get through the three steps to create the product. Then if they wanted to go and play and spend some time, they should have learned enough to be able to do that.

I think a big success of the site was its simplicity. You didn’t have to create an account, you didn’t have to go through a form process to make something. You got there, created a product, and once you designed it, you got to decide how involved you wanted to be in sharing or printing it.

What ultimately led me there was putting all the functionality down on paper and then discovering that it could be condensed into a pretty simple process if we treated the flow correctly.

Interestingly, this one was a pretty fast production. We didn’t do any market research, or discovery, and we kind of just dove right in and just created. [Designer] Anthony Dines and I sat down with the wireframes as he was starting to put together the designs and talked about the different ways the functionality could play out. The truth is, the layout of the designs compared to the wireframes are what really made the experience a success. When you have a great visual designer, wireframes should just be a way to get functionality requirements agreed upon. Understanding that about wireframes is probably the best tip I can give for avoiding the headaches that a lot of people experience in interaction design.

If there’s a time crunch, you always compress your deliverables. Whether it’s discovery or the output of the interaction design process doesn’t really matter. What matters is that you think the functionality through before you get to development.
It helps that we have UX and development in-house. I didn’t have to hand anything off to somebody who wasn’t there from the start. If it were the case where we would’ve had to hand the UX to an outsider, I don’t think it would’ve gone as smoothly.

We had to give up control once it went off to GiftSkins. We had to do a hand-off, and we left it up to GiftSkins to do the fulfillment. We did that because that’s how we had to get the wrap printed in big rolls of paper.
From a UX perspective, not really knowing exactly how that was going to play out was a challenge. We weren’t able to test it or look at it until it was done. It was a little challenging letting go but otherwise, not many other concerns.

One of the nice things that some people would probably contend with is that we used Flash and because of the controlled environment within Flash, it made the UX a very easy thing to design.

I think it was pretty spot-on. The only thing I would have changed was the messaging during the hand-off to GiftSkins. There was some lag time. That may have been just with some bandwidth issue but I would’ve loved to have optimized and created a better perception of what was going on behind the scenes.
From GiftSkins to the time the user got the paper, though, it was amazingly fast. They were able to fulfill the request so quickly.
That made the experience come full circle. People didn’t have to wonder about where their stuff was or forget about it and then try to remember where this crazy package was from.

We had tons of great press and we won The FWA Site of the Day and there was a really great response from the users. Making stuff that people respond to is why we do this. BOOSTED!