784077 - [devhub] Remove Developers interstitial

Status: RESOLVED FIXED

(Marketplace Graveyard :: Developer Pages, defect, P2)

Description

[Fred Wenzel [:wenzel]]

The developers landing page is quite bland at the moment:
https://marketplace-dev.allizom.org/developers/building

Jen, here's the whiteboard design we came up with last week:
http://people.mozilla.com/~fwenzel/files/debhub/wb-devs-0816.jpg

Dbuc, we need from you:
- copy for these sections
- icons, one for each section. Ideally, one large size and one small size of each.

Comment 1

[Jen Fong-Adwent [:ednapiranha]]

Dbuc, large sizes should be the same as the partners landing page icons https://marketplace-dev.allizom.org/developers/partners and small ones are for the breadcrumb as discussed last week: https://marketplace-dev.allizom.org/developers/documentation/design_guidelines (get started, design, sdk, publish)

Comment 2

[Daniel Buchner [:dbuc]]

A few changes to the page:

- Make Developers and Partners into their own distinct boxes, 50% width next to each other
- Bold the Headings of those sections (plus Support)
- Change the text of the primary introduction paragraph to read: "Develop HTML5 web apps for an open marketplace" - in a few months, this can be reverted back to the much less hand-wavey version that talks about 500 million users.

Comment 3

[Fred Wenzel [:wenzel]]

^^ this probably belongs in bug 782377 instead, but I'm going to let it slide just this once ;)

Comment 4

[havi hoffman [:havi]]

See bug 782377 for proposed copy changes. 

Strongly recommend swapping out the 3 screen image in the top header to focus on a more mobile-centric graphic.

Comment 5

[Daniel Buchner [:dbuc]]

Icons and text for developer section, let's link these each to the destinations they correspond to:

Open Book icon - "App Tutorials"
Closing Tag icon - "Mozilla UI SDK"
Wrench & Screwdriver icon - "Developer Tools"

Comment 6

[Daniel Buchner [:dbuc]]

Attachment: open book icon

Comment 7

[Daniel Buchner [:dbuc]]

Attachment: brackets icon

Comment 8

[Daniel Buchner [:dbuc]]

Attachment: wrench screwdriver icon

Comment 9

[Jen Fong-Adwent [:ednapiranha]]

Dan, icons are a bit too small for the landing page and possibly the breadcrumb area (since the text is somewhat larger). Can you get some large and small versions that are bigger than the attachments?

As for the landing page text bolding and copy changes, they have been made and pending a merge.

Comment 10

[Jen Fong-Adwent [:ednapiranha]]

Dan:

In reference to bug 782377 if we have the copy changes for the Developer panel on the landing page, does that mean the icons provided above are not required? (e.g. it is a single sentence as proposed by Havi, not 3 bullet points)

Comment 11

[Jen Fong-Adwent [:ednapiranha]]

Okay I got it sorted out - talked to Fred and basically those mini icons can probably be put in later (not for this launch). What is more priority are the large images that match the size of the ones in the Business Partners landing page for the Developers landing page.

Comment 12

[Daniel Buchner [:dbuc]]

(In reply to Jen Fong-Adwent [:ednapiranha] from comment #11)
> Okay I got it sorted out - talked to Fred and basically those mini icons can
> probably be put in later (not for this launch). What is more priority are
> the large images that match the size of the ones in the Business Partners
> landing page for the Developers landing page.

I'm sorry, the mini icons are for each of the link headings under the Developers block on the /ecosystem general landing page, I have confused the two :(

Comment 13

[Jen Fong-Adwent [:ednapiranha]]

reassigning to daniel to give larger images for developers landing page.

Comment 14

[Fred Wenzel [:wenzel]]

Making this a P2 for now. We do have sections, just no icons.

Daniel: If you have larger icons in mind for this section, please provide them. If not, let us know and we'll close this out for now. Thanks!

Comment 15

[Daniel Buchner [:dbuc]]

Attachment: "Power" icon for "Gettings Started" section

Comment 16

[Fred Wenzel [:wenzel]]

attachment 655709 [details]

Comment 17

[Fred Wenzel [:wenzel]]

oh, nevermind

Comment 18

[Daniel Buchner [:dbuc]]

Attachment: blueprint icon for "Design" section

Comment 19

[Daniel Buchner [:dbuc]]

Attachment: app icon for "SDK" section

Comment 20

[Daniel Buchner [:dbuc]]

Attachment: send icon for "Publish" section

Comment 21

[Daniel Buchner [:dbuc]]

***Adding Caroline***

Hey Caroline, can you give us a 2 sentence blurb that sums up the design guide and the main benefits it provides for the Design section on this page?

Comment 22

[Daniel Buchner [:dbuc]]

Headings on these sections should link to the lander for each section. Under each section, there will be a small 1-2 sentence introduction/summary. Let's do lists under each that link directly to the secondary sections. For example:, the Getting Started section list would contain the following links: 

    HTML5
    Manifests
    Manifest FAQ
    Firefox OS
    How to Build an App

Comment 23

[Daniel Buchner [:dbuc]]

Getting Started summary text: "Learn the basics of building compelling apps using the latest technologies and advancements available in the modern web platform."

Comment 24

[Caroline Wong [:carolinew]]

dbuc: here you go. 
Also, maybe check with Havi later to make sure the tone of the following description is consistent with the other sections' descriptions. 

"The design guideline introduces a strategy and a set of suggestions to help you build an app that is attractive and easy to use. It also includes several responsive design patterns and building blocks that are ready to use."

Comment 25

[havi hoffman [:havi]]

These two descriptions have very different tones and word choices. Suggested: 

CURRENT:  "Learn the basics of building compelling apps using the latest technologies and advancements available in the modern web platform."  (advancement means something different: The process of promoting a cause or plan. The promotion of a person in rank or status.)

REVISED:"Build compelling apps with new HTML5 tools and technologies for the modern web platform." 

CURRENT: "The design guideline introduces a strategy and a set of suggestions to help you build an app that is attractive and easy to use. It also includes several responsive design patterns and building blocks that are ready to use."

REVISED: A  strategy and set of suggestions for building an app that's attractive and easy to use. Includes ready-to-use responsive design patterns and building blocks.

Comment 26

[Sean Martell]

Hey all, we're going to take another look at this page in Creative and see what we can do. We were unaware of this page and we need to be in the loop on any pages within Mozilla for art direction purposes, even if we're not the ones designing it (If we select a third party).

I'll check with John and Tara on resourcing this.

Comment 27

[Sean Martell]

Also, for the publish section I see we were going to use the Apple icon for apps. We... shouldn't do that. ever. :)

Just a heads up.

Comment 28

[Daniel Buchner [:dbuc]]

(In reply to Sean Martell from comment #27)
> Also, for the publish section I see we were going to use the Apple icon for
> apps. We... shouldn't do that. ever. :)
> 
> Just a heads up.

Sorry, I figured that being from an open source, non-attribution, free for commercial use icon set it was ok...but I digress. It slipped my mind for a second that the the evil empire had a patent or trade dress the ruler, paint brush, pencil configuration, they're just so damn innovative, sux. lol

Comment 29

[Fred Wenzel [:wenzel]]

Okay I suggest the following: We forgo icons on that page for now, and just make sure the copy is sane. Then in the next iteration of the devhub, we ensure the IA and UX are consistent, and add a good visual design as well.

Here's a (tentative) outline of these steps:
https://wiki.mozilla.org/Apps/Developers#Next_Steps

Comment 30

[Jen Fong-Adwent [:ednapiranha]]

Havi:

Is this copy okay for the SDK copy on the Developer landing page? "Look up information on the technical details of implemention using various SDKs."

Comment 31

[Fred Wenzel [:wenzel]]

At the devecoengage meeting today, we decided to remove this page altogether; it doesn't really have a useful purpose.

Jen: When clicking on "developers" on the front page, just take people straight to the first page on the getting started section. Done!

Comment 32

[Jen Fong-Adwent [:ednapiranha]]

merged in: https://github.com/mozilla/zamboni/commit/fd0a11af33386bbf0539c20124cc8e5296689254