Webmaker Team Blog @webmakerteam - Tumblr Blog

Webmaker in 2014

Webmaker 2014 Like the rest of Mozilla, 2013 has been a busy year for the Webmaker Product team. In 2014 we'll build on this year's work to increase our impact.

A solid foundation This year was about establishing a solid product base. We did some things that will set us up well for next year, like:

Establishing a Webmaker Product team in March (

Launching a new iteration of Webmaker.org in June, with user accounts, hosted domains and content galleries, plus a refreshed look and feel for the Webmaker brand

Switching all of the backend for our creative tools to node.js

Supporting Mozilla's global Maker Party with a simple events platform

Hosting the announcement of the Web Literacy Standard

Focusing on mentors as our key lead users

Collaboration and Contribution We learned how to collaborate in new ways this year, most notably:

We shipped all of our apps in 12 different languages, with another 72 underway. 500 people contributed to this effort.

We created a tight feedback loop between our users and our development process using surveys, user testing and a weekly cross team call with our colleagues on the Webmaker Community (formerly Mentor) team

2014 – Taking Web Literacy to Market1) Make web literacy the primary user experience of Webmaker.org At the Mozilla Festival (MozFest), we announced the work that Doug Belshaw had been organizing to create a community-based “Web Literacy Standard”. This is a set of skills that the Webmaker community feels defines what it meant to be web literate - capable of both reading (consuming) the web, and writing (making) the web.

We're really excited about web literacy on the Webmaker Product team because it's a fantastic differentiator for the work we do at Mozilla. While we're definitely cousins and supporters of the “learn to code” movement, we know that there is space, and hunger, for a nuanced approach to learning the web that includes designers, media makers, writers, and makers of all stripes. So, we've begun to create prototypes for how this set of skills and competencies can create a map for our users to explore. This is quite a User Experience challenge, and we're looking forward to diving in.

2) Let users share and curate their own channels We recently unveiled an experimental feature on webmaker.org: user profiles. We wanted to create a lightweight way for people to curate their makes (things people create using webmaker tools). Gavin Suntop, Front End Architect on the Webmaker team, outlined this feature recently on the Webmaker blog https://blog.webmaker.org/user-profiles.

After receiving feedback from our mentor community, we've been thinking of these personally curated profiles as “channels” where users, partners and contributors of all stripes can curate not only things they've made on Webmaker, but things they've created (or love) from elswhere on the web. If you haven't do so already, give your profile a spin and help us improve it by completing the survey.

3) Improve the MakeAPI Currently, we use our MakeAPI to surface makes on webmaker.org. It unifies our publishing model and lets us do cool things like let people see what they've made, see who has remixed their work, and tie their creations to their profile.

Next year we want the MakeAPI to do more. We want other apps besides our own publishing there; we want users to be able to add makes as simple URLs in support of the web literacy work above, and we want others in the open source community to be able to create new apps and use cases on top of our API that we couldn't imagine.

4) Introduce Appmaker as Webmaker tool A project we're incredibly excited about is Appmaker – a creation of the Mozilla Labs team that lets non-developers create mobile apps. It's a perfect fit for Webmaker's mission to teach the world the web, and we want it to publish to our MakeAPI and sit side-by-side with Webmaker tools like Popcorn Maker, Thimble and the X-Ray Goggles. Watch the video below to get excited.

5) Move users along an intentional ladder of engagement If this sounds like marketing speak, don't worry! All it means is that we want to help everyone become a contributor to Webmaker. If you've created a make, we want to help you take the next step and submit makes that help others learn web literacy. Now that we've created a foundation with webmaker.org, we can start to get more sophisticated about engaging with our users. Folks who have created events could find others near them, mentors could be invited to our weekly calls, people could meet others who've remixed their work etc. We want to have a better conversation with our users so we can encourage everyone to be a producer of the web.

It was a busy, but satisfying year for our team and we're grateful for the many contributions from our community. We can't wait to make webmaker.org even more successful in 2014!

Together.js + Webmaker at #mozsummit

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.

Reflections on a Summer of Making: how we found our audience

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.

Break the internet - Media artist Stephen Fortune teaches you to deface the world wide web with L… http://t.co/aFFpbNJYgQ via @DazedMagazine

— John Cusack (@johncusack) September 15, 2013

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.

June 15 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.

What Happened? 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 respondee

Hard 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 respondee

Cassie 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.

Choosing priorities 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:

Allow Thimble to publish JavaScript. HTML and CSS weren't enough.

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” “I love making things which are fun to me and informative to others." “Explaining, translating things and helping people understand technology and difficult stuff”

What's Next? 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.

A work week full of win

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 sync

We'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 Pages

This 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.

Localization

Ali, 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 revamp

While 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.

Likes

We 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 MakeAPI

Chris 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 Makes

Jacob 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 Kits

Matt 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 Emails

Jbuck 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 architecture

Based 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?

Please help us do QA testing to make sure everything is in tip-top shape: http://mzl.la/11CBkzy

We'll be doing formal user testing through the Maker Party – stay tuned for how to attend (or host!) a session.

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!!

Changes to the Webmaker Experience

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.

Webmaker Dashboard (v1)

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!

"All of the apps in our next rev of webmaker.org will be hosted in Node.js. It's a large learning curve for the team, though the above graph illustrates some of the performance wins. The blue graph are load times in our current infrastructure, the orange is on Amazon Web Services, where we're starting to deploy now. Thanks to JP Schneider both for the graph and the amazing DevOps work that is producing it.

edit: JP Scheider adds "we shipped like 5 apps this week"

It’s an interesting and intense time. Real traction on our big dreams is within sight: a Mozilla-backed movement where people champion creativity and making on the web; a new era of remixable, Legolike web content; a world of learning that works like the web. At the same time, we’re all heads down on the details of building tools, shipping web sites, making content, writing curriculum and recruiting partners. While it can be stressful, this its actually a very good, Mozilla-like place to be. Our hands are mucky shipping things while we are still aimed at and inspired by big dreams of making the web a better place.

Great post from Mark Surman about the state of Webmaker so far.

Last week's UX recap: Badges, Learn, and Search

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!

– @cassiemc

New Friday ritual: team demos. Community room in Toronto, Seneca college students and remotees gather in video conferencing room.

Webmaker quick update

moments from webmaker work week - April 9-12 2013

Burnin' down the bugs

To accurately track and build the many apps that compromise the new webmaker.org, we've switched our bug tracking to bugzilla, the much loved (and sometimes scorned) bug tracker used across the Mozilla project. We're experimenting with Scrumbu.gs, a tool used by other teams across Mozilla to do week long sprints. As it's our first sprint after last week's work week in Toronto, and many of our apps are being built from the ground up, we're assuming that we don't yet have a clear picture of our estimation and velocity yet. Still,it's fun seeing the bugs go by with their associated graphs.

If you want to file a bug, you can now do so here

Revised site map

See discussion in bugzilla

Here are some initial wireframes for the next iteration of the webmaker homepage. The idea is that all the grey boxes will be filled with "featured makes", and this grid will fill the whole page and look awesome. The "Make" is emphasized in the main nav because that is ultimately what we want everyone to do. However there is an alternative nav if we think subpages need to be democratic... I've altered two other things since our work week collaboration: The first is the location of the sign in/sign up, as it was competing too much with Tabzilla up in the top bar. The second is that I added in some social media icons for easy keep-in-touch-ness, which also satisfies needing to change one of the footer CTAs from a rather vague "Community" to "Tools", which I think should be done after looking at the analytics - "/tools" is currently the most popular internal page.

Et voilá! Feedback very welcome.

Trending Blogs

Recently Viewed Blogs

Webmaker Team Blog