search

mozilla / addons

☂ Umbrella repository for Mozilla Addons ✨
Other
123 stars 53 forks source link

Specify an MVP for DevHub #153

Closed brampitoyo closed 7 years ago

brampitoyo commented 8 years ago

We’d like the dev hub front page to be a place where we can direct new and existing developers, and direct them towards some clear paths towards resources and documentation:

Our MDN documentation already handles most of these needs, and we simply need to point developers to the right place and ensure that it’s well organised. However, some needs are fulfilled by things that aren’t documentation, for example: blog posts, developer interviews/stories, discussion forums, etc.

While we’re talking with both MDN and Developer Marketing about where to build this dev hub, I’d like to start thinking about content and linking/syndicating strategy.

Here’s a pre-alpha strawman mockup to get us started. Everything about this mockup will change (graphic courtesy of DropBox). The only thing it’s designed to do is to help us start thinking about what kind of information we want our dev hub to have, where they will live, and how they will be linked together or syndicated:

amo-devhub

andymckay commented 8 years ago

Completely drive by comment, we should think about if we want to use the term WebExtension all the time. Or perhaps just the term add-on or just extension. To me WebExtension is the underlying technology name, but at some point in the future (don't know when) there might not be any other way of writing an extension and the term WebExtension might not be relevant.

We have a habit at Mozilla of pushing our taxonomy all the way down to everyone. We might not want to do the same this time around.

brampitoyo commented 7 years ago

…we should think about if we want to use the term WebExtension all the time. Or perhaps just the term add-on or just extension.

This is a good point. Maybe we should talk to other vendors here and reach some sort of an agreement (maybe this is too ambitious and lengthy). In terms of UX, I’m interested in adopting a common term that at least Chrome and us can agree on. After all, much of the underlying technology is standards-based and similar. Maybe it’s “extension”. Maybe it’s “add-on”. Then our documentation can be fully neutral, but we can have a section called something like “Firefox-flavoured add-on”, where we explain everything that we do a little differently. Just an idea.

brampitoyo commented 7 years ago

Content

I’ve started thinking about what sort of content we’d need our dev hub to have. It turned out that there are quite a lot, and development documentation represents one big part of it.

In my head, I divided it into a few buckets:

All the titles above are really long. They’re designed to describe what each section contains. We need short names. Here’s one set of names I’ve thought of.

brampitoyo commented 7 years ago

Design

All the content is well and good, but how does everything fit together?

I think it’s a good idea to represent this structure visually and try to imagine how many different content and coexist.

Keep in mind, everything about these mockups can and will change, and your feedback will be most helpful!

Two caveats
  1. There should of course be a register/sign in interface, a submission flow, and a management interface. But for the moment, my focus is to create a page where we can direct new and existing developers toward some clear paths.
  2. You can argue that we don’t need to divide these sections so finely if there aren’t enough content in each (for example, who will write this content? I don’t have an answer to this), and that a lot of the articles on publishing, design, etc. can all go under a big section called “Documentation”. This is a great point. It’s definitely one way to organise. But for the sake of being clear, I’m separating everything into its own space.

This is just my take on the new dev hub. What’s your vision? What content do we need? How do they all fit together? I’d like to hear from you!

(Click image to maximise)

Explore
Design
Build
Publish
Community Support
News
designakt commented 7 years ago

For the first version, let us focus on what is most important for an MVP. What are the most important user questions we need to answer?

designakt commented 7 years ago

What are relevant examples of other dev hubs? (To use as a reference)

brampitoyo commented 7 years ago

More examples:

Findings:

How will this apply to our devhub? What’s our information architecture? How should our sections be named, and where should each section lead to?

That’s my recommendations from reading other devhubs. Thoughts?

brampitoyo commented 7 years ago

Here’s a mockup that was designed while keeping the recommendations in mind.

home 1x

brampitoyo commented 7 years ago

I’ve updated the front page to reflect suggestions given at the critique two weeks ago:

What do you think?

Next on my to-do list: figure out what happens after you sign up with a new account. I’m thinking that we’d like to have some sort of an onboarding experience. Can we introduce some articles, and populate the “My submission” section with prompts/examples?

I don’t have an add-on

home - no add-on 1x

I have a Firefox add-on

home - firefox add-ons 1x

I have a Chrome extension

home - chrome add-ons 1x

brampitoyo commented 7 years ago

Here’s what might happen after you sign up for a new account.

First, we’ll ask you whether you’re new or already have a Chrome extension (maybe we can already determine this from where they’ve clicked the “Sign up” button?)

Second, we’ll show the right information to guide you onto the right path. If you’re new, we’ll show you some more getting started articles and tell you where they can be found. And if you have a Chrome extension, we’ll show you where to submit your ported add-on.

What do you think?

sign up and onboarding flow

brampitoyo commented 7 years ago

Instead of having a modal window that separates new users from the interface, I’ve decided to go with something much simpler and easier to implement: a checklist, a search box and a list of documentation articles.

When you just signed up or don’t have any add-on uploaded yet, we consider you a beginner. But at the very least, you would have read an article from the documentation, so we’re going to give you a strong incentive to either 1) Upload your first add-on, or 2) Learn more about WebExtensions if you’re not ready yet.

home - signed in - firstrun or beginner 1x

When you have uploaded at least one add-on, we assume that you at least already know how to publish, or have finished porting your add-on. So the same “Need Help?” area now contains more advanced topics like how-to, concepts, workflow and references.

However, if you have a legacy add-on (a lot of our existing users will have this), we should show an additional box that says “Hey. WebExtensions is coming. This is what you should do to prepare for it”. The content of this box is a rehash of the “Porting” section of the documentation. This is because existing Firefox add-on developers may skip our new front page and sign in immediately. Having the porting articles here is a chance to learn an information that they might have skipped.

home - signed in - advanced and legacy 1x

These mockups are also a chance for me to play around with the visual style of the new devhub. In other words, this may be how the new devhub look like.

Thoughts? Ideas?

brampitoyo commented 7 years ago

Some thoughts of things to work on:

brampitoyo commented 7 years ago

The MVP has been specced out on mozilla/addons#9836, and the mockup has been posted there, too. Any additional work will happen on that bug, so I’m closing this one (plus, this one has a pretty big scope and we’re not going to do all of it immediately).