Archive: Conference

Playful on Video
Annie Machon speaking at Playful 2014

Annie Machon speaking at Playful 2014

Mudlark’s New Year begins with something from the previous one: we are launching the videos from Playful 2014. The first three are available on our Vimeo channel today and we will feed you the rest over the next week or so.

Looking at the event through these particular lenses, we’re quietly pleased that the Playful tradition came through so well in the hands of its latest curatorial team. The theming – Hidden   –  opened up new avenues and framed some wacky thoughts.

We’ve taken the opportunity of shuffling the running order for these video releases, mainly because we can. So fill your boots with Aardman’s extravaganza on hidden secrets in video-games, former spy Annie Machon’s whistleblowing revelations and, because we just promised the unusual, Ida Marie Toft and Sabine Herrer’s Beaking experience.

David Burtons Sketchnotes

David Burtons Sketchnotes of PLayful

David Burton’s peerless sketchnotes of Playful 2014 are here .


The Hidden Card Game

I promised I’d come back after Playful and write some more about the Hidden card game, giving more details about how the game worked.

Every attendee received two random cards in their snazzy delegate’s envelope – for the rest of the day, during time between speakers, they challenged each other with those cards (and any others they managed to “acquire” during the game). In all, there were over 600 cards in circulation, composed of 22 different game cards in 3 levels of rarity and 16 Agent cards. The weaker cards just let you do things like look at another player’s cards or steal one at random. The more powerful cards allowed you, for example, to possibly steal all of another player’s cards, but also required you to hand that card over (giving your victim a chance to get back in the game).

One of the 16 Agent cards, a hazard and some defence against it.

The aim of the game was to get as many Agent cards as possible and not get blown up at the end (if a player had managed to get hold of a Body Armour card, they were immune to the fatal effects of Tick, Tick, Tick…). In the event of a tie (which there was) Agent cards were drawn at random to determine which Agent was the winner (the magnificent prize being a copy of One Night Ultimate Werewolf). I did not reveal the goal of the game (or the potential hazards of certain cards) in advance – this was partly so that people could have fun discovering the different cards and effects as they played the game, and partly to stop people from simply hiding Agent cards when they came across them.

The Heist lets you steal your opponent’s best card.

Best to keep your cards well-hidden if your opponent has Guess Work.

High Stakes lets you play a winner-takes-all game of rock, scissors, paper.

I think at least forty cards must have passed through my hands as I wandered around during the breaks (including three different agents!). It was very gratifying to see that hundreds of people were playing the game and having fun. Many were playing casually – the odd card exchanged here and there – but some players were really going for it. There were some fierce stone, scissors, paper battles caused by the High Stakes card, and I saw a classic move where someone used Planted Evidence to give someone else a couple of cards, and then returned a few minutes later with Big Target to steal all of them now that player was vulnerable. I was even a victim of Planted Evidence myself as I walked up to the stage to announce the final result! Someone grabbed my arm, showed me the card, and used it to offload a Tick, Tick, Tick… onto me.

Planted Evidence and Big Target made a great combo. My only regret is I never saw anyone’s hand raised due to Blown Cover

P.S. It should be noted that the actual winner would have been Mudlark’s very own Emma Broadhurst (the only person to end the game with more than one Agent), but Charles purposely sabotaged her by sitting next to her at the end with his Tick, Tick, Tick… card. I’m not sure she’ll ever forgive him…

Big Game Hunting

We wanted this year’s Playful to be more interactive than ever. I spend far too much of my spare time designing board and card games, so it seemed like an interesting challenge to design something that could be played by everyone at Playful and which fitted this year’s theme of “Hidden”.

I’ve spent a lot of time over the last year playing the hidden-role card game “One Night Ultimate Werewolf” (ONUW) which takes the classic party game “Werewolf” and condenses it down into an intense 5-minute experience without losing any of the negotiation, pleading and fun of the original.

Some of the role cards from One Night Ultimate Werewolf

Some of the role cards from One Night Ultimate Werewolf

ONUW has an interesting genesis. Social deduction card games have become all the rage over the last 5 years. Games like “The Resistance” and “Coup” had players trying to work out who was on their side, and what role (and therefore what abilities) they had. Japanese designers, especially Seiji Kanai, further distilled these ideas down into ‘microgames’ such as the multi-award-winning “Love Letter”, a game consisting of just 16 cards.

Some of the role cards from Love Letter

Some of the role cards from Love Letter

The Japanese designer Akihisa Okui applied this microgame ethos to Werewolf, and the idea was refined by American designer Ted Alspach, who made the inspired decision to add an app which played the narrator/moderator role (one of the annoying thing about the original Werewolf was that one person was required to sit the game out in order to play this role).  I could (and may!) write a whole blog just on dissecting a single game of ONUW. For now, suffice to say that I have never known a game that packs such a punch (and so much fun) into such a short space of time.

So for this year’s Playful I wanted to take some of these ideas and design a game that could be played by 300 or more people over the course of a day (we think this may well be the biggest card game ever played in the UK!). There are many interesting factors to take into account with this sort of game.  The three most difficult limitations are that you can’t really have a draw pile, you can’t have turn-taking (people need to be able to wander round and play with who they want in a completely ad-hoc manner) and you can’t have many rules – the game needs to be instantly understandable. You also want to avoid player-elimination, and ideally keep the victory conditions at least partly hidden (because you don’t want the game to be over in the first 5 minutes, or someone thinking that they’ve got a winning hand and then hiding for the rest of the day).  I had 5 or 6 ideas for games… some of the rejects are shown here.

First set of test cards.

In this game you have 2 or 3 cards and try to make the longest word possible. There wasn’t much incentive to swap cards once you’d made a word as it usually meant destroying the word you’d already made.
Second set of test cards.

In this game you try to match a sequence of icons (these are actually symbols from Zener cards used for testing ESP) which are revealed one at a time over an hour or two. This was fun until people realised that there was no way someone was going to trade a card with a partial match.
Third set of test cards.

We tried the icon match game again with more lines (and therefore more ways of matching longer sequences) and a subway-map aesthetic, but it was just too confusing and still suffered from the ‘why trade?’ problem.
Fourth set of test cards.

This version ‘borrowed’ ideas from Lucas Pope’s amazing indie video game Papers, Please. Players swap cards trying to find a matching set of papers (and one in which there are no other ‘mistakes’ such as expired visa dates or mismatched serial numbers). This was good fun on a small-scale test, however we decided not to pursue it because of the amount of work in producing around 1000 unique cards, and the fact that there was no easy way of testing whether the game would work when scaled up to 300+ players. (Of course we would have changed the graphics/theme from Papers, Please if we had decided to take this beyond prototype stage)
Fifth set of test cards.

These are a few of the cards from the prototype for the game we finally went with. It uses some of the ideas from Love Letter, but changes and extends them so that the game will work in a free-form, simultaneous format and scale to hundreds of players.
Near final test card.

Near-final version for one of the cards for our Hidden game.

But in the end, after several playtesting sessions (though it’s difficult trying to extrapolate from 5 testers to at least 300 players), I returned to the design that is closest to social deduction microgames such as “Love Letter” and its ‘sequel’ “Lost Legacy” – though it’s very different to either of those games, to allow for the limitations described earlier, and the game has over 600 cards rather than 16! I’d like to explain it in more detail here, but I think the game will be more fun if people don’t know the rules in advance, so we’ll save the detailed description for another blog after the event (along with an analysis of how successful – or otherwise – the game was!).

A few tickets are left for Playful: buy yours now.

Playful by Design

Each year Mudlark hosts Playful; our one-day conference about games, play, design, interaction and behaviour. Each year we give the conference a new look to reflect that year’s theme, keeping things new and exciting.

Last year we focused on DIY, attempting to inspire people to do things themselves, and so the design was very texture heavy—influenced by the photocopied sleeves of punk 7 inches and worn paint. This year, looking at the things we were interested in—the trends that were bubbling up and the work Mudlark have been doing—we soon realised that the nature of things was central.

We settled on “playing with form” as a broad theme, to look at approaches, materials, and using them differently—creatively and playfully. Changing direction from last year, we flipped the design on its head by employing strong colour, geometry and angles peppered with some cutting-edge browser technologies.

Design in its broadest terms is central to everything we do at Mudlark, from designing the interactions and behaviours around our latest project, the Perceptive Radio, to the wordmark laser-etched into its fascia. From the process that takes a user from A to B in the best and most enjoyable way, as in our work for Ravensbourne university, to social impact game design with Half the Sky.

In a way the design for Playful is a very selfish exercise—one that lets me design to my own brief, to try things or techniques that maybe aren’t quite ready for client consumption. It’s a way of flexing my creative muscles and, really, to show off.

Playing with Form

Greg and I set up a Pinterest board to gather and share visual inspiration and to generate a direction. As things began to develop we saw some fun coming out of using illusions. We liked the idea of messing with people almost to the point of annoyance in a fun way.

Animal Collective’s Merriweather Post Pavillion cover art: a popular application of a visual illusion.

Some early experiments explored pure typography and layout, whilst followed a more rigid and straightforward style with some animated elements; but overall came across a bit too sedate for my own ‘visuals that fuck with people’ remit. I had to get back on track, shake things up a bit.

I was inspired by Siggi Eggertsson when thinking about visual ways of showing form. Eggertsson uses his own geometric grid to create wonderful designs and in some pieces uses contrast to create form between the segments. Initially I thought this could be a route to explore—using subtle contrast and shadows between shapes or images to show form.

A New Year by Siggi Eggertsson: Showing form though a grid, colour and subtle contrast.

A visual trick I eventually developed—the moiré background pattern—became the showpiece of the final design. Using this method I applied different colour combinations and pattern sizes for different sections of the site. I set some of the text at the same obtuse angles making for a playful and unusual layout.

This year’s design has had a very favourable reaction on Twitter and has made its way onto—signs that it has made an impression on people. We pat ourselves on the back at this knowing we’ve done what we set out to do, but also knowing that we have to top it next year.

The moiré pattern made interactive by scrolling: the showpiece of the Playful design.

In Closing

At Mudlark we’re in our element when we get to push the envelope with projects. If you have a design problem then we’d love to hear from you.

Playful 2013 will take place at Conway Hall in London on the 25th of October.

Notes from New Adventures

The other week I went to (probably the last) New Adventures in Web Design conference in Nottingham. Met up with some regular freelance faces and some new ones too.

The atmosphere at New Adventures is always a good one—inclusive, friendly, fun. The free bar at the after-party was one of the highlights. I even managed to miss my last train home (something I’m making a habit of). Here’s a short run-down of what went on.

Notes from New Adventures

The Nimble Process
Jason Santa Maria

  • First up was Jason talking about process. A linear process starts to make no sense (something I also noted in this blog post).
  • Jason talked about being scared of launching when he felt something wasn’t quite ready—something I think a lot of us can empathise with.
  • Show your clients MVU (Minimum Viable Understanding) layouts and designs—don’t spend time working up pixel perfect mockups.
  • Encourage clients to participate in the design process and allow them to feel ownership of a design. This will alleviate blockers in the last furlong of a project.
  • To encourage prolific ideas generation he shared a technique with us: use Alphabet 100 to draw the same thing many times. Use this method for logos, for layouts, etc.
  • Since the web is primarily text, start a design with copy and typography first. (We followed a similar route when re-designing the Mudlark website by choosing to focus on content to dictate our layout and design).
  • Jason quoted Dan Mall “Let’s change the phrase ‘designing in the browser’ to ‘deciding in the browser.’”

Appropriate Tension
Tyler Mincey

  • Tyler began with talking about his time at Apple and finding the right amount of ‘push and pull’ with the various inter-disciplinary teams there.
  • He talked about a ‘culture of respectful challenge’—always ask “why”, it encourages critical thinking and learning.
  • Understanding constraints: Innovation is when you move the constraints iteratively, not just designing within them.
  • ‘Good products as communication’: communicate through your work—the care and attention to detail will show through.

The Inertia of Ideas
Michael Heilemann

  • Michael designed the ‘Kubrick’ default WordPress theme. He explained how it was something he did for fun but ended up becoming wildly popular—people even named their dogs after the theme.
  • He talked about his journey from working on things he enjoyed, to working for the open source community, to then being offered a job at Squarespace.
  • Michael worked on an innovative technique that would improve the user experience of a CMS. It was rolled in to the main Squarespace service the day he showed it to the boss.

Responsive Teaching
Tiago Pedras

  • Tiago is a teacher and designer. He shared with us his journey through life up to how he teaches his classes today; which are practical, engaging and employ gamification techniques (involving a gold spray painted coconut.)
  • He encouraged us to share our passion.

Billboards and Novels
Jon Tan

  • Jon talked about the qualities of ‘impact’ and ‘immersion’.
  • He highlighted that the web is about reading. We can really take advantage of this now that we have webfonts and OpenType control.
  • He discovered that good typography induces a good mood (backed up by science!). Dispelling the common notion that it enables us to read quicker.
  • “Fonts are wayfinding apps for emotions”.
  • Jon taked about scan paths. Where does your eye focus when viewing a website. Use colour to highlight something and interup this scan path (and other techniques).

New Adventures in Code
Seb Lee-Delise

  • Seb started with talking about the separation between a ‘designer’ and ‘developer’.
  • Traditionally in educational settings there has been a (literal / spatial) separation between these disciplines. Anything art related would be in a separate campus to the maths and science classes, for example.
  • Between the ‘designer’ and ‘developer’ there is a hybrid emerging. Things seem to be leveling out. (I commented around this subject a while ago on Twitter).
  • Seb calls himself a “Creative Coder”.
  • He acknowledges coding can be a daunting learning curve but, as with most things, it’s very rewarding once you get there.
  • Seb’s talk was really engaging. He’s a funny guy, and his enthusiasm made everyone want to code.
  • He also did some live coding on a Commodore64 (!) and some JS stuff. Seeing this live was a nice way to break down the barrier of some of my code-related reservations.

The Beauty in the Impermanent
Steph Troeth

  • Steph talked about wabi-sabi, musing that we’re indulging in the immortality of things because we ourself are mortal.
  • She referenced James Bridle’s The New Aesthetic.
  • Showed us some examples of ‘low-res’ shoes, examples of digital imperfections out there in the world.
  • Throwaway vs. permanent or impermanent vs. permanent.
  • We get fonder of things over time.
  • How can we make digital things that are allowed to grow old gracefully?

Wayne Tells it Like it is!
Wayne Hemmingway

  • Wayne went on an entertaining, insightful, funny ramble about his life—an inspiring narrative that highlighted integrity and ballsyness.
  • As a board member of the Design Council he highlighted that investing in design will yield the highest return of all sectors.
  • He also said not to rest on the quality of your work—it’s more about what you stand for.

Jessica Hische

  • Jessica’s bubbly up-beat talk rounded the day off nicely.
  • As a freelancer, she talked about the importance on working on the stuff we love, which will then feed in to the paid work that occupies the bulk of our time (and pays the bills).
  • Jessica also touched on work-life balance, burnout and cats.

Now I should go catch my train. Wait, what time is it?