Archive: Richard Birkin, Head of Development

Tea Wars

Tea Wars is a game for the office – a fun and fast-paced multiplayer game to settle the eternal debate about whose turn it is to make the tea.


Tea Wars cards, new for 2014.

We designed the game in 2009, when one of our number always said “Yes please” when offered a cuppa, but was never the one to offer. Hence, rather than ask everyone in the room if they want a cup of tea, we now ask them if they want one enough to fight for it.

It’s like Noughts & Crosses meets Battleships, and we’ve play-tested it many thousands of times over the years. And it still works! It gets everyone emotionally invested in the click of the kettle. It fills the office with banter and strategy. It levels the playing field when it comes to kitchen manners.

Each player picks a square, then take it in turns to try and ‘bomb’ other people by naming a square they think someone else is on, e.g “C2!”. Whoever gets bombed first, makes the tea. Boom!


This is how James plays, marking where the others ‘bomb’ to notice patterns.

To celebrate the game’s staying power in our daily lives, we’ve published a set of limited edition Tea Wars card decks so you can experience it too.

In each pack are 50 ‘grid cards’ with which to play (one card per player, good for up to six games). These double up as ‘order cards’ so that the loser can accurately fulfill everyone’s hot drink desires. There are some handy instructions for new players, too.


Pen not included.

If you’d like the chance to bring the battle to your place of work (with a free deck of Tea Wars Cards), tweet us @wearemudlark (including the hashtag #teawars) to tell us how you feel persecuted by the drink orders of your colleagues, housemates, family or friends.

Derby [2061] – Telescope Cards Edition

Earlier this month, the internet saw the arrival of Telescope Cards. This service enables you to pull in a List – a curated collection of places e.g. best coffee in East London – from Foursquare, and have it handsomely printed onto a pocket collection of cards.

On deck.

I like cards. Apart from them lighting up that card collecting boy that’s still inside me somewhere, they’re also nice and tactile. You can flip through them, give them to someone, write on them. It’s been said a lot more eloquently and informed than this, but you can’t do those things with the internet.

Printing out the internet has rightfully become a thing, and mini cards is the perfect way to print out Foursquare. As soon as I saw Basil & Co at Minified‘s lovely site for Telescope Cards, I wanted to try out Derby [2061] with it.

Background to Derby 2061

In 2011 I wrote a story on Foursquare. It tells the tale of a city fifty years in the future, where memories can be downloaded and experienced internally, where fast food is 3D printed, real food is for the rich, and the Moon and Mars have been colonised. The aim wasn’t to write a speculative masterpiece – the facets of the story are stock sci-fi tropes – but to see if you could write something on a location-based game platform.



Derby 2061

Users ‘Check In’ at a location using Foursquare, and see an alternative version of that place. They click on that place to see what it is – a Monorail Station where the train station is supposed to be, or a Server Farm instead of the college campus – and find a strange Tip from a narrator.

The narrator is Girl X, a young girl accidentally sent back in time from 2061 to the present day. She uses Foursquare (and other assorted social media) to tell us what will happen to the places around us in the next half century.

Early Conclusions

As well as using Foursquare as a storytelling platform, I wanted to see if you could entice someone into a story by leaving a digital breadcrumb trail. And if you told parts of a story, would the reader fill in the gaps?

The main problem in this excersize is awareness and likelihood of that happening. The concept has had good press and been mentioned at conferences around the world, but it’s located in Derby. You have to be in Derby to experience it. And not that many people travel to Derby, so your audience is the population divided by the amount of Foursquare users within it divided by the amount of Foursquare users within it who are interested in digital storytelling. The story is buried, and there aren’t that many diggers around.

Telescope cards are an opportunity to see if people respond to the story when the ‘rabbit hole’ into it is a physical thing rather than a digital one.

Framing the future: fictional place descriptions and tips.

Making The First Set

I printed one set of cards: a prototype set. Telescope print decks of 25 cards, so I cut the story in half to fit. For the printed Tip on each card, you can use 100 characters max. In under an hour I’d done a good bit of editing and the result was better than what I’d started out with. Forced editing is a good thing.

The cards arrived the other day, and I love them. I flip through them, reading the Tips and imagining the place they are talking about. Next time I’m in Derby city, I’ll go to some of the places and see what effects the combination of card and vision have.

Will being at a location with a card in hand reframe the place of Foursquare in the story?

Is Foursquare a means to tick off that part of the story, and tell my social graph that I’ve ‘completed’ a chapter?

The narrative of the story was embedded in Girl X’s description of places. By lifting out these descriptions into print, could that open up Foursquare to go deeper into the narrative/character?

The main problem with Derby[2061] is awareness. If I place these cards in the gallery shop window, or on a coffee shop counter, will people’s interest be piqued?

A selection of the deck of 25 cards.

I’m going to test this first deck out on a few people, see what happens. If the response it good, maybe I’ll print a few more decks and put them in some good spots to see if people pick them up and play with them.

Postscript

As a result of thinking about what is essentially a low-level protype, alpha version of a story (as well as a way of telling one), I find the story becoming clearer in my mind. By thinking “what would Girl X say about this place?” her character now has a voice and opinion in my head. Thus it becomes easier to expand the story.

If Telescope Cards work for Derby [2061] or not, they have at least given me a bit of time with a story I had almost left behind, and established in my mind a character whose deeper story I am becoming increasingly interested in telling.

A Wintery Project

Over Christmas I sat under a blanket coding up a new prototype involving HTML5, Javascript, classical music and wintery landscapes. It’s called Orchestrated Text.

Annotating audio

Before the Christmas break I’d been messing about with some code for a personal project, and it was working out really well. I was working through Christmas and, since my active projects paused for the break, I wanted a new idea/prototype to work on to show everyone when we regrouped in the New Year.

Orchestrated Text

The concept: to take the brilliant content found in the liner notes of many classical music CDs, and create a digital product that deepens the experience of streaming music.

Users click on a piece to play it, and read along as text appears on screen detailing what’s happening in the music, what it depicts, and what the composer was inspired by.

View the working prototype here.

Audio and Text without Video

I’d been looking for a way to make things happen on a screen along with music, but do it in-browser and not have to faff around making videos. I started to do javascript animations with text, with music running in the background of the page. This worked fine when developing locally, but as soon as I put it on a server the animations would load instantly while the music buffered and everything would be out of sync.

So I started hunting around the web for alternatives and found this. It’s a nice thing inspired by Portal 2, using a song by The National that’s hidden in the game.

In a nutshell, the page loads the song, and each piece of text has a Time and an Animation Instruction. When the audio player reaches that time, the browser renders the text in the way specified by the Animation Instruction.

So I grabbed the code and delved into it and started to re-write it for my own ends.

Classical Music & Stories

Tony with his neck axe.

Earlier in December I’d been working on a pitch for a classical music label that utilised the amazing content you get in the liner notes of classical CDs and vinyl. Personally, I wouldn’t have become as attached to some pieces of classical music without the stories told in these booklets. They are stories of culture, ideas, inspiration, and references.

My Dad has a huge collection of classical CDs, and I asked him what the best liner notes were. He gave me a copy of Vivaldi’s The Four Seasons. It’s a book with a CD in it, released by Deutsche Grammophon as part of their enlightening annotated books called ‘La Gran Musica’.

For each piece on the cd there’s a section in the book. Within each section are paragraphs of descriptive text telling you about the instruments and the orchestra and the type of things they’re playing. The imagery of it. The best part is that these paragraphs have times on them, so you know to listen out for what the first violin is doing at 02:13. It’s perfect for the classical music beginner, interesting for the enthusiast, and validating for the expert.

Movement

So it’s Christmas and there’s a certain kind of peace to the weekdays. Time stops moving in its usual way for some people, but for everyone there’s one thing the same – it’s winter. So I picked the first movement of ‘Winter’ from The Four Seasons to work with, to create a digital version of the booklet that helps people see further into the music.

Planning timings and animations

Over the course of the day I did these things:

  • Import the mp3 of the track into a wave editor so I could get precise timings of when things should come in
  • Write a script to accompany the audio based on the content of the book my Dad gave me
  • Split the script into sections according to timings
  • Add the script into the code
  • Add the timings into the code
  • Run through the piece of music about thirty times, watching how each line animates and making adjustments to its style and time of appearance.

Wrap It Up

We’re calling the project Orchestrated Text, and you can view it here. Clear your schedule for three minutes, get some headphones on, have a look, and let me know what you think.

The design is very basic at the moment. It’s all about the music and words for now. So it won’t look quite right on your mobile, but on tablet and bigger screens it works fine.

I’d like to do the same for more pieces. I’m thinking Chopin’s Raindrop Prelude, Beethoven’s Pastoral Symphony (2nd Movement) or Carnival of the Animals by Saint-Saens. Pieces rich with imagery that can be teased out for people to see. What kind of people? That’s what I hope to find out from this day on. I’d like to hear what kids think of it, what adults who don’t like classical music think of it. The same for adults who do like classical music, or really really do.

But, first and foremost, I hope that someone somewhere hears a familiar piece of music and learns something new about it that inspires them to listen further.

Happy Wintertime!

Information Working Everywhere

While creating a new user experience for prospective students at Ravensbourne university, we noticed a big disconnect in a very common (and increasingly key) user journey – QR codes to mobiles.

This one didn’t work.

A Bit About QR Codes

Greg hates QR codes. Really hates them. I don’t think they’re great, but they serve a purpose as a sort of stop-gap before something better (and as universal) comes along to connect the physical world with the digital one. A user wants to find out more than can be shown attractively on a printed ad, or sign up to something advertised – scanning the code is quicker than typing a URL into a phone while standing in front of a billboard in the rain.

QR codes are becoming more widely accepted, as well as recognised for what they are by the non-techie public. They’re on most billboards, printed adverts, products and product receipts and a user interfaces with them using their mobile. That’s where the convenience ends though, since most QR codes (if they work) take a user to a web page that is very hard to navigate and/or load on a mobile device. Why would anyone trust a code when the content it serves will be difficult to handle?

It’s like wanting to look at something closely, and someone handing you a magnifying glass the wrong way round.

Hopefully this will improve over time as responsive web design becomes more of a standard. James has written a really nice post about that here. It feels good to know that a website you’ve built will work wherever.

Making Information Work Well Everywhere

The Ravensbourne Digital Prospectus was the first project where we got to create a smooth user experience that starts in print and continues on a mobile device. The printed prospectus used by the university already had QR codes in the template but these directed the user to large undigestible web pages.

Not mobile optimised

We put a stop to that using responsive web design. The content changes according to the device it’s being displayed on. With mobile, the information is stacked, and the text size large enough to be easily read on a small screen.

Better.

While we didn’t design the Digital Prospectus ‘mobile first’, we did design the desktop experience to be smooth, helpful and clear. Printed material and QR codes being scanned by mobile devices is an important user journey, and now it’s as smooth and helpful and clear as it can be.

Educational Prospecting – A UX Case Study

Our first big UX project of 2012 was the digital Prospectus for Ravensbourne, a specialist university for Design & Communication, sitting next door to the O2 on the Greenwich Peninsula.

An Academic market place

 

After a few meetings with the staff at Ravensbourne’s Comms department, it was clear they wanted to think differently about their prospectus. They wanted something unique and clear – after all, the prospectus is a university’s shop front.

So that became the starting point for creating a fresh user experience at rave.ac.uk/prospectus:

The user is a prospective student, shopping around for the best courses.

Therefore, we approached the site like an online store would:

  • help the user find what they want quickly
  • show them other things they might like
  • make it easy to take their items away with them.

It’s that last part that I’ll be looking at in more detail here.

A Course Cart

It’s often likely that a prospective student will only have an idea about the type of course they want to do when ‘shopping around’. In redesigning the content structure of the Digital Prospectus, we linked courses together via common traits and career possibilities. We also linked every course to a career, so that a student could look at things from the point of view of ‘What I Want To Be’ as well as ‘What I Want To Study’, since most 17-18 year olds have yet to figure out one or both of those. So, it’s likely that they’re going to come away from the Ravensbourne Digital Prospectus with more than one course to reference.

When a student likes the look of a course, they add it to their ‘Course Cart’, putting it in their trolley for later. When they’re finished looking around the Ravensbourne prospectus they ‘check out’, as they would in a physical or online shop.

Check this out.

Checking Out

Now, when you’re Checking Out of a shop, you’ve made a definitive choice about what you want to buy. A university prospectus is not a place where students make their final choice – that’s UCAS. We’re helping a prospective student, prospecting for possible choices. So the Check Out needs to do something different according to a number of different user journeys.

The most simple of these user journeys is the downloading of your choices – your own personal Prospectus that only features the courses you’re interested in. This PDF download also comes with further information pages about the university and how to apply so that, really, the student doesn’t have to come back to the site.

Next, we think about what the student will want to do with the courses they’ve added to their ‘Course Cart’. From user research we found that prospective students rarely make the choice alone. They talk to their parents about it, their teachers, and their peers. So the student needs a quick way to share their Course Cart with these different audiences.

Each of these audiences will use different channels of communication, so the Share panel of the Course Cart has options that serve each audience. An e-mail to your parents and/or teachers, social networks for your peers.

Thanks for Shopping With Us

This was only one facet of the site, but defining this approach early on allowed us to retain the user sentiment of a Good Shopping Experience throughout Ravensbourne’s Digital Prospectus.

It worked because the analogy was appropriate to the needs of the user by helping them every step of the way and going that extra mile; and the client by creating something unique that sets them apart from other academic institutions.