Various Web Store Flow Explorations

The Design Team provides design for the WordPress project.

Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.

Figma Access

You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.

Along the lines of this post from @helen, and in relation to the Plugin Directory IA, I’m sharing some flows from other popular web store experiences. This is exploratory research for the PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Directory.

FLOWS

Code Canyon (https://cloudup.com/cbQSIYi5jUf)

Sketch App Resources (https://cloudup.com/cEq1yIwY5NM)

Steam (https://cloudup.com/cHiTsgm1U9R) via @markjaquith

XBOX Store (https://cloudup.com/cUcVXIynaPa)

Playstation Store (https://cloudup.com/cyK7tf-YlcC)

Amazon App Store (https://cloudup.com/cng1vG1MzhT)

Mac App Store (https://cloudup.com/c-annTJSdGh)

Windows App Store (https://cloudup.com/cBLTp69gtv4) via @michael-arestad

Google Play Store (https://cloudup.com/cpwbEDBa94v) via @ryan

NPM Packages (https://cloudup.com/cX2qE9HThDs)

Atom Package Manager (https://cloudup.com/cA073Aae_FU) via @michael-arestad

Chrome Extensions (https://cloudup.com/ck-GUY0sjoO)

Firefox Plugins (https://cloudup.com/cbHEKKMxY36)

Safari Plugins (https://cloudup.com/ch_bI5-Cajd)

FEATURE COMPARISON

Web Store Feature Comparisons

TOP COMMONALITIES

Description (Often times this ONE section contained the description/FAQs/Other Notes, etc.)
Author
Download/Install Button
Screenshots
Reviews
Ratings

FEEDBACK

What are your likes and dislikes between these? Are there popular design patterns that would be useful for our Plugin Directory? Please leave feedback below.

If you have other flows that you think would be helpful, please link to those as well.

Hugo Baeta 11:29 pm on March 15, 2016

This is super useful! Thanks for putting this refreshed list together. I was looking through the “Feature Comparison” spreadsheet, and one note is we should probably separate “Download” and “Install”, since some stores allow you to install directly from their pages (like Google Play, which is awesome because you can select from the web what device you want the app installed in, it works like magic, I love it). 🙂
- Erlend Sogge Heggen 9:46 am on March 16, 2016
  
  An “Install” button could be possible with Jetpack.
  
  Prerequisite: Support Jetpack logins on WordPress PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Directory
  
  Example use case
  
  1. Click “Install this plugin”
  2. Background process checks with your Jetpack account to see what WP sites you’ve connected it to.
  3. Show user a list of sites they may choose to install this plugin on (just like Google Play)
  4. User selects a site
  5. Directory site goes “Installing…” while also providing you a link to your site’s backend.
  - Mark Uraine 3:00 pm on March 16, 2016
    
    We’d probably have to do the check prior to page load, yes? I wouldn’t want to show an ‘Install’ button if the user doesn’t have Jetpack installed or is not logged in… unless the button prompts the user to log in if they’re not and then performs a check. And if they ARE logged in, it can check but error out if the user doesn’t have Jetpack? I don’t think that’s a solid experience. Right now, on the .ORG side, I’m not sold that an “Install” button will work smoothly.
  - Anton Timmermans 7:20 pm on March 17, 2016
    
    I would prefer a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party agnostic solution.
    
    On possible solution would be something like Shopify has on their store. When a user clicks on install they are given a form to fill in their site URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. We could do something like that asking a user for their site URL. See https://cloudup.com/csHVLs-ceGg.
Mel Choyce 3:22 pm on March 16, 2016
Really great research and comparison! 🙌

Some general thoughts:
- I think Code Canyon has the right idea emphasizing search
- Featured plugins probably won’t change often enough to justify giving them larger banners or emphasizing them more than we do currently
- Popular plugins, though, would be good to emphasize more, maybe by using their banners instead of their icons
- (On that note, we should consider hiding things like the Importer plugins and Hello Dolly from popular)
- Grids consisting of just icons get overwhelming pretty fast and my eyes tend to gloss over them
- NPM’s “Getting Started” instructions at the bottom of the page are nice
- Atom’s “Available Updates” section would be a nice addition to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.
Mark Uraine 10:27 pm on March 18, 2016
Features we offer that were rarely used by anyone else:
- “FAQ”
- “Other Notes”
- “Changelog”
- “Stats”
Features common with others but not with us:
- File size
- Related downloads/plugins
- CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. identification
- Social sharing buttons
I also like how CodeCanyon emphasizes Search. Even their search results page offers more ways to refine the search in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme..

Grids do get overwhelming when it’s just some little icon. When I see crap like that, I go immediately to the search field. I like how we treat them more as cards with additional info mixed in with the icon.

I also like the little stats at the top of NPM to give a high level view of what’s going on with their directory.

Comments are closed.

The Design Team provides design for the WordPress project.

More information

Share this: