Plugin library blogpost #4422
Plugin library blogpost #4422
Conversation
Too many images? @fk @KyleAMathews @calcsam @jlengstorf
ghost
assigned 
|
Deploy preview for using-drupal ready! Built with commit a69b6d1 |
|
Deploy preview for gatsbygram ready! Built with commit a69b6d1 |
| Based on the empathy map above, we identified five “jobs” that Gatsby users want done regarding plugins and packages: | ||
| * Make it easy to search for and find the best, most recent, and relevant plugin for their site. | ||
| * Scrollable, searchable list of plugins with a search bar at the top, tags attached to each plugin, and accurate information on version compatibility, popularity, maintenance, stability. | ||
| * Each profile card should have a short description and the profile page should have the Github READme file. |
There was a problem hiding this comment.
I'd use "README" instead of "READme".
| ## Learning from other plugin libraries | ||
|
|
||
| We also analyzed over 10 admirable and/or popular plugin libraries to draw from their strengths and learn from their weaknesses. Examples in no particular order include [JS.coach](https://js.coach/), [VIM Awesome](https://vimawesome.com/), [Best of JS](https://bestof.js.org/), [Sketch extension library](https://sketchapp.com/extensions/), [Chrome plugin library](https://chrome.google.com/webstore/detail/plugins/mmcblfncjaclajmegihojiekebofjcen?hl=en), [Microsoft Visual Studio Code Extensions](https://marketplace.visualstudio.com/VSCode), [Wordpress Plugins](https://wordpress.org/plugins/), [Npms.io](https://npms.io/), [Yarnpkg.com](https://yarnpkg.com/en/packages), [Apple App store](https://www.apple.com/ios/app-store/), which just got redesigned, so I’m interested to learn from their changes, [Google Play store](https://play.google.com/store/apps/top?utm_source=na_Med&utm_medium=hasem&utm_content=Jan3118&utm_campaign=Evergreen&pcampaignid=MKT-DR-na-us-1000189-Med-hasem-py-Evergreen-Jan3118-Text_Search_BKWS-audiencetest%7cEXA%7cONSEM_kwid_43700029906604977&gclid=EAIaIQobChMIt5mJ--ja2QIVAdtkCh0-PQWgEAAYASAAEgK_0vD_BwE&gclsrc=aw.ds&dclid=CPaIm_zo2tkCFdWUfgodw58Gaw). | ||
|
|
There was a problem hiding this comment.
The link to Google Play can (should ;-)) be just https://play.google.com/store/apps/top
@fk thanks for the suggestions!
|
|
||
| After talking to over 60 Gatsby users, I compiled what’s called an “empathy map” in UX design to put myself in the shoes of Gatsby users; basically, this map describes a summary of what the typical Gatsby user experiences when searching for plugins. | ||
|
|
||
|  |
There was a problem hiding this comment.
Is there a much larger version of this we can use? It's hard to read even at full-size.
|
|
||
| We just merged the current version of the plugin library. You can follow its progress and contribute in [Github](https://github.com/gatsbyjs/gatsby/issues/4394). | ||
| See the [Plugin Authoring](https://www.gatsbyjs.org/docs/plugin-authoring/#what-files-does-gatsby-look-for-in-a-plugin) page if you’re interested in creating your own plugin. This is a new page and feel free to suggest edits and improvements. | ||
| Here’s a reminder to [contact me](https://twitter.com/shannonb_ux/status/938551014956732418) here if you have feedback that differs from or provides deeper insight into one of the pain points this article mentions. |
There was a problem hiding this comment.
Perhaps add instructions that if the reader has a plugin and it's not showing up, double check that the package has "gatsby-plugin" in its keywords.
|
|
||
|  | ||
|
|
||
|  |
There was a problem hiding this comment.
Maybe make this into an animated GIF? It takes up a lot of screen real estate.
|  | ||
|
|
||
| Based on the empathy map above, we identified five “jobs” that Gatsby users want done regarding plugins and packages: | ||
| * Make it easy to search for and find the best, most recent, and relevant plugin for their site. |
There was a problem hiding this comment.
Can we be more succinct here? Jobs to be done should be short and snappy and should not be feature lists. To use Clayton Christiansen's famous example, a job to be done is "entertain myself on a boring drive", the product is a milkshake, the feature is random chunks in the milkshake. It seems like you're sub-bulleting features under jobs to be done, would suggest to remove those sub-bullets.
Here the job to be done is "Find relevant, high-quality plugins for their site."
|
|
||
| Based on the empathy map above, we identified five “jobs” that Gatsby users want done regarding plugins and packages: | ||
| * Make it easy to search for and find the best, most recent, and relevant plugin for their site. | ||
| * Scrollable, searchable list of plugins with a search bar at the top, tags attached to each plugin, and accurate information on version compatibility, popularity, maintenance, stability. |
There was a problem hiding this comment.
remove as per above comment. perhaps as per below comment, relevant features could be listed under the "learning" if they were inspired by other libraries
There was a problem hiding this comment.
Cool. I have a really detailed list of the strengths and weaknesses of the other sites--helpful to include? Too much? Or I can just add the features that we were inspired by...
There was a problem hiding this comment.
I'd say definitely include this. Plugin search is a pretty common pattern. There's a number of other communities that have one or might want one and you could contribute a lot here by recounting your research and analysis.
| * Make it easy to search for and find the best, most recent, and relevant plugin for their site. | ||
| * Scrollable, searchable list of plugins with a search bar at the top, tags attached to each plugin, and accurate information on version compatibility, popularity, maintenance, stability. | ||
| * Each profile card should have a short description and the profile page should have the Github README file. | ||
| * Make it easy to imitate plugins as they build their own. |
There was a problem hiding this comment.
"Browse source code of similar plugins"
| * Each profile card should have a short description and the profile page should have the Github README file. | ||
| * Make it easy to imitate plugins as they build their own. | ||
| * The profile cards and pages should easily link to the Github repo. | ||
| * Recommend plugins based on their needs. |
There was a problem hiding this comment.
See recommended plugins based on their use-case
| * You could fill out a profile and login and get suggestions based on the kind of site you’re building, your level of experience, etc. | ||
| * There could be permanent categories like “for beginners” or other categories. | ||
| * There can also be changing categories like “editor’s picks,” “trending,” “most popular,” etc. | ||
| * Show (or at least explain) what plugins do (preview) before installation. |
There was a problem hiding this comment.
Preview plugin functionality before installation
| * Show (or at least explain) what plugins do (preview) before installation. | ||
| * Make sure README files are filled out with instructions and a list of sites that use the plugin. | ||
| * Possible showcase every week? | ||
| * Make it easy to share plugins they build and/or plugins they like. |
There was a problem hiding this comment.
Share plugins they recommend
|
|
||
| ## Learning from other plugin libraries | ||
|
|
||
| We also analyzed over 10 admirable and/or popular plugin libraries to draw from their strengths and learn from their weaknesses. Examples in no particular order include [JS.coach](https://js.coach/), [VIM Awesome](https://vimawesome.com/), [Best of JS](https://bestof.js.org/), [Sketch extension library](https://sketchapp.com/extensions/), [Chrome plugin library](https://chrome.google.com/webstore/detail/plugins/mmcblfncjaclajmegihojiekebofjcen?hl=en), [Microsoft Visual Studio Code Extensions](https://marketplace.visualstudio.com/VSCode), [Wordpress Plugins](https://wordpress.org/plugins/), [Npms.io](https://npms.io/), [Yarnpkg.com](https://yarnpkg.com/en/packages), [Apple App store](https://www.apple.com/ios/app-store/), which just got redesigned, so I’m interested to learn from their changes, [Google Play store](https://play.google.com/store/apps/top). |
There was a problem hiding this comment.
This is tantalizing but feels incomplete. What did we learn from surveying? Were there 3-5 common UI patterns to draw out? What did these do differently? Maybe these tie into your five action items earlier, but this section feels out of place. Possibly we could move some of the features from above into here.
|
|
||
| I used card sort software to generate dendrograms, other kinds of -grams, and matrices that show the way 20 different Gatsby users typically organize plugins in their minds (big thank you to all who participated here!). Creating filters, categories, and tags are possible future enhancements based off of these results: | ||
| * [Card Sort Results 1](https://www.optimalworkshop.com/optimalsort/x87kpp82/0mv7111b/shared-results/f24tt2xcxj7di7303t46hec077unam75) | ||
| * [Card Sort Results 2](https://www.optimalworkshop.com/optimalsort/x87kpp82/bt0c01w0/shared-results/1yo4d868hponypjyk1we3xz53sag7uc7) |
There was a problem hiding this comment.
Unclear what these links are trying to demonstrate -- this seems to be a statistical analysis which which I'm unfamiliar and the results of which aren't clear to me. If the analysis was useful and suggested a scheme of 5-10 filters / categories / tags I would just list them here. If not, this is confusing.
There was a problem hiding this comment.
Ok. Yeah, the results are pretty obscure. Should we just leave this out?
|
|
||
| ## Until next time | ||
|
|
||
| The purpose of creating the library goes beyond solving a pain point: it also can help people enjoy the full value of the Gatsby ecosystem. The plugin ecosystem is a huge part of what makes Gatsby awesome because plugins and packages make Gatsby extensible and capable of a huge range of powerful things. I hope the library will make it easier for people to find plugins, using them, contribute to them and create them with the help of the Plugin Authoring page in the docs. Anything we can do to make that cycle faster will help the Gatsby ecosystem develop faster and help people build awesome sites. |
There was a problem hiding this comment.
a bit more succinct:
The plugin ecosystem is a huge part of what makes Gatsby awesome because plugins and packages make Gatsby extensible. There's a virtuous cycle where people find plugins, use them, contribute to them, and create new ones. We hope to accelerate this cycle, so the Gatsby ecosystem can develop faster and more people can build awesome sites!
|  | ||
|
|
||
|
|
||
| ## Until next time |
There was a problem hiding this comment.
Should we mention the starter showcase? It really is the next project here.
|
|
||
| Here are some ways you can help make the Gatsby plugin ecoystem great: | ||
|
|
||
| We just merged the current version of the plugin library. You can follow its progress and contribute in [Github](https://github.com/gatsbyjs/gatsby/issues/4394). |
There was a problem hiding this comment.
Open each of these points with a strong CTA, ie:
- Share feedback for the plugin library at (Polishing Plugin library #4394).
- Create plugins (or publish ones you've already built!). Take a look at the Plugin Authoring guide if you're interested.
- etc
|
|
||
| ## Why build a plugin / package library | ||
|
|
||
| In over 60 interviews with Gatsby users, plugin discoverability appeared as a top pain point (see [blog post on the Gatsby UX research program](/2017-12-20-introducing-the-gatsby-ux-research-program/) for a full list of pain points). So we built a plugin / package library [here](/packages/)! |
There was a problem hiding this comment.
Should be active voice & give timeline context, eg, "from October 2017 to Feb 2018, we conducted..."
|
|
||
| In over 60 interviews with Gatsby users, plugin discoverability appeared as a top pain point (see [blog post on the Gatsby UX research program](/2017-12-20-introducing-the-gatsby-ux-research-program/) for a full list of pain points). So we built a plugin / package library [here](/packages/)! | ||
|
|
||
| In this article, I want to explain how UX research drove the development and design of this plugin library and invite you all to follow and contribute as the library continues to improve. |
There was a problem hiding this comment.
need to use "we" consistently through the article
There was a problem hiding this comment.
Ok. I got feedback from @KyleAMathews on my first article, "Introducing the Gatsby UX research program," that I ought to use "I" throughout the article. I don't really care which one, as long as it's consistent haha. So should I switch to "we" now?
There was a problem hiding this comment.
Haha. Looking at this again, I think this use of "I" is fine in this one spot, since you're referring to yourself as the author of the piece, though I'd argue that there's probably a more powerful way of writing above sentence, eg:
"This article will be talking through our thought processes as we designed & developed this plugin library. We'd love your help contributing as the library continues to improve!"
When you're talking about the user research, using we is better, eg:
We compiled what’s called an empathy map....
We wanted to know what keywords people might use....
|
Left some comments! Exciting to see this written up! |
|
(close unintentional) |
Incorporated almost all comments. Kyle is working on the gif. @calcsam @KyleAMathews
@calcsam and @KyleAMathews Hopefully ready!
|
Thanks to @fk and me bugging all ya'll, hopefully this is ready to post! |
| @@ -0,0 +1,81 @@ | |||
| --- | |||
| title: Why we created the Gatsby plugin library | |||
| date: 03-07-2018 | |||
There was a problem hiding this comment.
this date is in format that gatsby doesn't recognize - https://deploy-preview-4422--gatsbyjs.netlify.com/blog/2018-03-07-why-we-created-the-plugin-library/ (invalid date) and this post gets pushed to the end of post listing
this should be "2018-03-07"
@KyleAMathews thanks!!!
|
One other thing just noticed. We need to start the post with some context. Namely explain that earlier this week we launched the new plugin library that let's you easily search and browse gatsby plugins. |
@KyleAMathews implemented your feedback
|
Thanks everyone! |
Too many images? @fk @KyleAMathews @calcsam @jlengstorf