16 January, 2018

10 mins

How To Design Your Custom App Marketplace

Designing your own custom app marketplace isn’t easy. Users will immediately judge the quality of your apps simply by its design. All in all, there’s a big trust component with app marketplaces. If it looks like your site was designed in 1997, then users won’t trust the quality of the apps, integrations, connectors or plugins that you’re offering them.

First, I want to clarify what I mean by the ‘app marketplace’. I won’t be discussing mobile app stores like Android and Google Play, or the iOS and Apple App Store. Instead, this article will be focused more on web-based app stores like the Salesforce App Exchange or Atlassian Marketplace.

At OpenChannel, we design and host hundreds of app marketplaces for our enterprise customers, along with providing a Management Dashboard. Here, I’ll be sharing some of our design and process best practices in order to help you build a better custom app marketplace on top of your core product.

Some Quick Do’s and Don’ts

Do use a designer. Designers are needed to add the subtleties that make a great, coherent design. This includes hover actions, font selection, color choices, flat design vs drop shadows, etc. Many of our customers don’t have in-house designers so we at OpenChannel also offer design services.

Do develop in iterations. Breaking things down into smaller steps is critical for success. Think like a software developer, avoid designing based on long term goals and instead design for the features that you want to launch with.

Do get design inspiration from other app marketplaces. The best place to start when designing is by looking at other marketplaces to figure out your likes and dislikes. See our post on the best app marketplace designs.

Do place your app marketplace on a subdomain. Don’t be afraid to use subdomains. More often than not, a subdomain (like marketplace.your-site.com) is the best place for a custom app marketplace to live.

Do make your app marketplace responsive. Ask any developer, mobile friendly design is the new standard. You’d be surprised how many of your visitors are on mobile devices.

Don’t launch with reviews. It’s rarely a good idea. See Ratings and Reviews below.

Don’t fixate or over-complicate filtering options. A simple list of around 10 categories is often the best approach.

Don’t use big logos for apps. Sometimes it is difficult for partners or developers to upload large logos. Especially if then need to be retina ready (twice as large as normal).

Don’t clutter your pages. Do away with things that are unnecessary and clutter the experience.

The Three-Step Design Process

It’s always easier to break a task down into smaller, simple steps with clearly defined goals. I’ve followed this exact design process to personally oversee the launch of dozens of new app marketplaces.

The first step is to create a design mockup of the three main pages (home, app details and search). This is typically done with tools like Photoshop, Sketch, Zeplin or Inspect. The goal of this step is to create a full visual representation of what your custom app marketplace should look like.

The second step is to take your mockup and use it to create a prototype consisting of nothing but HTML, CSS and Javascript. The goal of this step is to create a basic website where the user can click through, interact and see the different pages come together in a browser. Details like responsive design and hover animations should also be included in the prototype.

The third step is to create the first functionally working version that you’ll be launching. The goal of this step is to take your prototype and wire in the back end services to make it a fully working app store.

Over the years I’ve found these steps work well because, after every iteration, it gives the stakeholders a chance to make changes or voice concerns early in the design process. This leads to less confrontation and large scale changes after the functionality have already been wired in.

Custom App Marketplace Layout

Surprisingly, the layouts for most app marketplaces are very similar and don’t require much work to design. Essentially, there are three main pages that it’s comprised of.

Home Page Design

The home page is typically the first page that your users will see.
Usually, it will contain the following components:
A header with a logo on the left and a navigation menu on the right.

  • A hero section with the title and tagline of the site
  • A left navigation sidebar with search, collections and categories
  • A featured section where 3 or 4 apps are prominently displayed
  • A listing of apps either representing the entire list of apps or grouped by category

Here are some examples of home pages:

There’s no magic to creating it. Just try to keep is elegant and clutter-free.

App Details Page

The app details page is where the user can see all the details for a specific app. Now, there are two ways to do this. Either you can have a dedicated page to display the app details or you can display the app details within a modal.

Modals are faster and more convenient for users to click on. However, they hold less information and are best suited when you don’t need to display a lot of detail about an app. Stripe has a perfect example of using a modal for app details.

Dedicated pages hold more information. However, they are slower to click through since it typically requires a page load. Overall, a dedicated page is the most common approach for app stores. Github Marketplace is a great example of using a dedicated page for app detail.

Typically, an app details page will display the following information about an app:

  • Name
  • Summary
  • Description
  • Logo
  • Images
  • Video
  • Website
  • Categories

It’s also important to understand that these are going to update and change over time, as your apps and app type evolve, so making these easy to update, like with the OpenChannel Management Dashboard, is critical as well.

Search Page

The search page is where the user can view results for filter or text searches. This can also be done on the home page using ajax but many app marketplaces have gone with a dedicated page to list the results of a search.

Some examples of search pages:

App Marketplace Categories

Browsing by category is the most popular way for users to discover your developers’ apps. As a result, it’s important that your categories be crafted like a fine Samurai sword – elegant, simple and to the point.

Categories are just a way for users to get closer to what they’re looking for. However, they still have to do some browsing to find it. This way, the user can get an idea of what’s available without having to tediously dredge through apps.

In terms of best practices, there’s only one. When launching a custom app marketplace (assuming you don’t have thousands of apps), aim for least 10 and at most 80 apps per category. Generally, that’s achieved with about 8-10 categories. Keep in mind that a single app should be able to live in multiple categories.

Collections are also a great app discovery tool. Collections allow users to browse and sort based on criteria other than category. For example, some of the most popular collections are ‘Popular’, ‘Newest’ and ‘Featured’.

Ratings and Reviews

I’m going to start out by saying that we never recommend launching a custom app marketplace with ratings or reviews. Ever. In fact, many larger companies (most notably Netflix) have done away with reviews altogether.

“People – they’re the worst” — Jerry Seinfeld

The top reason why reviews are a bad idea is because for small, web-based app marketplaces, it almost always creates a negative impression for users.

First, sparse reviews create an impression of disuse and abandonment. Nobody wants to party at a nightclub that’s empty and nobody wants to use apps that no one else is using.

Second, multiple low rated apps give the user a general impression that the apps (and app store) are of low quality and not worth the time. The point of an app store is to showcase and enable all the great things that integrate with your product. If users are immediately dismissive without giving it a try then that’s a horrible outcome – especially if they would have otherwise tried and been perfectly happy with the app.

Don’t let all my negativity get to you. There are situations where reviews are extremely important, helpful and actually improve the user experience. Reviews are great when your library is big enough to have many competing apps. Let’s take Amazon for instance (not an app marketplace but same concept). Amazon has hundreds of rice cookers for sale. The ratings and reviews system is crucial for helping me get over my analysis paralysis to find the rice cooker that’s best for me.

Featured Apps in Your Marketplace

Prominently featuring a few select apps on your homepage is highly recommended and a great feature for several reasons.

First, in terms of style, it breaks up the uniformity and blandness that can result from displaying a list of apps. When the page first loads, it helps draw in the eye of the user from the hero and down towards the listing of apps.

Second, it helps you put your best foot, and best developers, forward. Let’s be real. Not all apps are equal and some are just better, and slicker and more useful than others. Exposing a user to a successful app experience will make them more likely to come back and try others.

Actually, even if you’re not offering featured placement to your partners you should still have space on the home page for prominently placed apps. Promote apps randomly, have them rotate every month or have them hand-chosen by staff. It doesn’t matter.

Search

A search field allows users to discover apps by typing in keywords that suit the app that they’re looking for.

To be honest, not many people use search functionality. In fact, our data shows that only about 3% of visitors use the text search option on web-based app stores. This is in stark contrast to mobile app stores like Google Play or the Apple App Store that see an overwhelming majority of users use the text search functionality.

The discrepancy in user behavior on mobile vs web-based app stores is due to the fact that most web-based app stores have only a few hundred apps whereas large mobile app stores have hundreds of thousands of apps. In short, a large library of apps reduces the user’s ability to find what they’re looking for when browsing simply by category and instead, need to resort to searching.

So, should you prioritize search on your custom app marketplace by making it larger and more prominent? Probably not. I mean, unless you have hundreds of thousands of apps. However, it doesn’t hurt to have a small search field in the sidebar or header.

Overall

Ultimately, the user will make a snap judgment about the quality of your apps simply based on their first impressions of the design. This user behavior isn’t limited to app stores and is applicable to any website.

If I only had one piece of advice to communicate on custom app marketplace design, it would be this: Build in iterations, only design for the initial version and keep it simple. Well, that was three pieces of advice but that’s okay.

Related posts

Defining Your App Marketplace Requirements
Tools & Guides

Defining Your App Marketplace Requirements...

“Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” –...

Developer Engagement on Your App Marketplace: 4 Steps
Tools & Guides

Developer Engagement on Your App Marketplace:...

Developer engagement is a serious concern, no matter whether you’ve already launched your app marketplace, or are still considering launching...

Leading App Marketplace Solutions in 2021
Tools & Guides

Leading App Marketplace Solutions in 2021...

While the value of app ecosystems are increasingly recognized by software platforms, users and third-party developers, the path to building...