One.More.Time. Playtesting the Mozilla Webmaker Projects
Playtesting is a word we often use in game design to explain the process of playing your game with others to test how good it is. It involves putting in front of your audience what we call a “prototype” which is to say a rough version of your final product and then (quietly) observing your players, gathering feedback on what works and what doesn’t. In the past years I have been using playtesting as a term to test interactive projects of all kinds as part of a design cycle of first researching, then designing, then prototyping, then playtesting and finally iterating.
In similar fashion when we started working on the content for the Thimble Application with the Mozilla Learning Team (launching soon as part of Mozilla’s Summer Code Party) our goal was to prototype a few of our projects as fast as possible and then playtest them with audiences who ranged from educators to developers to youth in places ranging from New York City to London to Toronto to even.. Kenya! In this blog post I will try to sum up 10 key points from the initial feedback we have gathered and explain how that has informed the next iteration of our designs. (as presented in last weeks Learning call)
Comments powered by Disqus
- Overall everyone found the projects FUN (phew). Users seemed engaged with the Thimble tool and were excited with the projects, especially the Thimble ones that were interactive such as Hack a Map and Make a Meme one but also the Listen Up which was an interest driven project especially crafted for a First Ammendement Jam hosted by Hive NYC.
&TEA at Mozilla London
- For beginners there was a desire for the projects to be more scaffolded. Too many learning objectives in one project created confusion. We have included another 5 projects to address that issue and break down the learning objectives. These new projects guide learners from wrangling basic HTML tags to getting familiar with CSS, to understanding privacy online. Here is an example:
In Avatar-O-Matic your goal is to MAKE your very own webmaker avatar by mixing and matching the images on the page and share what you are passionate about making. During this project you learn the basics of positioning in CSS as well as a few things about sharing your personal information online.
- We discovered that many learners did not know how to use links. For that reason we have created a project specifically to guide users through linking and adding images. We also discovered that the “fixing” of things gave a strong motivation to certain learners to engage with the project, so we plan to use it further as a strategy.
Your goal in this project is to fix the links and clickable images to create a cat guest list of your choice for a bakery bash (hosted by the renowned loaf cat.)
- We realized that the ASCII art we had at the top was confusing to people, so we have taken it out in all iterations.
- We also noticed that the first lines of code that a user read were the most important for them to gain confidence in what they were doing and not scared away by “all this code”. So for example when the document begins with a CSS style section, it is largely confusing to someone who’s goal in that project is just to tinker with HTML elements. Because the syntax in CSS looks a bit different we have moved the CSS sections further down.
- We discovered that projects that had few instructions were the hardest for people to customize and be creative. So for example, in the Make a Meme project many users did not change the picture of the Serious Cat. In our iteration of all the projects we make explicit comments asking users to make changes and guide them into being creative.
- Speaking of the Serious Cat, it turns out that if you are not a member of the Mozilla Learning team, or a 15year old New Yorker - you don’t know who this cat dude is, and it also looks creepy to most people. To our despair, we have given that place to the Crasher Squirrel, which at least provokes universal smiles.
- As anticipated during our playtesting there were great opportunities for mentoring, where more advanced developers would guide beginners through creating their first webpage. We plan to take advantage of the moments of peer mentoring through future community and peer badges functionality.
First Amendment Hackjam by Hive NYC
- Users rarely seemed to want to tackle a “next project.” For the majority of users this was a one-off experience. Because there was no overal grouping of projects the narrative of the Web-Arcade was not so strong. For now we have removed that narrative and we plan to revisit once we include functionality like grouping projects into suggested pathways.
We are launching our next set of projects as well as the iterations of the first release on this Thursday’s Learning Call (woot!). So feel free to drop in and sign up for some more playtesting. Until then, peace and daft punk.