The Barbarian Group’s user experience department is back to share some of its latest work with you. Next up: Tweetcracker, a project we worked on with Samsung and Intel to promote the Series 9 laptop.

We spoke with interaction design director Chad Vavra and quality assurance technician Rina Razumov about their work on the project.

Read on to learn more about user flows, Twitter’s crazy API, and that one guy who hacked into the site.

CHAD: The continuation of the Boosted theme and the promotion of the Samsung Series 9 laptop Of course in an awesome, fun way similar to Tweet Wrap.

RINA: The idea is to promote their new laptop in a cool, nice way. People are actually hacking the site to get the prizes, which got Boosted more familiar with people.

CHAD: It’s a website that uses Twitter to allow people to enter a combination of guesses that ultimately will crack open a safe that has $10,000 in gold, a laptop, and in the second round, two around the world plane tickets.

CHAD: Creating a website that includes entering into a contest and authorizing that you’re a valid user with Twitter and having to figure out and make it as seamless as possible.

The idea was awesome, the visuals were guaranteed to be awesome, so it was really the process and the flow that really needed to work for this to be successful.

The biggest challenge was really the requirements to fulfill the contest and meshing that with the requirements of the Twitter API – specifically what we can do with the Twitter API process, building user flows that encompassed everything but were not overwhelming. We didn’t want to redirect people back and forth a lot – we wanted to keep that all in one place. Fortunately, before we developed, Twitter released a code so that we do authorize right on the site itself.

Twitter was the biggest challenge for us in that the API limits you to a certain number of responses a day which was a lot lower than what we would’ve needed to respond to everyone potentially. If you guessed without being registered, the Twitter API didn’t allow us to respond to you to say “Hey, you’re not registered so we can’t use this.” And you can only direct message people on Twitter if they were following you so we had to make a decision – do we require people to follow us to participate? – but our decision was no because we thought that was asking too much of the contestants. So we also had to figure out how we were going to communicate with people. There was a lot of problem solving taking place.
And then when we got into dev, there were just a lot of use cases that we had not specifically called out. Like, what if Twitter goes down? What is the message we are going to give people? If two people enter a guess at the exact same time and one of them is correct, then what are we going to do with the person that isn’t correct? Do we say you’re wrong, somebody else just won? Because it’s a flash site, there are flash caches when it loads onto your browser, so how do we make sure it updates for every day when things change? There were a lot of things that Doug Pfeffer and Kim Miller took on. Doug and Kim are like, absolutely the honorary UXers on this project because they’re the ones who through the development process uncovered a lot of use cases that without knowing the technology like they did, we weren’t able to predict.

RINA: The hardest part was thinking of all the scenarios because I wasn’t that familiar with Twitter and the options that it can give you. I know browsers, etc. but Twitter is different. Understanding that was the hardest part for me, but Doug and Kim helped me with every question. Sometimes Twitter might have problems where the authorization isn’t working, the links aren’t working, and that can be a challenge.

CHAD: Not really. The user flow pretty much stayed the same throughout these discoveries. Essentially all of the things that came up late in the process were edge cases, so for 99% of the people who see the site, it’s going to look exactly as intended. It’s just the 1 percent that may see some edge case where they’re going to see a message that we didn’t originally think of or something.

RINA: First thing is that I am trying to pretend that I’m a user. I don’t know what it should do or shouldn’t do. I’m not familiar with any technical issues. I just click on everything that’s clickable, walk around the site, and see how it all works. Not as a professional but as a user – a user is not looking for bugs, he is just walking around the site.

After that, I go step-by-step according to the test plan and look at the design of the product and what it should do against what it actually does and then I try to figure out all of the possible scenarios. For Tweetcracker, this meant considering what happens to private users and making sure that when you log out and log back in that you cannot guess again – basically figuring out all the options that are possible.

Once you find a bug, you report it and assign it to a developer. The developer verifies the bug on his end, and once fixed, we check again by repeating the scenario that was described in the bug. Then, the process starts all over again and I do the scenarios over. QA works in cycles, testing cycles and bug reports, bug fixes by dev and second QA cycle – bug verifications and making sure there are no new bugs. The number of cycles is as needed.

RINA: QA starts from the visual design because if my job is to be the user, I should be involved before it gets to development, which saves time and money. A bug found in design costs a lot less than bug found after development. It also saves client money because if we find bugs before they’re developed, we save a lot of time. I don’t actually do visual design but that’s when I start on a project.

RINA: Basically, i have (not all on my computer) all of the browsers and operating systems, and these are the things that I’m using. I have three machines on my desk and a list of virtual machines that I have access to. If I need to test on IE6,for example, IT can set up a virtual machine with my needs, and I can do that there.
Of course there are more tools for testing and writing tests but we’re not using that here at the moment so I basically just create a document for my test cases . What I do is basically take the wireframes and the tech plan, and I write out steps, the expected results, and the actual result. This is what you wanted to do and this is what it actually does.
After it launches, I do run a cycle on the production side to see if everything’s OK but not a periodic testing. But obviously it needs to be checked from time to time. The site did go down more than once.

RINA: There was one day when the site when down because someone was possibly running a script. You can’t prevent hackers on the site. But whoever did that ight have been someone who wrote a code, gets on Twitter, logs in, guesses three times, logs out, and keeps doing that. And he can create numerous accounts on Twitter. We can’t prevent it but we can take precautions and we can see how we act when it happens.

CHAD: We knew from day one that we were giving enough of a large prize that it was going to attract those kinds of people so limiting to three guesses a day was part of it. We fully expected people were going to attack it. The other things we did were mostly technical – for Doug and Kim to be aware of and build protection.

RINA: From what I’ve seen, it looks like a lot of positive feedback. There’s always someone who is going to say it’s not working or it’s not worth it, but most of it was good.

CHAD: I think it’s great, and it’s exactly what we set out to do. Everyone seemed to enjoy the experience but also understand that we set out to do a really beautiful brand integration. The brand is not being lost behind the experience, and the experience isn’t suffering from being lost behind the brand. It’s balanced pretty well. The community that’s attached to it has been really positive. The clients are hugely happy.

CHAD: If I had it in $10,000 gold in day I would probably sit on it until the market rebounds because it’d be worth 12,000. But truthfully, if I had $10,000, I’d put it towards a fancy kitchen.

RINA: What can I actually do with $10,000? Come on. (Laughs) You cannot buy a house, you cannot buy a car – maybe you can, but who wants a car in New York? And how many clothes do you really need? Maybe you can take a vacation for three or four months and that’s it, and then you’re back to the same old life as before.