At the minute, they’re in prototype form, made by sewing this flex resistor inside the puppet’s mouth, and using an Arduino board to read and measure the bend angle. The Arduino board then talks to PureData, which maps the angle to a point on a musical scale. You can tune them to sing any scale, arpeggio, mode or whatever — any range of pitches you like. They could also be used as MIDI controllers, so you could control pretty much any range of music data you can imagine.

They can be tuned to sing scales, arpeggios, modes -- any type of pattern.

Shunt Lounge, London, October 2008

So far I’ve been showing them at music festivals, galleries and theatres around the UK and abroad, and running puppet-making workshops in schools, collaborating with Art, Design, Music, Physics and Technology teachers to help kids explore the links between craft, electronics, toys, play and music. I’m also currently developing a commercial range of Singing Sock Puppet toys and kits.

Over an hour or so, I wrote a series of short, interlocking phrases (each formatted as an individual MP3) that can be played in any order and still (sort of) make musical sense. Here’s a video of it playing in iTunes:

You can download a 6mb .zip of the tracks here if you fancy a play.

Harmony
My first thought was that if there was no beginning or end to this music, using a drone would probably make sense – set one constant, unchanging element and pivot everything else around it. I slapped together a Spotify playlist of references I could think of, then got sketching.

Pen and paper before continuing sketching in sound using Logic

Common cadences and chord progressions don’t work very well when trying to write in a non-linear way: the best approach I came up with in an hour or so involved using neutral, expressionless fourths and fifths as ‘connectors’ at the beginning and end of each phrase, then using more expressive colours in the middle of longer phrases.

Artwork as animation
Formatting phrases as tracks means that you can use the artwork embedded in the ID3 tag almost like a frame in an animation. Again, loads to explore here.

Each phrase is formatted as a separate MP3; cover art could essentially be animated.

Meter
To keep things interesting, I avoided the standard 2, 4, 8, 16 bar structures and just wrote bits freely, at random lengths. The tempo was important to get right, as I wanted to be able to play with doubling and halving speed now and again. I used a constant off-beat high hat, and a kick drum playing intermittently, at double- and half-speed, with heavy syncopation. Loads of dubstep is pretty much built on this technique. Mount Kimbie do it brilliantly.

Making use of glitches
On an iPod Shuffle, you tend to hear a bit of clicking when you skip tracks quickly, so to make these transitions less noticeable, I ended up sampling the skipping noises and using them as rhythmic and textural elements. This technique has been used loads over the past 20-odd years in genres like glitch and minimal techno. There’s 60-odd years worth of audio production techniques to explore here – someone’s bound to have done a PhD thesis on it.

The skip button as instrument
During my time at Last.fm, we spent a lot of time thinking about playback controls and sociality – there’s a lot you can infer from someone pressing skip frequently, or using the more explicit Love and Ban buttons Last.fm helped pioneer. Doing this experiment meant thinking about what happens when the listener presses skip – in a sense, they become a performer. Even with this little experiment, it’s quite nice to press the skip button in time, finding and making your own little rhythms.

Is it generative music?
I remember fiddling around with programming generative music using Koan during my A-levels, and have always admired Brian Eno’s work with it. But during this little experiment, I didn’t want to spend my time just writing rules to generate music – I wanted to compose it. To author it. Is authoring a system the same as writing the notes? Need to think harder about this.

That’s all so far…
That’s pretty much it for half a day’s thinking. I’m sure someone somewhere has done this already, and far better than me. Even then, La Monte Young, Terry Riley or John Cage must have predicted and worked all this out 60-odd years ago, so I need to go away and read and listen to a lot of things, and see where the idea goes next.

Read more at www.musicforshuffle.com.

The film was directed by James King and Daisy Ginsberg, with animation by Cath Elliott and illustrations by Alice Hoult.

At the time of writing, it’s had nearly a million views on Vimeo, and, bizarrely, was featured over the end credits of Newsnight on BBC2 on 21 September 2010:

You can read a more detailed write-up of the project over on the BERG blog.

As Matt Jones writes, BERG were tasked with “looking at new ways in which history could be explored and explained using digital media.” This started as a series of workshops which ended up with the prototype we can see today.

Each ‘Dimension’ is simply a shape, at scale, of something interesting (say, plans of ancient buildings, famous routes or the extent of natural disasters) which can be overlaid on a map anywhere in the world. The idea is that people can get a proper sense of scale and perspective by comparing things with places they know.

You simply type in a zip or postcode to see how big things are compared to where you live

The idea designed itself, really, but I did a bit of basic art direction, UI design and print work to help get it into the world, working alongside the rest of the BERG crew and master developer Paul Mison (with a lovely cameo from the ever-brilliant Phil Gyford). The project was set up at the BBC by the awesome Max Gadney.

Some Dimensions are walkable in scale

You can plot and print them, then go out and get a feel for them

One of the main success criteria of the prototype was that getting content into it had to be quick and easy – the idea being that fast-moving news graphics teams inside the BBC would be the ones updating it. I spent a lot of time with Paul setting up a super simple workflow, so that non-technical designers could export SVG files from Illustrator, upload them, add metadata, publish updates and so on. In design terms, I probably as much (if not more) time on this bit as I did doing the front end display stuff. Big up Keltie Cochrane who did the first batch of content creation for the launch version.

A real ‘proof of concept’ moment came about during the time of the tragic floods in Pakistan during late August 2010. As the scale of the tragedy emerged, a really relevant, resonant Dimension appeared on the site, and its popularity blew up around the web, with lots of reaction including The Guardian, Wired and around Twitter.

It’s still at a prototype stage, so watch this (or, rather, BERG’s) space for more developments.

With direction and input from the rest of the BERG crew, I helped invent the product itself, then looked after the information architecture, designed the user interface, art directed, designed and produced all the graphics for the launch version, working alongside Tom Armitage, who looked after technical development.

Schooloscope works by finding and presenting a range of data – such as Ofsted reports and Performance Tables – and generating simple, conversational summaries from them. It’s kind of like a journalism robot, designed to help people that don’t like reading charts and graphs.

Every school page is generated from official government data, and links back to it

Chernoff Schools
Every school on the site is represented by an image of a little school building with a face on it. The image visualizes some of the dataset: the size of the school; academic performance (roof colour); and kids’ happiness (sad or happy face). You can read more about the design choices here.

The little buildings visualise every school's size, academic performance and kids' happiness - this lets us help communicate complex information in a more visceral, evocative way, such as an academically excellent school full of unhappy kids, or a school full of happy, well-behaved and cared-for children that perhaps aren't academically strong.

The technique is borrowed and adapted from statistician Herman Chernoff, who pioneered visualising datasets using human features in the 1970s. You can read more about this over on the BERG blog.

Initial sketching on paper...

During the design process I did a lot of thinking through drawing - here, what an array of schools with different data might look like. I explored using more facial features, such as eye distance, roof pitch and bulging walls (say, to communicate capacity).

Using qualitative government data from Ofsted, such as pupils' enjoyment, attendance, behaviour and quality of teaching, meant that we could design new, original league tables based on kids' happiness, as well as academic achievement.

Information architecture
The information architecture and main use cases were built up from a series of verbs, nouns and adjectives written on post-it notes stuck on the wall (say, what you should do, know and feel at any point when moving around).

For every design iteration, I then used increasingly larger bits of paper: first, words on post-it notes, then simple drawings on report cards; then sketches on A5, up to A4 and so on, right up to full-res, pixel perfect screen mockups. This was a really useful technique I picked up from Matthews Webb and Jones.

initial IA work showing the transition from post-its to report cards.

A very early school page sketch.

Copy as interface; conversational layouts
Nearly all the text on each school’s page is dynamically generated from government data, and links back to it. Tom and I (with help from the rest of the BERG team, and the lovely Giles Turnbull) created a kind of ‘journalism robot’ that reads all the dry data from government tables and turns it into simple, direct, conversational phrases that link together in a (mostly) natural, human way.

Initial sketching on paper, working out how to make reading the page feel like a conversation between two parents standing at the school gate.

...and this is how the first version ended up.

Production graphics, branding and papercraft experiments
I got to work on nearly every aspect of the launch site: material exploration; product invention; information architecture; user interface; icons; typography and so on.

All the school pages float on top of a live map, where each school is clickable, and talks about itself in comparison to the schools nearby. Custom maps = many hours of deep, headphones-on pixel pushing.

There was a lot of icon work to do, too. Again, many afternoons of drawing and pixel-pushing, and listening to krautrock.

I drew the initial logotype as well. Here's a work-in-progress version complete with scribbled feedback from type don Phil Baines! A proud moment.

Every school page is printable, and it also provides you with a little cut-out-and-keep paper model of the school building itself.

This experiment didn't make it past the drawing board due to time constraints, but it was far better! It's a pop-up version that doesn't require glue.

Overall, it was a great experience to be able to invent and work on a new product almost completely from scratch. BERG are a unique, colossally talented crew, and their inventiveness and playfulness shines through on the site itself. Have a play with it at www.schooloscope.com.

Working with the rest of the BERG crew, I looked after the information architecture, designed the user interface, led art direction and and produced all the graphics, working alongside the mighty Nick Ludlam, who looked after technical development.

The main playback interface was designed to be an immersive, almost hypnotic experience which complements – celebrates, even – Michel Thomas’ idiosyncratic teaching style. The app has been downloaded about 100,000 times to date, and been featured as ‘New and Notable’ on the iTunes store in several countries. Here’s a little clip of it in action:

I’ve written a more detailed blog post on the project for BERG, where you can read a bit more about our approach and working methods behind the scenes.

Playdar is a new piece of technology for what’s known in music tech circles as “content resolution”. In other words, it helps you match song titles to audio files anywhere on the web, so you can listen to a song no matter where the audio file actually lives – whether that be on your hard drive, a network share, a friend’s hard drive, or a streaming service like Spotify. Have a read of this New Scientist article for more details.

I got to listen to nearly all the key voices in the day-to-day running of things – from users, to advertising partners, to business development and so on, and the work spanned from service design and strategy, to defining use cases and user testing, to implementation details such as UI and icon design.

Website work

Over 2 years, I worked on many nooks and crannies of the website, which covers nearly every facet of music experience we can think of – acquiring music; owning it; describing it; listening to it; sharing it; identifying with it – and so on. It’s a massive, sprawling beast of a thing, with over 40 million users, so the work mainly involved iterative improvements and ad-driven changes, together with the occasional big redesign.

Informatics and observation

A lot of design decisions involved observing users’ behaviour. Last.fm has an amazing array of talented engineers, who helped tease out information about interactions and paths people took around the site. I’d take this data and produce diagrams like these in order to help inform key bits of decision-making.

Strategy and service design

A lot of my work involved grouping trends and patterns of behaviour seen around the site, to help better define what got built and how to improve it. These took the form of anything from formal diagrams to rambling streams of consciousness drawn during the course of heated discussion, when notes and thoughts could translate into working prototypes within a matter of hours. This work tended to mean running between strategy people, advertising teams and developers, helping to turn sales pitches into prototypes and vice versa.

Guerrilla user testing

During my time there I set up Last.fm’s first attempts at guerilla user testing, organising impromptu chats in cafes to test raw prototypes out in a quick and dirty way. We mixed our findings with more formal user testing methods and feedback on discussion forums, meaning we got very rich responses to the things we built, and could iterate development directly with our users’ help. Working this way helped an engineering-driven company remember that all of our work was (or rather, should be) ultimately about improving user experience.

Last.fm on Xbox Live

I also worked closely with Last.fm’s partners, such as Sonos, Logitech, Apple, Android, Motorola and so on, to help align Last.fm’s user experience on third-party hardware and software. One of the bigger jobs was with Microsoft, where we co-designed Last.fm for Xbox Live.

Production work: user interfaces, graphics, animation

I worked on more detailed production jobs as well as strategy and service design, especially on stuff we produced in-house, like the Last.fm iPhone and Android apps, desktop software client and Radio page. In these situations I would look after everything from UI wireframes and flows down to icons, typography, layout, animations and so on.

Mobile: iPhone and Android apps

I designed the first versions of Last.fm’s apps for iPhone and Android, working with the splendid Last.fm software client team. We overlapped a lot, building prototypes, tweaking, testing and so on. This work tended to be more self-contained than work on the website, and had to align Last.fm’s features on each device’s UI conventions. I also acted as Last.fm’s consultant to companies like Nokia, Orange, Samsung and Vodafone, advising on their custom apps.

The original Last.fm iPhone app was chosen to run on a series of national TV spots run in the UK during February and March 2009, (first run during the telly coverage of the BRIT awards, which was nice).

Overall, I was lucky enough to have worked with some amazing engineers, who straddled the gaps between business requirements, branding, advertising, design and technical challenges with aplomb. More often than not I got to jump from outlining services and interaction in broad strokes, to the trenches, supplying them with graphic assets to put together UI elements. The best work usually emerged when there were as few steps as possible between these points. Sketching in code as well as on paper was super productive, and winning arguments with prototypes was particularly rewarding.

It’s freely available for use, sharing and adaptation under a Creative Commons License, and it’s been brilliant to see it used all over the country.