At the just-completed Mozilla Summit, Webmaker folks demo’d a nice upcoming feature - using TogetherJS from Mozilla Labs in Thimble to allow collaborative learning.
The past summer was huge for Webmaker: our newly redesigned site began to operate as a central hub for all our tools; the integrity of our site was tested at 1600 separate events around the world; 30,000 users signed up and we quickly learned where our weak spots lay. And then John Cusack told a million people to help break the Internet with us.
Now, after months of focused work, several rounds of user testing and a good hard analysis of our early adopting users, we’ve arrived at a clear understanding of who Webmaker currently serves. The answer (drumroll, please) is mentors - passionate educational activists who love to share the joy of making on the web. This blog will summarize all that’s happened over the past few months and where we’re headed next.
Let’s start with the big picture
Our mission with Webmaker has always been to empower people to evolve from consuming the web to creating it. “The Front Lines of Participatory Culture” is how Mozilla’s Chris Lawrence has often described the work.
Our hypothesis set things in motion
We built the current incarnation of Webmaker.org to rapidly test the following hypothesis:
With this in mind, we did two things:
- We created a set of Starter Makes - remixable postcards, comic books, recipes, posters, etc.-and then waited to see what people would make.
- We gathered a group of our earliest, most enthusiastic users who had a keen interest in sharing their skills (we called them mentors) and tasked them with providing value to the educators, edupunks and makers who were active in their communities. These mentors ran events, creating curricula and advocated for new approaches to learning. We created webmaker.org/teach to feature resources this community could use, and webmaker.org/events for them to find one another.
This day was big. Our re-designed site went live and Mark Surman threw open the doors, telling our users: "we want you to break things". We kicked off our three-month Maker Party, realizing that it would serve as a real-world user testing lab for our site and our hypothesis.
We saw approximately 5,000 users sign up immediately. Presumably these were existing users of our tools, but it was an exciting start. Leading into July, traffic was modest with 4,000-6,000 visitors every day. We didn’t reach out to the press and our marketing consisted of a single blog post. We didn’t want the entire world to arrive. Instead, we focused entirely on our first users.
Throughout July, the Maker Party was building momentum. Events were popping up daily in an impressive variety of locales, and contributors were transferring their passion and knowledge to their local communities. Seeing people run Maker Parties in small shops, orphanages, community centres and universities was an eye-opening experience for those that built Webmaker. No longer were our users ethereal people we hoped to win over; now they were real humans with names, jobs and experiences to offer.
Getting to know our users
We sent out a survey to Maker Party participants and 300 people responded with comments on our interface, our content and their general impressions of webmaker.org. While we were mindful of some confirmation bias, we were buoyed by the results.
"My first impression is of one big playground!" - a survey respondeeHard data confirmed what we’d been hearing anecdotally: while users had an immediate positive affiliation with the design and interface, they were not always clear on the purpose of the site.
“Well made, but not clear what it’s for” - a survey respondeeCassie McDaniel, Webmaker’s user experience designer, collated some of the early impressions in this video part way through the summer:
A boost from Firefox
In August, Webmaker was featured on the Firefox start page. As you can imagine, a link on one of the world’s most popular web browsers generates a lot of traffic. Our site traffic began to look like this:
With the realization that tens of thousands of people were visiting webmaker.org daily, we began to curate the front page to feature the best creations from our community. Makes featured on “Webmaker’s Hottest” received a write-up in our blog, exposure on social media and a personal email from our team.
Through our user surveys, and later our formal user testing, we realized we needed to adjust our priorities. The “wouldn’t it be neat if” features had to give way to the issues that were making our users lives difficult. We decided to:
- Overhaul the UI when users submitted descriptions and thumbnails of their work.
- Redesign for our curriculum, and attention from the product team to make it better
- Pay down usability debt with Popcorn Maker. Rather than making it do more, we needed to make it do things better.
- Offer better and more collaborative support for our users using events platform.
What we learned
Mozilla is at its best when we are helping others provide value. Whether we are writing a secure authentication platform like our colleagues at Persona, or building real time collaboration like our friends at Mozilla Labs are doing with Together.js, or allowing anyone to recognize skills like the Open Badges team is doing, Mozilla’s advantage is our community and the leverage we can provide. Webmaker can most effectively move web users from consumption to creation by empowering passionate people to do this within their own communities.
From our surveys, we learned what our users liked to do - and we learned that more than a third of our audience is involved in education, while another third works in technology. Here’s a sample of what they said they liked to make online:
“I enjoy making material for others to learn and add to their skills”What’s Next?
“I love making things which are fun to me and informative to others.”
“Explaining, translating things and helping people understand technology and difficult stuff”
Based on feedback from our users, we’re iterating on our front page to make the calls to action and the mission of Webmaker more clear. We’ll be paying particular attention to the amazing stories coming from our mentor communities. We are finalizing our first round of formal user testing, as well as a subsequent report in collaboration with Drexel University regarding tutorial layers in Thimble. We’ll build software and frameworks that will allow our community to more directly shape the future of Webmaker, like the Web Literacy Standard, The MakeAPI will be opened up to apps other than our own, providing a publishing endpoint that multiple different tools will be able to access.
Most importantly, we”ll continue to learn, teach and ship every day, building the web together with our community.
On August 12th, the webmaker.org product team joined folks from the communications and mentor teams of the Mozilla foundation for 4 solid days of building. The framing of the week was a follow through on our current development sprint - David Humphrey outlined our goals in his "Nine Weeks" blog post. We started with an analysis of the user testing that we begun only a week before - we were thrilled to have 103 survey results, and had begun formal user testing the Friday before. Cassie presented the following recap: The remainder of the week focused on sprinting on the goals we had set in June. We broke into small groups and did demos at the end of each day - we were extremely heartened by our progress. Here are some highlights:
Popcorn Maker UI improvements:To build the revamped webmaker.org, many on the team had to suspend development on Popcorn Maker. It’s been nice to return to some of these issues, and we’ve called this “Operation Pop Better” - see a link of related tickets here. An example is a colour picker - users have wanted this for some time and its nice to deliver.
Another example that Scott Downe worked on was image cropping - we needed ways for users to have more granular control of their images, and to make them full screen.
Media syncWe’ve wanted the ability for a user to input their social media accounts and have this media become available in our tools. Matt prototyped this and demo’d on monday.
Profile PagesThis was the first work week for Gavin Suntop, who worked with Dale Karp and Kate Hudson on an extremely exciting new development - profile pages. They prototyped a hybrid experience, where via hackable tiles, each user could create their own gallery/pin board of their makes. Each tile could also accept HTML and CSS, offering a nice point of entry for starting makers. And most intriguingly, the tiles can also accept camera input, making the profile page a mobile app.
Dale demo’d this on a FirefoxOS phone at one of our end of day demos, basically transporting us into the future.
LocalizationAli, Igor and Humph kept their streak alive, and completed the work necessary to localize webmaker.org, Popcorn Maker and Thimble. Next they’ll tackle the x-ray goggles, and after this prep work is done, we’ll be able to hand over translation to the community and bring our apps into any language our users want. We’re very excited about the direction this will set for webmaker.org
X Ray Goggles revampWhile he stayed in Vancouver to help some of our Mozilla Labs colleagues during a sprint on the Appmaker project, Pomax still shipped the finalized revamp of the X-Ray Goggles. You’ll be seeing this beloved app in your bookmarks toolbar soon (we’re just pressing the final buttons), now publishing to the MakeAPI and re-written in node.js.
LikesWe want our users to be surfacing the best content on webmaker.org, and to feel the love from fellow users. That’s why Chris De Cairos implemented the ability to “like” makes, and we definitely love how this will make our site more social.
3rd party publish to MakeAPIChris also prototyped a feature we’ve been dreaming of - what if other apps could publish to Webmaker.org? With our MakeAPI, this is now possible - so Chris prototyped an example 3rd party app publishing to a webmaker via a “publish to webmaker” button.
Popcorn Maker Starter MakesJacob and Kat and others sprinted on some Popcorn Maker starter makes, like this one, a “moving picture show” where users tell a fun short story using gifs. They also sprinted on how tutorials could be better integrated into the process, with keyboard shortcuts and other pro tips.
New Teaching KitsMatt Thompson, Kathryn Meisner and Erika Drushka spent several days sprinting on Teaching Kits that were enabled by the new designs created by Dale Karp, Cassie McDaniel, Chris Appleton and Laura Hilliger. The results are immediately apparent on webmaker.org/teach, including this handy guide to using popcorn maker in the classroom.
Transactional EmailsJbuck and JP did some building and investigating to ship a feature that’s been heavily requested by the maker party team - the ability to send emails when users create an account and add events. These sorts of emails are an important part of maintaining a service for users, and provide us a way of keeping in touch with our growing base. Jbuck create a node module called "postal service" to make it all run.
New front page and information architectureBased on our user feedback, Cassie has begun the process of redrafting our IA and the home page. We want to make clear what are value propisition is and who we’re building for. The sketches below are some early drafts.
All in all, a fantastic 4 days with some great people. We also got some exercise
After 9 weeks of serious sprinting, we’re proud to announce the launch of new Webmaker.org! Check out the new features like signing in to create your own custom domain, get started making with a template, or browse all sorts of things you can do in the Teach section.
Want to help us out with the next phase?
Thanks for hanging in there with us, and we hope you enjoy the new site.
Thought you might like a preview of the potential default avatar for Webmaker.org. Robots – compassionate robots!!
Our homepage has had a bit more UI design since last week (though the “makes” content is still mocked up) and we’ve begun to build out the frontend, so we thought it was time to highlight and share some of the changes coming to the Webmaker experience. Not only will the new layout still be responsive, a lot of thought is going into how we’d like to bring “making” more to the forefront of the site, without of course disrupting the experience for faithful, long-time users.
This graphic below points out some of those exact considerations. (Go here for a higher-res image).
Personally, I’m most excited about the easier way for users to browse and find makes other people have made. I believe it’ll make for a tighter community and more useful tools for people who are learning to make the web. Ultimately we hope these decisions help more people join us in webmaking.
Part of the implicit shift in Webmaker v2 is that makers are even more central to the Webmaker movement. To manage this, webmaker.org needs to become a hub and a community for the things that makers make. Making (and discovering other makes) needs to be more manageable and a more pleasant experience. There also needs to be one place to see individual progress – the makes made, details about those makes, badges earned, badges in review, etc.
This Dashboard wireframe is a rough first attempt at what that hub might look like, but mostly we’re excited by the idea that it gives users a lot more power over what they create. We imagine being more aware of one’s progress will be a motivating factor for makers to keep learning, keep making, and will ultimately allow makers to build relevant connections with each other.
In addition to this, we’re also considering the different stages of involvement in Webmaker, from a first visitor to a seasoned veteran who may become a mentor to other members. As the community grows, we want it to be easy for community members to help each other out, rewarding merit badges for feats of excellence, remixing each other’s makes, and otherwise becoming truly self-sustaining.
As we think about these additional workflows, we’d love to know what you might expect to see in your dashboard and how you’d like to use it. Let us know!
edit: JP Scheider adds
“we shipped like 5 apps this week”
We spent last week further transcribing our scribbles from our work week in the beginning of April into more finalized forms. We’ve also been giving more thought and attention to specific user flows, including signing in and (as seen above) how users will achieve badges.
Image 1 – Badge flow: What happens when a user wants to get a badge for all their hard-earned skillz? We begin to think it through here…
Image 2 – Learn section landing, v1: Clicking learn in the main nav would filter Learn Challenges into the top grid gallery of the page, and a list of filterable challenges would appear below (for a different way of browsing).
Image 3 – Learn section landing, v2 (not logged in): An alternate view that brings the 1-2-3 process explanation up higher on the page (it becomes vertical instead of horizontal) and turns text links of the challenges into boxes that are more visual instead of text-based.
Image 4 – Learn section landing, v2 (logged in):If logged in, the sign in panel disappears, and perhaps the filter could present more customized challenges based on past completed makes or a series of expected badge flows.
Image 5 – Learn section detail page: Quick iteration of what a learn detail page might look like. The actual UI is a bit straightforward and could be a bit more interactive / fun / immersive. A point of interest is the right-hand panel where a user submits a link or a Make as evidence to receive their badge.
Image 6 – Search: A quick pass at what Search might look like. We know this will be an important site tool for repeat visitors, so it would be great to have a well-designed experience here.
Let us know if you have any comments, questions or feedback!