Local personality.

In the spirit of being community-driven, when Local launched it had the ability for other people to create their own add-ons to boost specific functionalities.

We wanted to expand on this — to build a community marketplace for people to share their add-ons. This would mean also providing great tools so people could quickly make them and get to improving their workflows.

add-on-header@2x-1

Creating a community

We didn’t need to or want to re-invent the wheel — needing just basics like an icon, details about the add-on, the developer information, and any related categories it belongs in once the marketplace was large enough to require that. Even search was too advanced for the amount of content we'd have.

add-on-ideation
add-ons-library

A sense of belonging

For discoverability and depth potential, I felt this was another great use of the main sidenav. So I created a simple section with “cards” for each add-on that would click into a detailed view. Inside of the detailed view you could install the add-on.

Once your add-on was installed, it would show up in an “installed” tab in the add-ons section of the app. You could remove them here if you didn’t want them anymore.

New-Add-on-Small@2x
New-Add-on-Icon-Large@2x
No-internet-connection@2x

The first add-ons

Our first add-ons were highly requested from our users. Partnering with the Local engineer and front-end developer I designed a notes add-on for quickly adding notes to your site — helpful for reminding yourself where you left off last time you were working on the site. You could even pin notes.

I then worked with a third-party developer we were working with to design a quick GUI for editing a complicated config file. This required a bunch of deep UI work — adding and saving hyper-specific settings, and even adding custom code.

notes@2x

Notes add-on

wp-config@2x-1

WP-Config add-on

The floodgates

We had plans to open the add-ons library to anyone and everyone. Even these two quick add-ons proved the need for really clear third-party tooling, and more importantly communication of design philosophy — think Apple’s HIG.

I worked with the front-ender to create a Storybook component library — using human words like “Big title” and “destructive button” for components rather than “H1,” red button,” etc.

We also launched build.localwp.com to serve as a documentation hub, with a complete guide on designing a Local add-on. Check it out!

storybook@2x

build.localwp.com

Project impact + reflection

The complexity of this project was intimidating, but it was fun to create patterns that will be used in the future to establish a robust community marketplace. It was also a great exercise to really spell out how I thought about the heirarchy and placement of UI elements and content.

As we continue to open up the marketplace, the tools will certainly improve. Excited to see them get some usage!