UX Lead with a passion for all things UX, IA, Product Design, and Music


Mozilla + Design Gym Workshop #3

Our 3rd and final Design Gym / Mozilla Developer Network workshop was held at AlleyNYC. For each workshop we've invited expert guests to participate and add new ideas along the way. For this workshop we were joined by 2 Mozillians (besides myself) from the MDN team. 

Ideate & Present

This workshop is a final chance to work through old & new ideas. It is also time to get away from post-it notes, rough ideas, and defining our audience and problem. We are now past that point and need to start picking concrete ideas and visualizing them. It is as difficult to keep a coder away from coding as it is to keep a designer away from starting to design early in the process. However, by holding off on tangible solutions in the beginning and focusing more on implementation and visuals in the 3rd workshop, our final solutions are more thought through and useful to the problem at hand. 

It is quite a large endeavor to try to solve for everything needed in a site redesign at the end of 3 workshops, so I asked the teams to focus on the 5 familiar topics we discussed in our last workshop. They can then take 2 of their best ideas to visualize and bring to a state that is presentable at the end of the night. 


I'd like to post 20 ideas here, since there were so many that could potentially be useful to the MDN community, but I'll stick to a few for the sake of keeping this a readable post.

Symbiotic relationship and benefits to our community: Experts and beginners can do more than instruct and be instructed on MDN. Expert exposure and contribution on all levels to MDN gives us more than credibility and community. It offers us the ability to get our members exposure, speaking gigs for the experts can result in free conference passes for our community, exposure and a closer community can result in funding connections and job opportunities, etc. By reaching out and finding the needs of our community, we can use our exposure and credibility to support these needs in tangible (and appreciative!) ways. 

Friendliness and context: There is so much we can do with MDN by just connecting the dots of our current content and using more personal and useful messaging. This can be done without adding more content. For instance, welcoming the user in a more friendly and functional way: "Welcome, Luke! There are 2,100 other designers here!" This message highlights activity and also makes being a designer (and possibly new coder) at MDN  not feel quite so intimidating. It gives the user a sense of context of where they are in the community. 

Alive and human: "Make it feel active and human" was a quote that came out of this workshop. MDN currently feels like only a directory for developers. You don't get a sense of activity and the types of users present or the discussions happening in the back-channels, code demos being postes, etc. All of this content and activity already exists. Why doesn't the homepage reflect how alive our community is? We should highlight these activities on the homepage and throughout.

There is more to teaching code than diving into code itself. Many methods of learning require a lot of work and actual coding to learn the how and why of things. The following examples will be helpful tools to teach beginning users about scope, how code effects your outcome, and how all pieces of the puzzle fit together. 

Visualize how it's built: Show a bird's-eye-view diagram of all the pieces that go into creating a particular example. Show the user all parts of the process (Git, text editor, database, content creators, etc). Show this in context of large and small familiar examples. How do Amazon and Pinterest work? How does a simple Tumblr blog work? 

Backwards engineer: I've found that one great way to learn about how a machine works (especially any electronics) is to take a part away and see what happens. If we can show the user a finished website and allow them to take away the CSS, take out the dynamic pieces, etc one at a time with a simple toggle, we can teach by backwards engineering and show them the direct effect of each part of the whole. The user is learning about the code before diving into a code editor.

Extras: Profile driven experience, more action-oriented homepage, add lower-investiment (passive consumption) items, focus on the users and their activities across MDN, "novices only know what they want in the end".

Thank You!

Besides being a fun and extremely valuable set of workshops, I met a wonderful group of enthusiastic and smart people. They were willing to meet up in NYC in the evenings, somehow still full of energy, after a long day at work or school to learn about design process and our Mozilla challenge.  I definitely recommend working with the Design Gym and their group of "solvers" . Looking forward to working with them again!

Holly Habstritt Gaal