808158 - Update DevHub front page to up-level partnership and simplify presentation

Status: RESOLVED FIXED

(Marketplace Graveyard :: Developer Pages, defect)

Description

[Daniel Buchner [:dbuc]]

Attachment: Updated front page

Simplify all the things! Boom! Winning!

Comment 1

[Fred Wenzel [:wenzel]]

Nice mockup. CCing Bram and Diana so they can take a look.

Questions!

- Bram: Will you take this under consideration as Diana and you are producing the next iteration of the business section?
- Where will the "Learn more" point to?
- What about "more from developers"? Not sure what that CTA means, I assume it leads to the business section but I think that text is a little nondescript. Hard to tell where I'm going when I click it.
- I support reducing the amount of videos on the front page to 1. Which video should it be for now vs. in the future, and is the collage here just an example (I assume so), what should the collage contain instead?
- is the dashed line above Partnerships intentional, or a mockup artifact?
- Does "Partnerships" make sense right there or should that be a more generic CTA taking you to the business section?

Comment 2

[Bram Pitoyo [:bram]]

Attachment: Updated front page - 02

(In reply to Fred Wenzel [:wenzel] from comment #1)

Hi Fred. Yes, I will take this design under consideration. I think I can help answer some of your questions.


> - Where will the "Learn more" point to?

I think that this link will point to the Partnership page; but in order for this page to be findable, the entry point should be both obvious and persuasive.

The link that I had on attachment 676047 [details] reads “See all the reasons to develop for Firefox Marketplace”.

This one should also be phrased in an actionable way. Think something that’s along the lines of “Web companies, OEM and carriers: why you need Firefox Marketplace, and how to partner with us”. Then make the whole sentence a link.

Alternatively, we can make the link shorter, but enclose it in a button. The point here is to make the link more obvious.


> - What about "more from developers"?

I assumed that this link will lead to the same partnership page. Just needs to be rephrased so the CTA is more direct.


> - I support reducing the amount of videos on the front page to 1. Which
> video should it be for now vs. in the future, and is the collage here just
> an example (I assume so), what should the collage contain instead?

I remember talking at the meeting about temporarily replacing the video with the best and most direct video that we have, before the collage video is ready in the future.

This temporary video will not contain a logo collage in it. So we can give the partner logos their own area. You see the same pattern in use at many other sites, and the text usually goes something like:

* 37signals: “The world’s most popular brands depend on our products every day:”
* ExpressionEngine: “You can tell a lot about a product by the company it keeps”
* Jive Software: “Browse our library of on-demand customer webcasts to hear their stories and learn from their experiences”


> - Does "Partnerships" make sense right there or should that be a more
> generic CTA taking you to the business section?

I am not sure about the answer to this question. It’s something that Diana and I will need to figure out. My first mockup as of a fairly extensive and general purpose business section, but it sounds like we’re going to do a page that’s very focused on Partnership.

Comment 3

[Bram Pitoyo [:bram]]

Attachment: Updated front page - 03

Per my conversation with Diana earlier today, the front page had been revised with these updates:

1. The more partners we showcase, the better, so user will be able to navigate the partner list by using the arrows
1a. The partner icons should ideally link to their app page on Marketplace
1b. Alternatively, they could either link to the partner’s website, or to our video showcase of that partner

2. A direct link/button to submit an app is available directly on the page. It’s positioned in line with the link to the partnership page, and immediately below the “Publish” area.
2a. This link is added to address the use cases: “user already has an app and just wants to submit it” or “user wants to try the app submission process before reading the documentation”
2b. I’m aware that we already have a “Submit an app” link on the top-right side of the screen. It should still be there

3. The wording of the link to access the partnership page has been tweaked to better reflect our target audience. It now reads “Content providers, brands, OEMs and carriers”

Comment 4

[Jen Fong-Adwent [:ednapiranha]]

Hey Bram, assigning to you for now  until everything is all good! Assign back to me when you are ready for implementation.

Comment 5

[Daniel Buchner [:dbuc]]

Attachment: Finalized design for Developer Hub front page

Comment 6

[Daniel Buchner [:dbuc]]

Edna, I've completed the integration of the suggestions from Bram/Diana, attached is a final cut of the front page ready for implementation. Let me know if you have any questions as you go, thank you!

Comment 7

[Jen Fong-Adwent [:ednapiranha]]

Hey Daniel, I think the Partnership logos with a carousel will not be intuitive for a user to know 'if I click on this carousel and then click on this logo, I will land on a page'.

It would be better for us to just display all available logos on the landing page sans carousel, and then clicking on any one of them takes the user to the respective page.

I think it's fine if it breaks to multiple lines, just as long as they are floating right of the partnership logo on the left - even if they are imbalanced and there aren't enough logos to make an even grid.

Comment 8

[Fred Wenzel [:wenzel]]

I share Jen's concerns. Dan or Bram, can you comment?

Comment 9

[Diana Livits]

In the interest of saving space I like the carousel. We will have many more partners in the coming months that I'm afraid they may start to take up the majority of the page.

Would it make sense to include a small instruction that says "click on a logo to learn more about each partner" ?  

I'm happy to start off displaying all available logos without the carousel, as long as we can revisit and potentially find a new solution (carousel or not) once we have too many logos to manage in an esthetically pleasing way.

Comment 10

[Jen Fong-Adwent [:ednapiranha]]

Nah, I disagree. I think adding instructions to tell users to click because we know it's not intuitive will make it more complicated and confusing.

Let's just display without the carousel. If there are lots of logos we'll deal with it then. Even if we had 20-30 logos, it might make sense to just put the most recent up and click a link that says 'view all' to show the rest in the same page. Carousels are just not good for quick scanning of data.

Comment 11

[Maria Sandberg [:mushi]]

Bram - can you weigh in from a UX standpoint? You can read both Jen and Diana's point of views above. Let's create a solution that is optimized for the user, Bram is the design owner.

Comment 12

[tofumatt [:tofumatt]]

Isn't it cool for lots of partners to be showcased? Like, the carousel makes it looks like there aren't as many partners than if there's a bunch of visible ones on the page anyway.

But when there aren't a lot of partners at the start it doesn't make sense to build it for something that doesn't exist yet.

When Apple showcases apps and "partners" they throw tonnes of stuff on there. It looks like a much more healthy ecosystem with lots of devs if you feel like there's so many we can't even showcase them all and have to cram them in, no?

Comment 13

[Bram Pitoyo [:bram]]

I actually like tofumatt’s idea of showcasing as many developers as we can. I think that showcasing developers, in some ways, take precedence over showcasing Marketplace. Because developers demonstrate that we have a successful ecosystem, more so than a showcase video.

I recognize the spacing issue, and would like to propose that we show maybe three full lines of icons at first. Each line will contain between 10–15 icons. But at the end of the third line, the icons would fade to transparent. Below this transparent area, there’s a “show more” link. When user clicks on “Show more”, the three line expands to six full lines of icons. When maximized, we expect to show anywhere between 60–90 icons. That’s a lot to comprehend. So after that, we can put the left and right arrow that will carousel to the next page of icons.

A good alternative is to put the icon under tabs. Marketplace has nine app categories. Can we use these nine as tabs, and then showcase apps under each tab? Apple doesn’t have the best example here, but see how they organize extensions under tabs: https://extensions.apple.com/

While it’s great to showcase as many apps as we can, it’s also important to highlight the good ones (ie. sometimes, we have to choose to not showcase the bad ones). The big names are good. The ones with good app design are good. The ones that have a video are good.

If you think about it, every partner will have a combination of these statuses:
* Have a website (everyone)
* Have a video showcase (maybe 16 partners)
* Have an app ready on the marketplace (not sure how many. Can we confirm?)

So the default behavior should be:
* If partner doesn’t have an app or a video, link to their website
* App listing page takes priority over video. So, if a partner has both a video and an app, we will link to the app listing page
* Alternatively, we can link to both

Comment 14

[Bram Pitoyo [:bram]]

Attachment: Updated front page - 04

This is a mockup of the idea I outlined in comment 12.

This mockup shows only two rows of icons that expand to three. When we implement, we want to aim for somewhere along the lines of three rows that expand to 5–6.

Showing more than around 50 icons would overwhelm user with too much colors, elements and choices. This is why the left and right arrows would only appear when the row is expanded.

Comment 15

[Jen Fong-Adwent [:ednapiranha]]

Hey Bram, looks good - although how many icons are we dealing with initially (e.g. for the next week or two)? If there aren't that many, I say we just display them as is for now and worry about it when we start adding a lot more.

If there are going to be that many icons in the future, does it make sense to just consider putting all of them in their own page and not displaying them all on the landing page? Images even if cached can eat up loading time and the longer the landing page takes to load, the more visitors will not be happy.

Could we consider just showing the latest or top 10 and then you can click on the entire section to go to a new page that has all the logos with their respective links?

My concern is that if we put too many assets on the landing page, we are adding more complexity and slowing http requests and the value add of displaying all logos immediately (even if they are hidden until you activate a carousel or view more) is not very clear to me.

Comment 16

[Jen Fong-Adwent [:ednapiranha]]

Daniel, do you know where the 'More developer stories' button should be linking to? Is that page already somewhere on MDN?

Also, send me the assets such as the icons for the triptych.

Comment 17

[Fred Wenzel [:wenzel]]

Also, obvious question: Which partners/icons exactly are we looking at? Can anyone provide them?

Comment 18

[Bram Pitoyo [:bram]]

Heads up: Jen had wrote me about the potential performance problem of having a carousel + arrow navigation + many icons on the page.

She suggested that we showcase some partners on one banner, and when user clicks on this banner, we’ll direct to a separate page that showcases our partners.

I think that this is a great idea.

First of all, a lot of web services present a select list of clients on the main page, and when you click this, you’re led to the “customer success stories” or “customer showcase” page. Second, it makes the page scalable, so when our list of partners grow from tens to hundreds, we can simply add sections to this page.

Most sites have it towards the bottom of the page:
* http://37signals.com
* http://www.salesforce.com
* http://www.getharvest.com

The problem, though, with presenting the list of partners in a separate page is, we have 2 pages under the “Business” section: one is about the partnership, and the other showcases all the partners we have.

Doing this makes sense, but suddenly the information architecture can be pretty tricky to figure out.

For example:
* Should the two pages link to each other (yes, but how and where?)
* What relationship should the two pages have? Parent and child? Equal?
* How would it work with the tab? Let’s assume that we have a tab called “business”. When you click on this tab, what page will it open?

I want to think about this one carefully, because we should get it right the first time and not revise the IA later.

But I do feel that having a separate page that contains a list of partners make sense, and it will allow us give each partner video its own space. We created many of these one-minute showcase, and we should show it when we can.

Comment 19

[Daniel Buchner [:dbuc]]

We need to close the book on this, so I'm going to make a few calls here:

1. We'll go with a single image that shows off a few key partner logos/icons, this will help maintain page perf

2. The click should go to the business partner page, and we can address the partnership use-case for that target audience there. I do not feel a need for a separate page full of logos and icons - we have that, it's called the Marketplace, and it contains the logos of *all* our partners for anyone to explore.

Comment 20

[Daniel Buchner [:dbuc]]

Attachment: Updated mock to address icon number issues

Comment 21

[Daniel Buchner [:dbuc]]

Diana, can you get some logos/icons to Jen for use in the partner banner in this page?

Comment 22

[Diana Livits]

Jen, are you able to use the icons/logos directly from the Marketplace, or do you need specific files?

Comment 23

[Jen Fong-Adwent [:ednapiranha]]

Diana: It will be better to have specific files as I need to cut them and resize accordingly. Unless you can show me where they can be downloaded on the current site, it'll be easier to get them in one go (e.g. in a zip file or whatever is most convenient).

Daniel: Do you have icons for the triptych and a link for the 'More Developer Stories' button or should this be left out for this implementation for now?

Comment 24

[Daniel Buchner [:dbuc]]

Attachment: content section icons (sprite)

Comment 25

[Jen Fong-Adwent [:ednapiranha]]

Diana: Just waiting on your partner logos to put on the landing page and the I can start working on this bug - thanks!

Comment 26

[Jen Fong-Adwent [:ednapiranha]]

Daniel - a couple of questions:

1. the triptych icons are inconsistent. some are blurry and some are sharper - are they not from the same icon pack?

2. where should the 'more developer stories' link go to?

3. isn't the marketplace logo supposed to be the new purple one? (the one for 'submit an app' beside the partner logos)

Comment 27

[Daniel Buchner [:dbuc]]

Attachment: Sharpened upload cloud icon

Comment 28

[Daniel Buchner [:dbuc]]

(In reply to Jen Fong-Adwent [:ednapiranha] from comment #26)
> Daniel - a couple of questions:
> 
> 1. the triptych icons are inconsistent. some are blurry and some are sharper
> - are they not from the same icon pack?

I've changed the cloud icon, it was a bit blurry, I'm fine with how close they are now.

> 2. where should the 'more developer stories' link go to?

Let's erase that for now

> 3. isn't the marketplace logo supposed to be the new purple one? (the one
> for 'submit an app' beside the partner logos)

I'm publishing an update that removes the partner logo/text and all references to it. The logo beside the "Submit an App" link is up for discussion, I can bring back a purple icon of some kind if that's what we want.

Comment 29

[Daniel Buchner [:dbuc]]

Attachment: front page implementation cut

I've removed all reference to the business page and tweaked the messaging for the social proof center section. Also removed the "More from developers" purple button.

Comment 30

[Jen Fong-Adwent [:ednapiranha]]

Daniel: this is the reference bug about the new Marketplace logo - unfortunately for the one you have in the mock, we'll need a bigger version from creative vs. the one that is default on the Marketplace landing page https://bugzilla.mozilla.org/show_bug.cgi?id=800521

Comment 31

[Jen Fong-Adwent [:ednapiranha]]

Daniel: turns out that it's not a big deal for now - so I'll just leave the logo as the orange one for the time being. (says cvan)

Comment 32

[Matt Basta [:basta]]

Is the devhub currently considered to be an "Aurora" release?

Comment 33

[Daniel Buchner [:dbuc]]

(In reply to Matt Basta [:basta] from comment #32)
> Is the devhub currently considered to be an "Aurora" release?

I would argue that it is not under that umbrella because all the content and tools found within are unbound from any Firefox release and work everywhere.

Comment 34

[Fred Wenzel [:wenzel]]

If we need to have a broader discussion about which marketplace logo we use, can we move this out of this bug? That'll raise the chance of this getting fixed.

Dan: Did you mean to eliminate the business email / CTA altogether from the front page? I think we should keep that until we have the business section, which granted, will be soon.

Comment 35

[Jen Fong-Adwent [:ednapiranha]]

FINALLY MERGED! :D https://github.com/mozilla/zamboni/commit/ab687f829dfe9bf49d04877b9752735daae9f4b8

a few notes:
- next week's iteration, we should verify that the logos I chose are legit. And if they aren't I need official replacements (preferably square shaped)
- the copy in the partner banner is just the old copy for now until we have the business partners page ready.