1001208 - Get Involved page on Marketplace

Status: RESOLVED WONTFIX

(Marketplace Graveyard :: Consumer Pages, defect, P3)

Description

[Amy Tsay [:amyt]]

We'd like to create a Get Involved page on Marketplace to communicate contribution opportunities, highlight awesome contributors, publicize events (like Marketplace Day), etc.

We'll need the design and coding for the page. UX will determine where it's linked from. We like this page a lot for its clarity and simplicity: https://developer.mozilla.org/docs/MDN/Getting_started

The URL could be http://marketplace.firefox.com/contribute

Here is the content we'd like to see on the page:

- Contributor spotlight
- Bugs that are flagged as good for first-time contributors
- One and done type tasks
- Events section where we link to upcoming marketplace day, hackathons etc
- Links to documentation
- Contact info for section owners (dev, qa, localization etc)
- Feedback form

Comment 1

[Maureen Hanratty]

Hey Phil! I have a contributor who is interested in this bug. Do you have a template for a blank marketplace screen for mobile, desktop and tablet? Something that would work for this "Get Involved" page but also the Nominate page (https://marketplace-dev.allizom.org/nominate), an About page, etc? Thanks!

Comment 2

[Philip [:pwalm]]

Attachment: marketplace-background-desktop.jpg

Desktop background.

Comment 3

[Philip [:pwalm]]

Attachment: marketplace-background-tablet.jpg

Tablet background.

Comment 4

[Philip [:pwalm]]

Attachment: marketplace-background-mobile.jpg

Mobile background.

Comment 5

[Philip [:pwalm]]

And here's a link to our style guide!
https://dl.dropboxusercontent.com/u/545688/Marketplace_Styleguide_140512.pdf

Comment 6

[Salman Rahman Desh]

I have some questions to make clear. 
*As Amy said "We'd like to create a Get Involved page on Marketplace to communicate contribution opportunities"
So my question is will this site will provide the contributors to built their profile with like quantity of apps he/she has submitted/published, quantity of his/her featured apps etc contents or one will just log in via persona? And how this communication about contribution opportunities will be? Will it be like posting status or there will be a chat bar or the opportunities will be posted in a specific dashboard daily/weekly? 

*I'm a little bit confused about this line:
- Bugs that are flagged as good for first-time contributors.

In here i couldn't figure out about which bugs are we talking about? I mean if I'm a first-time contributor and submitted an app then if there are some bugs will they be flagged or all bugs of marketplace? 

Thank you. Regards.

Comment 7

[Amy Tsay [:amyt]]

Hi Salman, thanks for working on this! I'm thinking the page would be informational; a place where people can go to see what contribution opportunities are available. We would highlight awesome contributors by having a section where we post their photo and what they've accomplished, and have a new person each month or so. The idea is to make it friendly to people of all skill levels. The MDN page above is a good example.

Currently we have a wiki page that lists contribution opportunities: https://wiki.mozilla.org/Marketplace/Contributing/Apps and it works, but I'm thinking a Marketplace-branded page with a larger variety of content and a better flow would be more enticing.

Bugs that are flagged for first-time contributors would be something like: https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&remaction=run&namedcmd=Marketplace%20goodfirstbug&sharer_id=453984&list_id=10086117. This is a link to UX bugs for first-timers; we can also link to dev bugs for first-timers, and other teams as well.

Comment 8

[Salman Rahman Desh]

Attachment: UX draft_marketplace_contributor.jpg

Guys i did a try. Here it is in JPG format. I also have PSD format for further purpose. Give your feedback, please. Thank you. Regards.

Comment 9

[Bram Pitoyo [:bram]]

Attachment: marketplace contributor - sketch

Hi Salman,

Attached is a really rough mockup of the page structure for your consideration. Nothing in it is final, but it does help explain some of the points that I’m about to write.

* I love the way you handle contributor spotlight. In addition to name and location, you might consider adding a list of contribution to this section. For instance, what area is this contributor helping in? What features is this contributor responsible for? How many apps have this contributor reviewed? Etc. I think app name and description don’t need to be there.
* Try incorporating some content from the wiki that Amy had mentioned on comment 7 (https://wiki.mozilla.org/Marketplace/Contributing/Apps) into the page
* Try giving more highlight to the easy ways that most new contributors will be able to contribute. As an example, I call this section “Everybody can contribute” and put it up above.
* More ways to contribute technically (Review app submissions, Test Marketplace, Write documentations for app developers, etc.) should be displayed, too. I think your graphic treatment on the “One and Done” section is fitting for it. In addition to the link itself, consider adding the the contact info for each section owner: the person responsible for review, testing, documentation, etc. This is so you don’t need a separate button for “Contact Info”

This is a good first step, and I think both Maureen and Phil could offer you good additional feedback.

Comment 10

[Salman Rahman Desh]

Hi Bram,
First of all sorry for the mistakes and thanks for your sketch. It will really help me to edit the design perfectly. And yes, this time I'll follow the points which you have pointed. Thank you again for your feedback. Regards.

Comment 11

[Bram Pitoyo [:bram]]

I recommend waiting for this bug’s mentor to give her feedback before proceeding.

If you are itching to design something right away, that’s cool, too. If that’s the case, I would encourage drawing lots of rough mockups on paper to find a structure that you think will fit the information, and uploading them here. What if a particular block of information is moved up or down, or displayed side by side? What if you make a block more or less important than the other?

Following each rough idea that you have, attach them to this bug along with your thinking. For example, maybe you could say, “in this layout arrangement, I emphasize [x] because it will solve the problem of [y]”. So then we’ll know why you choose a particular layout.

When we’ve identified a good structure for the page, then the Photoshop visual design that you’ve come up with can be tweaked to fit it.

Comment 12

[Amy Tsay [:amyt]]

This looks awesome! I also love the way you handled the contributor section. I agree with Bram's feedback on the page structure. My one concern is page maintenance; will some of the content be pulled in automatically? (For example, the bug list). Will we have an editorial tool to update the content, or will we file bugs?

Comment 13

[Philip [:pwalm]]

Salman:

Great first pass at this page! I agree with Amy and Bram, the contributor section is spot on. Most of my concerns are addressed in the comments made above here, but one thing I'd avoid doing is hiding content. Expanding on Bram's comment: Instead of the "One and Done" section being a carousel and only showing the first three areas we need help in, redesign it to show all of the QA/contribution options. I have a feeling the click-through rate of that little arrow on the right will be low, and we might miss out on some potential contributors who don't see their area of expertise/interest displayed clearly.

Looking forward to your future iterations! :D

Comment 14

[Maureen Hanratty]

Thanks for your work on this! Before we get too much further with the design, let's clarify and get more specific about the content of the page. Below is a proposed outline based on the Contributing wiki page (https://wiki.mozilla.org/Marketplace/Contributing/Apps) and Bram's sketch (https://bug1001208.bugzilla.mozilla.org/attachment.cgi?id=8424532). Like Bram's sketch and the wiki page let's have tasks anyone can do at the top and ones that require more specialized knowledge (coding, fixing bugs) towards the bottom. We don't want to scare anyone off if they don't know how to code!

PROPOSED PAGE OUTLINE

Get Involved (Page Title)
     • some intro text about the Marketplace and how to get involved   

Contributor spotlight section

Help other find great apps
     • Nominate an app to be featured (https://marketplace.firefox.com/nominate)
     • Rate your favorite apps
     • Sign up for the Marketplace newsletter

Know how to code? Fluent in multiple languages?
     • Become a reviewer (https://wiki.mozilla.org/Marketplace/Reviewers/Apps)
     • Localize apps into your language (https://www.transifex.com/organization/mozilla-tech-evangelism/)
     • Create an app! (https://developer.mozilla.org/en-US/Apps)

Fix a bug!
     • bug list (in order to fix the bugs we will need give people information the links listed below)
            • Find out how to start contributing code to the Marketplace (https://marketplace.readthedocs.org/en/latest/)
            • Find out how to become a design contributor on the Marketplace (https://wiki.mozilla.org/Marketplace/Marketplace_UX) 

Events

Comment 15

[Salman Rahman Desh]

Thanks everyone for your feedback. I'm working on it. I will inform you guys if I need any help. Thanks again. Regards.

Comment 17

[Salman Rahman Desh]

Attachment: image0-001.jpg

here is a rough mockup. I'm a little bit confused about "link to documentation", we can only display the categories in where all the links will be given respectively. or if we display all the links here then won't it be odd?

Comment 18

[Maureen Hanratty]

Mockup looks good! Could you do a sketch of what you think it would look like on mobile? 

Amy: could you clarify what the links to documentation are and where they lead to?

Comment 19

[Amy Tsay [:amyt]]

We probably don't need a Documentation section, just link to documentation where appropriate. For example, link to https://developer.mozilla.org/Apps/Quickstart/Build/Intro_to_open_web_apps in the Create an App section, and to https://marketplace.readthedocs.org/en/latest/ in the Contribute Code bullet point.

Comment 20

[Salman Rahman Desh]

Maureen: No, not yet. It's will be easy when desktop design is ready. I'm also feeling curious for mobile!

Amy: Got your point and yes, it's a good idea.

Comment 21

[Salman Rahman Desh]

I'm very sorry guys for my delay. I got a little bit net problem and didn't able to enter into bugzilla. Here is the updated attachment. Sorry again. Thank you.

Comment 22

[Salman Rahman Desh]

Attachment: UXmarketplace-background-desktop.jpg

Comment 23

[Maureen Hanratty]

Hi Salman! Sorry it took me some time to get back to you--I was traveling this week. I'd like to change the design of the contributor profiles so that they look different than our user collections. I am going to gather information on three contributors to the Marketplace so you can design the profiles using real contributor data. I will post that information to the bug next week. 

Some other feedback:
• Is it the intention that every block will be clickable and lead to another page with more information? Or do some lead to another page and others do not?
• Related to above, for "Rate your favorite apps" where would it take the user?
• For "Sign up for the Marketplace newsletter" instead of taking the user to a separate page it would be great if we could save the user a click but having the sign up form (text entry for email address and "sign up" button) on this page. 
• I liked your sketch and original mockup where you had the bug list visible. In addition to giving contributors direct access to bugs it also visually broke up the page in an interesting way. 
• Related to above, I'd like to see a little more variety in the layout of the page. Currently every row is made of three colored blocks. In addition to the bug list is there other things we can do to break up the page?

Comment 24

[Salman Rahman Desh]

Answers of the following questions are given below:

1. Yes, every block will be click-able and will take contributors to related page like by clicking "Nominating apps" contributors will have a page where all the apps of marketplace are given to nominate.  
2. Same case will go for "Rate your favorite apps", in where contributors will be able to rate their favorite apps from marketplace.
3. You are right. we can make persona available here, so when contributor will click "Sign up for the Marketplace Newsletter" there will be a new tab for persona sign-up.
4. I designed this way to reduce the confusion problem. Contributor whom already saw the buglist will be a bit confused if we show him/her a new UI of buglist here. So it may be much easier to understand if we make it also click-able and which will take the contributor to our regular buglist page.

5. I will make a new layout in a few days and will post in soon. 

Thank you. regards.

Comment 25

[Maureen Hanratty]

Hi Salman! Sorry for the delay. As promised here are some real contributors that you can use to design the contributor profile. I included the name of the contributor, their location, their contribution. To learn more about the contributor a user can click and go to their Mozillians profile. Hope that helps!

Jaipradeesh Janarthanan
India
Jai is a super star Firefox Marketplace app reviewer. Has reviewed over 450 apps! 
https://mozillians.org/en-US/u/jaipradeesh/

Daniele Scasciafratte
Italy
Daniele helped recruit localizers at our first Marketplace Day. He also developed two Firefox apps--Ringtone Picker and Mte90.net.
https://mozillians.org/en-US/u/Mte90/

Hanna de Luna
Barcelona, Spain
Hanna is the localization coordinator for Apps & Hacks, Mozilla's official newsletter for developers.
https://mozillians.org/en-US/u/Hadeluna/

Comment 26

[Salman Rahman Desh]

Attachment: marketplace-background-desktop-revise.jpg

Sorry was we all were busy with Firefox OS launch in Bangladesh. I want to work with this bug again and found it's still open. There is the revise UI with the suggested contributor profiles. Please inform if there any change. Thank you. Regards.

Comment 27

[Amy Tsay [:amyt]]

Per the community call this morning, perhaps we could at a minimum add a link to the footer that goes to https://wiki.mozilla.org/Marketplace/Contributing/Apps. It should say "Contribute to Marketplace" or "Contribute to this project", or something else that fits better with existing naming conventions.

Once we have this on the roadmap it would be great to circle back on the design.

Comment 28

[Bram Pitoyo [:bram]]

Linking to the Wiki page is a good solution for now. However, when we do implement this page, it would be good to focus on calling out activities that suits all levels of technical abilities.

Somewhere on this page, let’s do a call to action for technical contributors. This call to action will link to either the wiki page (https://wiki.mozilla.org/Marketplace/Contributing/Apps) or the Fireplace docs (http://marketplace.readthedocs.org/en/latest/topics/contributing.html).

By separating the content this way, the wiki/docs page could list not only every possible technical contribution avenue, but also flesh out how each activity will work in detail.

For now, let’s first link to the wiki from the footer. It’s pretty simple to do.

Comment 29

[Salman Rahman Desh]

Yeah, appreciate to link the wiki page idea. Let's first get some responses from the contributors like doing a survey by putting the wiki link named CONTRIBUTE TO MARKETPLACE on the footer for a certain time and after observing their feedback and comments, we will re-focus on "Get involved page".

Comment 30

[Amy Tsay [:amyt]]

Since this project has been simplified to adding a link in the footer to https://wiki.mozilla.org/Marketplace/Contributing/Apps, can we bump up the priority and get it done soon?

Let's make the link say "Get Involved", and put it between "Dev Hub" and "Feedback"?

Comment 31

[Salman Rahman Desh]

Yeah, that would be great. +1

Comment 32

[Christopher Van Wiemeersch [:cvan]]

Per comment 30, here are two pull requests:

https://github.com/mozilla/fireplace/pull/796 (adds the "Get Involved" links)
https://github.com/mozilla/fireplace/pull/795 (dependency, slightly related; cleans things up a bit)

Comment 33

[Kevin Ngo [:ngoke]]

First time seeing this bug, but earlier today, I actually proposed this same thing (a dedicated contribute page) for a sprint during the upcoming work week. We'll get in the simplified version for now though.

Comment 34

[Amy Tsay [:amyt]]

Thank you all! Please loop me in for the sprint in Portland!

Comment 35

[Christopher Van Wiemeersch [:cvan]]

Amy, re: comment 20, merged:

- Cleaned up buttons in footer on "My Account" page at mobile width:
https://github.com/mozilla/fireplace/pull/795
https://github.com/mozilla/fireplace/commit/77ad0d9f

- Added "Get Involved" link to footer at desktop width and footer on "My Account" page at mobile width:
https://github.com/mozilla/fireplace/pull/796
https://github.com/mozilla/fireplace/commit/bb13704

Both commits will go out Tuesday.

Comment 36

[Christopher Van Wiemeersch [:cvan]]

Keeping this bug open for the build the full "Get Involved" page later.

Comment 37

[David Bialer [:dbialer]]

I'm putting this in our tracker.  Please sprint on this in Portland!

Comment 38

[Amy Tsay [:amyt]]

We nailed down content in a Mozlandia sprint! https://etherpad.mozilla.org/get-involved-you-people

Comment 39

[Kevin Ngo [:ngoke]]

Where can I find the icons and image assets used in the mocks?

Comment 40

[Salman Rahman Desh]

@Kevin Ngo, I have the icons and images that I made to use in those mocks. I made those on photoshop, so I can provide you the icons/images in PNG/JPG/EPS.

Comment 41

[Amy Tsay [:amyt]]

Hi Salman, would you mind attaching the artwork to this bug? Thanks!

Comment 42

[Salman Rahman Desh]

Attachment: Get_involved_MP_icons.zip

@Amy, Here is the icons of those mock-up. All the icons are saved in PNG.

Comment 43

[David Bialer [:dbialer]]

Added Liz Hunt as the mentor on this bug.  She heads up user interaction and can provide some excellent guidance.

Comment 44

[Elizabeth Hunt[:ezoehunt]]

Attachment: New UX direction

Hi Salman,

The team regrouped in December and came up with a final list of content they want. So we're ready to move forward again!

New information is below. If you're still interested in completing this bug, please let us know. Thanks.

I've sketched up the team's thinking in the attached wireframe. We'd like to divide the page into 2 columns with main content on the left and secondary content in the right column.

We're launching a new visual design direction this month, so Phil will give you some direction on the design and provide you with the latest assets to use.

Comment 45

[Philip [:pwalm]]

Hello Salman! Phil here, visual designer on the Marketplace UX team. Here are a few things to keep in mind, due to some changes in our design language:

- right angles on corner radii, no rounded corners.
- The top contributor blocks you made are great, but the reflect an older style which we never actually implemented. Take a look at our feed block designs on the Home page for inspiration.
- All icons, buttons, and controls need to be matched to what we currently use on our site (I can provide you with those at a later date based on what you need).
- Colour palette and type guideline needs to be followed:
   - Colour: http://marketplaceux.github.io/marketplace-style-guides/palette.html (ignore feed palette)
   - Type: http://marketplaceux.github.io/marketplace-style-guides/type.html

If you have any questions, feel free to reach out to me. :)

Thanks for your help!

Comment 46

[Salman Rahman Desh]

Hi All!
Extremely sorry for being late as my internet has been in problem for the last 2-3 days as there was some technical problem in submarine broad band cable of south asia. 

@Elizabeth: I already got your UX mock up and redesigning my one as per your instruction.
@Philip: I got your messages and will do the redesigning under these terms and conditions. The links you gave will be really helpful to pick the correct colors and fonts.

Please suggest or inform me if there is any other query. Thank you. Regards.

Comment 47

[Ram Dayal Vaishnav [:ram]]

Hi Amy,

I am willing to work on this if Salman is ok with this.

Thanks,
Ram

Comment 48

[Kevin Ngo [:ngoke]]

Hey Ram,

You can totally work on this. I have been busy with other projects so I had to put this off for a bit. So we have a couple options on how to start this:

1. Set this project up as a "Marketplace Frontend" project. Meaning we use github.com/mozilla/marketplace-template as a bootstrap template and develop upon that. The drawback is this is it may be overkill for a static page, but we get a ton of the benefits of using our frontend framework.
2. Set this project up as Jekyll Site. The advantage of this is that it suits the need, a static site that can easily have its content changed by anyone. Disadvantage is that it would be too different from all of our other projects. Then maybe iframe it into Fireplace.

I think I'd go with option #1. Keep in mind we want the community managers to be able to change content easily, so we want the project to be able to pull data from flat files from its media directory (possibly as YAML). I'm ngoke on IRC, let me know if you want to get started.

Comment 49

[Wil Clouser [:clouserw]]

Ram - are you still working on bug 1130652?

Comment 50

[Salman Rahman Desh]

@Ram, Hey Ram, Its absolutely fine. Please go ahead. 
@Everyone, I'm really sort to all that cause of study and miscellaneous projects I making this bug late. Still following this bug. Thank you. Regards.

Comment 51

[Philip [:pwalm]]

Thanks for following up, Salman! :D

Comment 52

[Ram Dayal Vaishnav [:ram]]

Yes @Wil, I am taking care of that as well (already made local changes, will submit PR soon).

@Ngo, I should be able to be ok with option #1. Will let you know if I have any questions.

@salman, Thanks.

- Ram

Comment 53

[Ram Dayal Vaishnav [:ram]]

Hey Kevin,

I will get in touch with you on irc to discuss few doubts I have and then will start working on this.

Thanks,
Ram

Comment 54

[Ram Dayal Vaishnav [:ram]]

Can someone please put my name in assignee list ?

Comment 55

[Ram Dayal Vaishnav [:ram]]

Thanks Wil, I am working on code changes now.

Comment 56

[Andreas Wagner [:TheOne] [use NI]]

Ram, there hasn't been any activity on this bug for a while. Are you still working on it?

Comment 57

[Ram Dayal Vaishnav [:ram]]

Sorry for being unable to work on this, but I am interested in working on this. I will analyse this again this weekend and either start working on this right away or keep it open for other to pick if I wont be able to get started on this for any reason.

Thanks,
Ram

Comment 58

[Andreas Wagner [:TheOne] [use NI]]

In the triage we decided this is too big for a real good first bug. Feel free to either keep working on it or reset the assignee.

Comment 59

[Ram Dayal Vaishnav [:ram]]

Marking this as good second bug then.

Comment 60

[Andreas Wagner [:TheOne] [use NI]]

I don't think this is a good second bug either. Of course this does not mean you cannot work on it :)

Comment 61

[Ram Dayal Vaishnav [:ram]]

FTR - Trishul is also working on this along with me.

Comment 62

[Atique Ahmed Ziad [:atiqueahmedziad]]

Hi,

I was thinking if we had the design ready? 

Ram, any update on this one? 

Waiting to see this awesome page :)

Comment 63

[Ram Dayal Vaishnav [:ram]]

Hi Atique,

The final design in given in attachment of comment#44, we could not move further lately. If you could also help myself and Trishul we could take if forward faster :), by the way we are currently not actively working on it so its fine if anyone want to pick this.

Thanks,
Ram

Comment 64

[Atique Ahmed Ziad [:atiqueahmedziad]]

Hi
 
Thanks for the info. :) I think yet this bug needs to work on design first. Then we can probably work on code. comment 44 & comment 45 gives a good direction to make the final design ready. We need ui/ux design for Desktop, tablet & mobile. Design should include icons, colors etc. Hoping to get a designer contributor to work on this firstly :)

Comment 65

[Salman Rahman Desh]

Hi All,

First of all I want to apologize for leaving this bug for some unavoidable circumstances as well as for my study. In the mean time I was also following this bug as I'm getting notifications frequently. I would love to finish this bug and I really would love to work on it. 

@Maureen, Amy, Philip, Bram: Need your permission guys! :)

Thank you.

Regards,
Salman

Comment 66

[Amy Tsay [:amyt]]

Sakina just informed me that there might be changes coming out of Mozlando. So I would suggest shelving this project until we have more clarity on those changes. Thanks everyone for staying interested in this project!