Strategies to get over yourself and start creating

When I start a new project, I often have a moment of anxiety - blank canvas syndrome.  I am really excited about all of the possibilities that are embedded within the task of initiating new work, however I am overwhelmed by the blank screen that is staring me in the face. I start to think: will I ever be creative again? Will I create something unique? How can I effect the most change? ... make impact? do something original.... not find the obvious solution... but the best one.

Despite the fact that I feel like an impostor or a fraud in these moments - this is actually pretty common. I've talked to a lot of designers, illustrators and creative people and everyone seems to have a strategy for conquering this feeling. Here are some of my strategies:

Sit with a marker in your hand

My good friend Chloe Varelidi suggested this to me once and it works for me 99% of the time. I find if I just sit somewhere - a coffee shop, a subway ride, a library etc - with a pen in my hand and a sketchbook in front of me and just start the action of drawing, something will spur on an idea. If I am in a total rut, I will start by drawing what I think is the boring or obvious solution to a design problem - kind of to just put it out there into the world. After that is done, it's out of my mind - time to come up with a handful of other ideas.

Look or listen to something that is unrelated but inspiring

I am the queen of podcasts - at any given time I can tell you about something that I found interesting in a recent episode of 99 Percent Invisible or The Moth. The topics of the show don't ever need to relate to something I am working on, but I find that hearing how other people process problems and ideas inspires me to create. Sometimes looking at art in a museum or gallery is helpful. I will say that not going online and hunting for ideas on Pinterest or Dribbble is the most constructive for me. If I go to those sites I tend to go into a downward spiral of self doubt - thinking - look at all these other designers rockin' it - will I ever get my idea? Instead I think more conceptually and proactively.

Move your body

You've heard of the expression - 'mind - body connection' right? Well there's a reason for that - it's true. Stretch, run, do yoga,  go for a swim or a walk around your office. My friend Atul Varma actually takes off his shoes and paces from room to room while he is brainstorming. It's the act of waking up your body and prepping it to be creative that really motivates you - and it could be completely subconscious.  I always hear about people coming up with great ideas in the morning while they are showering.  This is unscientific, but I am sure that it has something to do with the fact that you are moving your body - stretching, standing and letting your mind relax.
  
Context switch

Sometimes the reason that I can't get started on something new is that my head is stuck on something old.  For example, I recently went from designing a snippet for Firefox to making an onboarding experience to then making promotional content for Privacy day. There's a lot of context switching going on here. I am switching mediums, platforms and thematic concepts! I am still struggling with how to get over this, but one thing that I do is context switch my physical environment. If I have been sitting at a desk for a week straight working on a project, I go to sit at a coffee shop or on a couch to brainstorm. If I have to work at my desk, I find some way to change it : re - organize it,  put some fresh tea in front of myself, find a new pen to sketch with - sticky notes to cut up etc. Anything to alter the environment within my zone of comfort.


Talk it out 

When all else fails, I find a friend or colleague to talk to. This might be in the form of a tweet, a blogpost (ahem ahem), a journal entry, an instant message or a conversation in real life. I tend to talk to everyone - my husband, my community, my mom, my fellow designers, people who are struggling with the problem that I am trying to solve - people who know nothing about the work that I am dealing with, people who won't respond - but just listen to me ramble, people who will respond and give me thousands of ideas that make no sense, just anyone. It's like talk therapy for me. I just need to get out my concerns and energy in some way so that I can move forward with the creative business at hand. 


None of these solutions are fool proof, and it's not like you do one thing and it's a magic bullet or creativity, however, I find that these things are constructive ways to focus and release my anxiety or nervous energy when initiating new work. If you have other strategies, I would love to hear about them, please send me or copy me on a tweet.

Privacy Day Mobile and Desktop Wallpapers

When I was creating the patterns for the Webmaker privacy campaign, I posted my works-in-progress up on Instagram and a few people asked if I would make them into desktop wallpapers. So... in honor of Data Privacy Day you can download them in a variety of patterns and sizes here.

Doodle Pattern: 320x480 | 800x600 | 1024x768  | 1280x800  | 2560x1440

Hexagon Pattern: 320x480 | 800x600  | 1024x786  | 1280x800 | 2560x1440

Wink Pattern: 320x480 |  800x600  | 1024x768  | 1280x800  | 2560x1440



This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Quality Assurance reviews for Design, Functionality and Communications

This week a few of the features that I have been writing about will be shipping on webmaker.org - the work for Privacy Day and the new on-boarding experience. You might be wondering what we've been up to during that period of time after the project gets coded until the time it goes live. Two magical words: quality assurance (QA). We are still refining the process, and I am very open to suggestions as to how to improve it and streamline it. For the time being, let me walk you through this round of QA on the Privacy Day content.


It all starts out with a github issue

... and a kickoff meeting

The same team who worked on the prototyping phase of the Privacy Day campaign work are responsible for the quality assurance. We met to kick off and map out our plan for going live. This project required three kinds of reviews - that more or less had to happen simultaneously. We broke down the responsibilities like this:

Aki - (lead engineer) - responsible for preparing the docs and leading a functionality review
Paul - (communication/marketing) - responsible for preparing the docs and leading a marketing review
Jess - (lead designer) - responsible for preparing docs and leading design review
Bobby - (product manager) - responsible for recruiting participants to do the reviews and to wrangle  bug triage.
Cassie - (quality) - responsible for final look and thumbs up to say if the feature is acceptable to ship

Each of us who were responsible for docs wrote up instructions for QA reviewers to follow:

We recruited staff and community to user test on a variety of different devices:

This was done in a few different ways. I did both one on one and asynchronous review sessions with my colleagues and the community. It helps to have both kinds of user tests so that you can get honest feedback. Allowing for asynchronous or independent testing is particularly beneficial because it signals to the reviewer that this is an ongoing process and that bugs can be filed at any point during the review period specified. 

The process is completely open to the community. At any given point the github issues are public, the calls for help are public and the iteration is done openly. 

and if there were any problems, they were logged in github as issues:

The most effective issues have a screenshot with the problem and a recommended solution. Additionally, it's important to note if this problem is blocking the feature from shipping or not.

We acknowledge when user testers found something useful:

and identified when a problem was out of scope to fix before shipping: 

We quickly iterated on fixing bugs and closing issues as a team:

and gave each other some indication when we thought that the problem was fixed sufficiently:

When we are all happy and got the final thumbsup regarding quality, we then....


Close the github issue and celebrate:

Then we start to make preparations to push the feature live (and snoopy dance a little):

Dino Dribbble

The newly created Mozilla Foundation design team started out with a bang (or maybe I should say rawr) with our very first collaboration: a team debut on dribbble. Dribbble describes itself as a show and tell community for designers. I have not participated in this community yet but this seemed like a good moment to join in. For our debut shot, we decided to have some fun and plan out our design presence. We ultimately decided to go in a direction designed by Cassie McDaniel.

The concept was for us to break apart the famed Shepard Fairey Mozilla dinosaur into quilt-like
tiles.

 

Each member of the design team was assigned a tile or two and given a shape. This is the one I was assigned:

I turned that file into this:

We all met together in a video chat to upload our images on to the site.

 

Anticipation was building as we uploaded each shot one by one:

 

But the final reveal made it worth all the effort! 

Check out our new team page on dribbble. rawr!

Cassie also wrote about the exercise on her blog and discussed the opinion position for a designer to join the team.

EYE Witness News: Promotional Content on Webmaker

On January 28th Mozilla will be celebrating Data Privacy Day. This is an international effort centered on "Respecting Privacy, Safeguarding Data and Enabling Trust." There will be content on Mozilla, Webmaker and Mozilla Advocacy. The Webmaker team had previously developed privacy content with the Private Eye activity (featuring the Lightbeam add-on), so the primary challenge here was how to promote that content via the Webmaker splash page. This is actually a two - fold design opportunity:

1. micro: how might we promote the unique Privacy Day content on the splash page for the 28th?

2. macro: how might we incorporate promotional interest-based content into the real estate on the Webmaker splash page on an ongoing basis?

Constraints: needs to be conceived, designed and implemented within 2 weeks.

Start from the beginning 

I took a look at the current splash page. The content that we are promoting is directly connected to the Mozilla mission, so I identified a sliver of space directly above the section where we state the project's values. My thinking here is that we are creating a three tier hierarchy of values on the page: 1) we are webmaker - we are all about making - and this is what you can do right this second to get started, 2) we are deeply concerned about [privacy] - and this what you can do right now to dive into that topic and 3)we are more than just making + [privacy] - here are all the things that we value.

I SEE what you did there

That sliver was great, but it was below the non-existent but deeply considered fold of the page. If this was a painting I would create a repoussoir element to bring the users attention to the core content  by framing the edge. In the painting below you can see that tree branch that directs your attention directly into the heart of the composition.

Jacob Isaaksz. van Ruisdael, The Jewish Cemetery (1655-60)

Building off of my thinking from designing the Mozilla snippet and the onboarding ux,  I wanted to make this repoussoir element something that a user might find quirky, whimsical or relateable. All of the other elements on the page were expected and kind of standard elements for a webpage. I needed to create something that would be subtle yet attention grabbing.  Looking at subject of privacy, I immediately had associations with corporations and individuals big- brothering me as I visited web pages. I realized that the activity we were directing users to was called private eye - and this led me to create a small asset that features an eyeball that follows your cursor around as you explore the splash page. On hover it will flip and direct you to the activity.This worked for desktop, but for mobile we would have to simulate the action by having a simple CSS eyeball animation center aligned on the sliver. Major props here go out to Aki who had to invoke the pythagorean theorem to get the eye to follow the cursor without leaving the sclera.

  I did a study of eyeballs on redpen and immediately got a ton of community and staff feedback - which told me two things: 1. it was a conversation topic and 2. people liked the very first eyeball that I drew. 

My javascript now has a variable called ‘pythagoras’. HAHAHA TAKE THAT, MATH.
— Social Justice Mage (@gesa) January 14, 2015

Let me give you a walk through

From Mozilla's perspective, we are testing:

• whimsy vs. traditional promotional placement 

• mission driven content 

• how many people are we getting to engage with Webmaker and sign up for new accounts

What's Next Up:

• This will be deployed on staging on Monday and then our goal is to go live on January 28th, which is Privacy Day!

• Now that we have a promotional framework, figuring out how to incorporate a richer learning experience around mission - based content.

• Users can opt into enrolling in a sustained challenge - based Webmaker activity. Almost as if it's a virtual Webmaker club.
  
  
  Shout outs to the team that made this possible: Aki, Andrew, Erika, Paul, Dave

Shall we dance? On-boarding Webmakers

The first time that someone comes to your website is like a high school dance at the gym. You want that hottie who you have been thinking about all year to be attracted to you and join you on the dance floor . You want to show them what you are all about: how you aren't just about the MC Hammer pants and bikini top you are wearing (dating myself much?) - and you have the moves to prove it. This dance is just the beginning - you really want to go steady, but you have to start somewhere, right?

About 40-60% of users who sign up for a free trial of your software will use it once and then never come back.

When designing the on-boarding experience, we have a few goals: 

• We should make a positive user experience where the visitor learns something within minutes of interacting
• We should have the user take some action which results in signing up for a Webmaker account
• We should give the user a clear and compelling reason to return.

Deeply inspired by the theory of Hanging Out, Messing Around and Geeking Out: Kids Living and Learning with New Media, I started to think about what a low bar way might be to get people to dance with me.  The idea is that there is a progression and/or just different ways that a site visitor might interact with the site. I wanted to create an experience for the user, that will allow them to walk away having seen a little bit of code, had the a ha! moment, the realization that there is so much to learn about the way that the web is crafted - and most importantly: that remixing the web is an approachable challenge.  According to this chart below, we could argue that most of our site visitors are at the beginning of the customer awareness journey.

Start from the beginning --- err where is that exactly?

I started by doing an exploratory sketch - asking where might users first see/ interact with the Goggles on Webmaker? I see 5 main areas of contact:

1. Webmaker Landing Page with a very specific call to action
2. Via the not-yet-existing "Join Webmaker" button user flow
3. On the Tools page within Webmaker
4. On the Goggles page within Webmaker
5. Within the Goggles interface upon activating the bookmarklet

For this heartbeat (and the build sprint after) we decided to focus on number 1 via 2 (Join Webmaker user flow via the landing page) as the goal for the first quarter is to improve our conversion of visitors to Webmaker.org into makers.

Think through the user flow

With a clear scope, I took a stab at thinking through potential user flows (ahem,dance moves). What interactions might I be able to design that could help the user gain an understanding of the awesome potential of Webmaker and come away with learning a little bit about making things on the web within the first few minutes of their site visit? On a traditional site, this is where I would do a product tour - to tell the visitor about all the bells and whistles. But, let's remember, we are at a high school dance. We don't want to just tell that hottie about how great we are, we want them to hold our hand and dance with us. So what exactly is our dance? It's an introduction to the site through an interactive tinkering activity.

I had some experience tackling this user experience challenge a few months back when I designed the Maker Party snippet for the Firefox about page. Here, we were trying to coax visitors to the About Page to sign up for Webmaker AND ... (the cooler part) expose them to a little bit of code through modeling a playful interaction that they in turn would emulate. We found this approach to be successful. I personally user tested the page with a variety of site visitors in the Hive Learning Network and found that the animated modeling of the CSS value being typed acted as I would as a teacher in a classroom, or a friend showing someone how to approach the problem, asking the friend to try it out themselves. This approach could easily translate to an activity on the landing page where we show a visitor how to edit some playfully placed text using the X-Ray Goggles.

Approach 1: Modeling

Modeling tries to emulate the way you might teach this in a classroom environment - you show the actions that you want the learner to emulate.  See complete mockup here.

I also tackled this challenge of getting a user to dabble with new information and content in the weather activity experiment for the Hour of Code. Here, I thought about how I like to follow recipes and get feedback as I do each each step in a staged progression. (This would be like... someone teaching you how to do the macarena step by step at the dance)

Approach 2: Stage Progression

The staged progression allows the user to read, and then asks them to try it out, providing little tips along the way. See complete mockup here.

After getting some feedback from my colleagues and a few user testers I am leaning towards a hybrid approach - where you might model for them at each "step."

Next up: enticing your friend to get on the dance floor

All of the user flows and interaction designs are a good exercise, but if the icebreaker prompt isn't enticing, then it's no good.  So - I did a few iterations:

Name tag fill in the blank --- this could somehow tie in to the sign up flow.

Venn Diagrams - probably too designerdy but I couldn't help myself.

Fill in the blank - I <3 webmaking.="">

Fill in the blank - attempt 2. I like this one the most at the moment because it has a focal point, and it feels a bit disruptive, like Webmaker itself.

Next up: Finding those dancing shoes.

To get to an interactive prototype, we need to:

• Design the hybrid interaction design (modeling + staged progression)
• Choose a direction and then work on the UI elements
• Wordsmith the copy.
• User test with real humans!

Designing an on-boarding is like asking someone to the dance floor ----testing if your pits stink and all, so I would love to hear any thoughts if I've got any moves. 

Hive Labs at the Mozilla Festival: Building an Ecosystem for Innovation

 

This weekend marks the fifth year anniversary of the Mozilla Festival - and Hive Labs has a ton of fun design - oriented, hands-on activities to get messy with in person or remotely. We are using the event to explore design questions that are relevant to local communities and Hives and to dabble in building out a community-driven ecosystem for innovation. Here's a few highlights:

Challenges to Enacting and Scaling Connected Learning

This year, the Hive track at MozFest (http://2014.mozillafestival.org/tracks/) is bringing together Hive and "Hive curious" travelers from around the world to incubate solutions to shared challenges in enacting and scaling connected learning. We're working together over the course of the MozFest weekend to collaboratively answer questions that come up again and again in our networks across the globe. One question that Hive Labs is focusing on is: How do we build a community that supports innovation in the education space? 

Action Incubator

We will be hosting a series of activities embedded within the Hive track to think through problems in your Hives and local communities and brainstorming solutions collectively. We will be leveraging three teaching kit's that were made specifically to facilitate this kind of design thinking activity:

• Firestarter: In this activity, participants will identify opportunities and then brainstorm potential design solutions.
• User Testing at an Event: Events are a great time to leverage all of the different kinds of voices in a room to get feedback on an in-progress project or half-baked idea. This activity will help you to test ideas and projects and get constructive and actionable feedback.
• Giving + Getting Actionable Feedback: Getting effective and actionable feedback on your half - baked ideas and projects can be challenging. This activity explores some ways to structure your feedback session.

Art of the Web 

This entire track is dedicated to showcasing and making art using the Web as your medium. Follow the #artoftheweb hashtag on twitter. 

Visualization of the Web Literacy Map by Chad Sansing - 

in response to the #mozfest remotee challenge

MozFest Remotee Challenge

Want to join in on all of the Mozilla Festival action even though you aren't physically at the event? This challenge is for you! We have compiled a handful of activities focused on Web Literacy, supporting community - based learning and making so that you can take part in the conversation and brainstorming at the Mozilla Festival. Go here to start the challenge.

You can follow along all weekend using the #mozfest or #hivebuzz hashtags on Twitter.

Remix + Hack the Firefox Home page. No really, we want you to!

If you are a Firefox desktop user, you may have seen the Firefox default home page. This page contains a default engine web search and quick links to downloads, bookmarks, history, add-ons, sync and settings. Additionally, if you happen to have had tabs open the last time you used the browser,  you can restore them from the home page.  We often share important news and updates underneath the search bar.

This is what I currently see at the Firefox default home page. Animated gifs FTW.

THE OPPORTUNITY

A few months back, Hive Labs, (a new project within the Hive Learning Networks designed to explore the question “how do we use design to transform edupunk ethics into great products?”), was approached by the Mozilla Foundation Engagement team to brainstorm how the space could be used in an innovative way to educate Firefox users about the Maker Party. Maker Party is Mozilla's global campaign to teach the web, uniting educators, organizations and enthusiastic web users with hands-on learning and making. While I have to admit, I have never really created something in the realm of owned media, I saw this as an interesting opportunity for Mozilla to show (vs. tell) what Maker Party is all about.  

THE CHALLENGE

The team (which included creative individuals from many different projects across the Mozilla Foundation and the Corporation) immediately identified the opportunity space and came up with a few project requirements:

• use the space in an interactive way to introduce the website visitor to web literacy skills
• acknowledge that the visitor may not have ever seen code before, and understand that we do not know what web literacy skills they are coming to this space with
• create something playful

THE SOLUTION

While we tossed around a few different ideas, the solution that we came up with was to create a Webmaker Goggles - like experience that lets the visitor see under the hood of the webpage.

After doing some initial sketches, we realized that we needed to define our learning objectives for the project.  While normally this is fairly easy to do - you say that the learner will come away with the ability to remix a paragraph written in HTML and understand what p tags are, or something very basic. Here, the challenge was two-fold: 1. the webpage visitor did not identify as a learner and 2. as I mentioned before, they might have no knowledge of the fact that the code is written in order to create a webpage. So, after several false starts, we came up with the the goal of having the website visitor walk away understanding that if you look under the hood of a webpage, you will see it is made from code.

Initial sketches for the snippet included replacing the Firefox logo with an image

After the learning objective was defined, we had to interpret what that meant in terms of interaction design. I believe that the most effective way to empower a user is to put the tools in their hands to allow them to directly address and grapple with the thing that they might learn by tinkering with it themselves. We tried out a few different iterations on this. Above is a sketch where the visitor might get instructed to remix the page from a video. The idea was to have a person in the video describe what to do, and then the learner would use the goggles to swap out the video for an image or video of their choosing. This idea was fun, and had a lot of potential community localization opportunities. However, there was a risk that the user would just not click on the video, and miss out on all the fun.

Ultimately, we ended up utilising what Atul Varma calls “cruise control” —that’s where we model the behavior in order to encourage the site visitor to try it out themselves. It looks like someone is typing out all of the words on the screen.  We decided to focus on revealing a little CSS, because you can use real words to represent colors and seeing those colors immediately can have a visceral impact on the site visitor. Here is a screencast of the interaction:

** Update: You can see the actual interactive experience by going to the Firefox homepage or if you can't get to that, check it out here.  **

The crazy and kickass cast of characters who pulled this interactive off are:  Chris Lawrence, Atul Varma, Brian Brennan , Adam Lofting, Hannah Kane, Jean Collings, Mike Kelly, Chris More, Matt Thompson, Aki Rose Braun,  David Ascher, Geoffrey MacDougall, Brett Gaylor, John Slater, Eric Petitt, Mary Ellen Muckerman, Pete Scanlon and Andrea Wood.

We’re really excited about this project, as it represents one of the first interactive uses (if not THE first) of the space of the Firefox home page. We hope that as site visitors dip their toes into understanding the craft of the Web, they’ll be inspired to learn more through Webmaker and Maker Party.  Our ultimate goal is for people to feel empowered to become creators, not just consumers, of the Web.

How to learn more about Net Neutrality

Like many people, I wasn't really aware of the potential impact that opposers of Net Neutrality could have, or for that matter what net neutrality was, until I was introduced to the topic by John Oliver on his tv show Last Week Tonight. After hearing his explanation and comedic rant, I started to learn more about net neutrality. My colleague, David Steer explains net neutrality as the opinion that 

"Data, regardless of who it is from or who is receiving it, is treated equally by Internet service providers."

I like to think of it as opening up the door for 2 internets - one that comes at a cost, and another that is free. Sounds fine, right? You're like .. ok what's the big deal? I'll just use the free one. But just like many other free services that you have used that all of a sudden put up features behind a paywall, your free offering becomes crap - cluttered with ads, slower to use and just a poor man's version of the prime real estate - this too will happen with the Web. 

I believe that this issue is the most important topic for web users (globally), because without the neutral infrastructure of the internet, many freedoms that we take for granted in this hand crafted community - such as speech - become compromised in a privileged and gated web. Opposition to net neutrality threatens democracy, participation and free speech.  But this isn't a hopeless cause, there is actually something proactive that you can do to protect the Web that you love: you can learn more about Net Neutrality and explain it's importance to your small circle of the world why it's important. The goal is to create an educated groundswell that will be able to defend the open web.

Here are a few concrete ways to learn:

1. Attend the free Net Neutrality global teach-ins offered by Mozilla this week
2. Check out the the Net Neutrality kit
3. Do an activity  - here's a 1 hour activity
4. Join the conversation on discourse

I contributed to these kits by making a few activities:

I fight for #TeamInternet to save net neutrality because: You can make an internet meme explaining why you support net neutrality.

Superheroes for Net Neutrality: Calling all Superheroes! The Legion of Thorn has created 2 Webs - resulting in a dystopian state. Avenge them and defend Net Neutrality by crafting a league of superheroes to join Team Web, and remix a comic book webpage to show how they use their superpowers to save the day. 

This comic remix was made by a 7 year old

Regardless of how you learn about Net Neutrality, take some time out of your day to add it to your information diet.

The first 6 weeks of Hive Labs

Six weeks ago, Atul Varma, Chris Lawrence, Kat Baybrooke and I embarked on an experiment we call Hive Labs. Let me tell you about, Let me show you a little slideshow I made about our first 6 weeks to the tune of Josh Gad singing In Summer from the movie Frozen.





So, in summary (or if you aren't the musical slideshare type) the first 6 weeks have been great. We did a bunch of listening and research, including attending events and hackjams run by and for Hive members. Here's a neat worksheet from a Mouse run Webmaker training in New York. 

We did some research and design on tools and resources to support prototyping:

Sherpa is a codename for a tool that helps prototypers define a design opportunity and openly work through the process for designing a solution. We designed some mockups to see if this is a direction that we should pursue. Sherpa could be a back-end for the "Cupcake dashboard" or be a stand alone tool. We spun up an instance of the "Cupcakes" dashboard  designed by the Firefox UX team to help figure out if it is a useful tool to surface prototypes.

We also prototyped a snippet for Firefox to promote Maker Party, worked on an idea for self guided Webmaking and began work on a Net Neutrality Teaching Kit.

Finally, we've shipped some things:

The No-Fi, Lo-Fi Teaching Kit and the Mobile Design Teaching Kit

The No-Fi Lo-Fi Teaching Kit asks participants the question how can we empower educators to teach the web in settings where connectivity isn't guaranteed?

With the Mobile Design Teaching Kit, participants play with, break apart and modify mobile apps in order to understand how they work as systems. This teaching kit is designed to explore a few activities that can be mixed and mashed into workshops for teens or adults who want to design mobile apps. Participants will tinker with paper prototyping, design mindmaps and program apps while learning basic design and webmaking concepts.

A local and a global Hive Learning Network directory

... and a section on Webmaker.org to help guide mentors through making Teaching Kits and Activities:

The first 6 weeks have been great, and we are going to continue to listen, create and deliver based on needs from the community. We have lots more to build. We want to do this incrementally, partly to release sooner, and partly to build momentum through repeated releases.