Designing your own custom app store isn’t easy. Users will immediately judge the quality of your apps simply by the design of your app store. All in all, there’s a big trust component with app stores. 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 “app store”. I won’t be discussing mobile app stores like Google Play or 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 stores for our enterprise customers. Here I’ll be sharing some of our design and process best practices in order to help you build a better custom app store on top of your core product.
Some Quick Do’s and Dont’sDo use a designer. Designers are needed to add the subtleties that make a great, coherent design. This includes hover actions, font selection, colour 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. Avoid designing based on long term goals and instead design for the features that you want to launch with.
Do get inspiration from other app stores. The best place to start when designing is by looking at other app stores to figure out your likes and dislikes. See our post on the best app store designs.
Do place your app store on a subdomain. Don’t be afraid to use sub domains. More often than not, a subdomain (like marketplace.your-site.com) is the best place for a custom app store to live.
Do make your app store responsive. Mobile friendly 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 its 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. For example, got counts next to your categories? Get rid of em!
The Three Step ProcessIt’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 stores.
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 store should look.
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 has already been wired in.
Custom App Store LayoutSurprisingly, the layouts for most app stores are very similar and don’t require much work to design. Essentially, there are three main pages that make up an app store.
The home page is typically the first page that your users will see when visiting your app store for the first time.
Typically, an app store’s home page 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 app store home pages:
There’s no magic to creating a home page. Just try to keep is elegant and clutter free.
App Details PageThe app details page is where the user can see all the details for a specific app. Now, there’s 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:
Search PageThe 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 stores have gone with a dedicated page to list the results of a search.
Some examples of search pages:
Browsing by category is the most popular way for users to discover 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 store (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 a criteria other than category. For example, some of the most popular collections are “Popular”, “Newest” and “Featured”.
Ratings and ReviewsI’m going to start out by saying that we never recommend launching a custom app store 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 stores 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 user’s 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 store 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 AppsProminently featuring a few select apps on your homepage is highly recommended and 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 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.
SearchA search field allows users 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 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 their looking for when browsing simply by category and instead need to resort to search.
So, should you prioritize search on your custom app store 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.
OverallUltimately, the user will make a snap judgement 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 store 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 ok.