Personal tools


From MozillaWiki

Jump to: navigation, search



Project goal is to organize and build our growing graphic design community by creating the Mozilla Creative Collective - a centralized hub where designers can post and share work, and where other community members can request design help for their own projects.

Launch Plan and Schedule


More Details

We believe that widely distributed and well-made art is a powerful way to convey a message. In this case, we want to make it possible for people to cover the web with art inspired by Firefox (and other Mozilla products). We also want to create an online social environment where designers and non-designers alike can connect and collaborate in a positive, communal atmosphere.

There's already an existing Mozilla design community doing good some work, but it's not very well-organized. We'd like to use the Creative Collective site to engage these people and bring in new artists and designers (of all experience levels) who previously haven't been involved in the broader Mozilla community.

One way we'll engage these designers is by building in functionality that allows for regular design challenges. For example, one month we might issue a challenge to create designs that represent Firefox's speed...the winner would be determined by the ratings provided by others in the community.


  • for Mozilla: spreading Firefox, brand building, empowering the community
  • for designers: exposure, new knowledge, new connections to other designers
  • for community: access to design resources, more ways to spread Firefox

Site Scope

The site will include the following pages (note: these don't each have to be unique templates):

  • homepage
    • users should be able to view this page and understand what the MCC is about with just a quick glance
    • shouldn't include the full image gallery, but should highlight at least one featured design...possibly a few
    • should have a prominent promo area to announce the current design challenge
    • the featured design(s) or promo area should involve some sort of animation or transition effect for added visual appeal
    • should probably have some sort of news feed of blog posts or relevant links
    • content should be easily update-able so we can use this page as a platform for communicating with the community
    • should include a field to sign up for our email mailing list or follow us on Twitter
    • should include a log-in/sign-up area for existing and prospective members of the community
    • users should see a slightly different display when logged in. For example if they are "fans" of a designer, they will see their recent uploads and activity (similar to the Flickr model).
  • gallery view
    • design gallery is a page full of thumbnails of images uploaded to the MCC
    • sortable in various ways - options include category, popularity, recently uploaded, etc
      • The "popular" category is based on # of clicks
      • They should also sort by themes, overlapping themes and tags are ok
    • search field
    • should have a smaller promo area detailing the current design challenge
  • design detail view
    • larger view of any individual design
    • a # display of how many times the image has been viewed
    • full-res file should be available for download in different formats:
      • Such as: PNG, JPG, layered PSD, etc. Lets not forget GIMP and other open-source / free alternatives.
    • if relevant, a short description about the design and inspiration behind it. This could also be part of an artist "interview" that we conduct separately.
    • social networking tools built in – share on Facebook, Digg, etc
    • should be connected to the CommStore – ideally a link like “Make a t-shirt”
      • It might make sense to structure this option in such a way that would allow almost any design to be customized on products for purchase, thus widening the distribution channels of each design. Options include:
        • direct API link to Zazzle
        • expanding the product types of the Community Store so that other designs can also be streamed over to the Store
    • needs attribution for designer (and link to artist profile page)
    • show associated tags, each being a link (similar to CommStore).
    • perhaps a link and/or preview for "other designs by this artist".
    • page forward and back on design detail (similar to CommStore)
    • one-click option for viewer to become a "fan" of designer, or add the design to their "favorites".
    • should have a comments section at the bottom
      • sign-in required to comment? -- yes
      • comments include username and profile picture/avatar, and link to their portfolio (if they have one).
    • signed-in viewers can indicate positive feelings towards a design by clicking the "I Like This" button (we're going with this option over a 5-star rating system, which may encourage more negativity)
    • users should have the option of flagging problematic designs for review
  • design challenges
    • mainly should be a place where we post a creative brief explaining the current design challenge
    • details about rules and procedures
    • challenges may involve a "voting" element to pick the winner. So, a voting mechanism is also required.
    • a countdown of days remaining till deadline for submission (or vote). Nothing fancy, but an automated counter that says "___ days remaining" or something like that.
    • similar counter to display number of submissions / votes so far?
    • challenges will be posted one at a time.
    • should also include a list of past winners, past/featured challenges
      • viewing details of past challenges requires an additional screen
  • upload tool
    • use existing setup that was created for the Community Store
      • Input fields for upload tool: Name of design, description (optional), tags, design type (drop down menu perhaps to choose: t-shirt, persona, banner, poster, etc.
    • An account should be required before uploading.
  • materials page
    • high res PNGs of various logos to use in design, PSDs, etc.
    • would need a link to the various style guides.
    • possible area for tutorials
      • design vocabulary - define common words used in design
      • offer links to good online tutorials or,
      • host screencasts or other materials for tips and tricks in design. Something similar to "SUMO" but for designers.
      • "how'd they do that" section where artists give a brief tutorial on how they achieved certain results.
  • artist profile
    • page with details about an individual artist
      • search by name, location, and possibly their participation "level". For example you may want to see who the most popular designer is (based on how many fans they have, how many challenges they've won, or how many times they've been viewed)
    • what will the account creation process be like?
      • Input fields for account creation: Name, Username (for use on the website), Password, Email Address.
      • Email confirmation to officially set up account
      • Include a password retrieval component
      • ReCaptcha
      • Includes one-time click agreement so they don't have to go through that process each time they upload an image -- need to check with cBrady
    • Admin interface to allow users to edit and manage their portfolio/profile
      • includes changing or deleting submissions,
      • changing privacy settings so personal information is not displayed and others may not contact them, etc.
      • allow them to moderate comments on their on designs and posts.
    • should show thumbnails of their work
      • perhaps also allow sorting features on their portfolio page
    • can registered members become fans of an artist? -- yes
    • Profile creation is a separate process they may delve into once they've created an account. What info should go here?
      • Profile Picture
      • Short blurb about themselves.
      • Link to their website
      • FName, LName / Username
      • Location
        • clickable, so you can view others from the same geographic location
      • A way to contact them through email (can hide if they choose to be private)
      • View Artist's portfolio - each image is clickable to view up close, with same features like zoom/download etc that you'd find in the gallery.
      • Add them to your favorites/fans (one-click similar to Flickr)
      • Member designation: Admin? Critique Club? etc.
      • Honors / Badges: challenges they've won, etc.
      • Their activity: challenges they've entered, threads they've participated in, interviews we've conducted?, etc.
    • RSS feeds would be cool...a good way for people to stay updated on their favorite designers
  • about page
    • short summary of what this is all about
    • links to other relevant Mozilla sites, blogs, etc
  • FAQ page
    • short list of common questions/answers etc
  • back-end admin tool (again, build upon existing Community Store structure)
    • this would be rather complex - to accommodate the various data streams and layers of review/approval that goes into each component.
    • this tool will need to be fairly robust to allow us to do things like posting creative briefs for design challenges as needed
    • will also be used to edit things like the featured designer promo on the homepage
    • at some point, we'd like to delegate responsibilities out to community members. So it might be necessary to offer various levels of access to each type of designation: administrator, moderator, mozilla rep, etc.
  • other pages & content
    • legal
    • RSS feeds
    •  ?

Admin Area


Admin area will allow for:

  • Add/Update/Delete design challenges
  • Add/Update/Delete featured images
  • Add/Update/Delete blogs to pull from
  • Moderate admin challenge submissions (remove from submission list)
  • Moderate flagged image queue (approve/remove from queue, remove from public view, delete permanently)
  • Moderate flagged comment queue (approve/remove from queue, delete)
  • List all images removed from public view (images not in moderation queue).
  • View user's email address to allow for contacting them about moderated images.

Optional Ideas

  • 'Dashboard' style view
    • Show last N uploaded designs
    • Show last N comments
    • Show last N design challenge submissions
    • Flagged designs
    • Flagged comments

Open questions

  • What will be shown when an image is removed from public view?
  • What will be shown when an image is permanently deleted?
  • What will be shown under 'This is a remix of..' when the original design is removed?

Open Issues

  • URL
    • is the front-runner
  • Connection to the Community Store
    • overall goal here is to build on top of the existing Community Store code, not create something new from scratch
    • our proposal is to keep the Community Store and Creative Collective as separate sites on the front end, but for them to use the same code, etc on the back end
    • for example, if you upload a t-shirt to the Community Store, that design would also appear in the Creative Collective gallery (under the t-shirt category)
    • but, if you upload a desktop wallpaper design to the Creative Collective, it wouldn't appear in the Community Store
    • Should we restructure the Store so that it offers more product types, thus opening up the designs in the Hub to all be streamed over for customized print.
    • need to do a sanity check with WebDev on this - if this makes things too complex we'll need to re-think
  • Connection to the other design-related Mozilla initiatives
    • current thinking is that the Creative Collective will be a standalone site, but will be grouped with related sites (such as one dedicated to interaction design) under the umbrella of
  • Localization
    • Would be nice to localize the site someday, but doing so for launch isn't a priority. Should be a definite consideration during the design phase, though...we'll want to stay away from having a lot of graphic text or anything else that would make future localization more painful.
  • Legal
    • ongoing maintenance/approvals/reviewing for brand/trademark violations
    • some complex issues to sort through re: trademarks and other things like posting PSDs and allowing others to modify.
  • Approvals
    • will registered members be allowed to post designs directly to the site, or will they need to go through an approval queue first? The trick is to balance making it easy on the designers with our need to control spam, trademark violations, etc.
  • Ongoing Resources
    • Actively maintaining and fostering growth in a community-based site is a LOT of work...who will do it?
    • Can we get interns or volunteers involved on an ongoing basis?
  • Categories
    • Categorize by purpose (tshirts, backgrounds) or style (artistic, clean, etc)?
    • Can designs exist in multiple categories?
  • Tags
    • Can any user tag a design or only the author?


  • Start with gettext localization for en-US first, prepares us for future localization
  • DB will need to be localized (tags, categories, etc)
    • Kohana?
  • YUI reset + fonts
  • jQuery
  • Caching?
    • How much? When?
    • Users will need to see updates immediately
    • Removal of obscene designs/comments should happen immediately or soon on the public version of the site

Next Phase(s)


  • Design Challenges
    • Linking design-specific badges, to the design detail page
    • A more robust Badges page.
      • We already have this:
      • Would like to add some text on top of the page to describe what badges are, and also find a way to link to this page so it's more visible. Probably in the sub-nav of the "about" page.
  • 'Drag to select' thumnbnail chooser
    • This is part of having a better thumbnail display in the gallery. I'd suggest having the thumbnail chooser be placed on a smaller version of the art, so that more of the image shows through.
  • PNG/Transparency Support
    • How much time would it actually take
    • JPG vs. PNG as default
    • Transparency support is pretty important, so lets please make sure it gets added in. Doing PNG by default is fine with me
  • Categories / Special Tags (vs just having Tags)
    • Tag cloud vs. categories
    • I crossed out the Tag Cloud - because I think having special tags that are then displayed in a separate "brand theme" category box on the gallery page would be better.
    • Question: are tags given a weight depending on how many times a design was tagged with that word, to show relevance? I'm not sure if that's even necessary, but was curious to know how the tagging currently works.
    • Question: Is there a limit to how many tags a design can have? I'd imagine that the list can potentially grow pretty long.
    • Question: When I tag a design with a phrase ("one two three"), the spaces are lost, ("onetwothree"). Can we fix that?
  • Admin powers:
    • deleting tags

  • Other features we'd like to talk about having relatively soon:
    • Noise Reduction: Can we apply a retroactive fix to the design displays, for noise reduction on submitted artwork? Displaying the artist's designs in the best possible light is very important. The previous bug on this can be found, here:
    • Search Box: Can we include the ability to do standard keyword searches on the gallery page? Especially since only the popular tags are displayed. We'd like to add the search box back to the masthead, including "search by user". I already see this functionality on Craig's staging server...
    • Artists Gallery: Related to the search ability from above - can we allow members to search for users? Something that's missing right now is the ability for members to find one another and connect. Unless a member has artwork in the gallery, they're somewhat muted. Perhaps we can add to the "About" page in the sub-nav, and add a promo box that links to that page on the gallery page, too? Just thinking of ways to make the members of the community more visible, and discoverable.
    • Image Stats: In an effort to help artists gain more insight into how their work is being shared / used / etc. We'd like to add some additional stats to each design submission. Can we display the number of times a design has been downloaded and viewed?
    • License Changes: Could we allow admins and/or users the ability to change license terms? Per legal, a time-stamp tracking the date changes were made will probably be necessary.
    • Updated FAQ / Community Guidelines Page: We'll be making a few updates to the FAQ, and adding Community Guidelines (probably a separate page) to help establish some ground rules and structure around the expected MCC etiquette. This is basically new copy, so we'll be providing that to you guys asap.


  • Remixes
    • See how people start using the site first
    • Find a better way to promote special tags (products, etc.)?
    • Special tags w/ boolean
  • Profile picture upload (instead of gravatar)
  • Allow Sorting of Design Galleries by:
    • Most Recent
    • Most Popular
    • Most Tagged with 'tagname'
  • Product placement through zazzle API link
  • Extended admin abilities, including: editing featured / promo areas on homepage


  • Search
    • Lower priority because we have special tags...
  • Allow user to edit/delete their comments
  • Community "guidelines" page (?)
  • Finding a way to tie related artwork together. Similar to where you can see how one art was used (or remixed) in other designs.
  • Refinement of "Hot Designs" methodology (TBD)
  • Tags displayed as separate words if entered as such (also keep capitalization, punctuation, etc?)
  • When entering tags, "suggestions" should not be displayed as entire lines of tags (since there is only one "line" to input tags)
    • Possible fix - enter tags on separate lines, or simply give recommendations based on single tags instead of tag lines


  • Ability to edit / delete comments
  • I would like to see more of a "social network" model added to the site. As it stands now, it is difficult to connect with other artists, see who is on the site, etc. Unless an artist actually uploads a piece of work, it is very difficult for me to connect with that artist. Since we are promoting connections among artists/fans on this site, I think this is an important element. Additionally, if we want to drive interaction with the site, I think it is important to be able to see who else is a part of the MCC, discover new artists easily, etc.
    • Submitted by Jeff
  • I would also like to see an easier way to get to my own profile from any screen on the site. Right now the only way I get back is by clicking my name icon in the upper right (very small)
    • Submitted by Jeff
  • The front page should be turned into a dashboard, where all of the users most needed information would be located. Most importantly, here the user should be able to view the activity stream of all of their friends actions.
    • Submitted by Ryan