Design
02 October, 2017

9 mins

5 Best App Marketplace Design Examples and How To Use Them


Creating the right app marketplace design can be hard. You have to meet the requirements
 of your users and developers and at the same time, make the those experiences look ‘great’ or ‘clean’. OpenChannel provides a flexible API and toolkit to support your app marketplace, but your design can vary widely depending on your company and goals.

Of all the buzz terms, we like User Centered Design. A philosophy from the University of California that puts users at the center of the design process. The goal is designing products real people can use with ease, for example, without needing a manual.

There are lots or courses and tools for UI design, Apple provides design guides for app developers and host their annual design awards, but there is nothing out there for app marketplace design.

Luckily you don’t have to reinvent the wheel. There are some great examples of quality design and you can use them as a starting point. Here are some of the best examples we’ve seen along with what we like and what they do uniquely well.

Github – Github Marketplace

Github does a great job of displaying and presenting featured apps. In this design, featured apps are given a logo and supporting background image that helps them stand out without becoming a distraction. The description underneath is the right balance of text that plays a supporting role to the images, and highlighting that text when the user hovers over is a nice touch.

 

GitHub Marketplace main page

 

They also rotate the featured apps every time you refresh the page. These apps don’t actually have any mark of being ‘featured’ expect for their prominent placement. We don’t know if the placements are randomized among all apps or just some of the apps but it’s a great way to make the marketplace feel fresh and put your developers up front.

 

Github Marketplace main page with new featured apps.

 

With most apps being technical, there’s the temptation to display too much information but the app detail pages show the right amount of restraint in their design. They only list the top three supported languages and you can hover over to see the others that are supported. Helpful links for documentation and support are there if you need them, but are minimal and out of the way if you don’t. The main app description is also cropped in favor of a featured image. This is great. The user gets a short summary with a supporting image and can click ‘read more’ if they need, making the app detail page feel inviting and easy to navigate.

 

GitHub Marketplace app details page

 

Stripe – Works With Stripe

A unique aspect of Stripe’s marketplace design is how they present app details. When you click on an app from any listing page, you get a pop up with the app’s information. The main listing page is darkened just enough to not be distracting, but stays transparent enough so it’s easy to navigate back by clicking outside of the pop up. This works because users like to click on multiple apps to get a feel for what’s available and this allows them to easily review multiple apps without ever leaving the page. This is a pretty advanced move but we’d expect nothing less from Stripe.

 

Works With Stripe main app store design

 

Works With Stripe preview pop up

 

The pop up also features a ‘How it Works’ element. This seems almost too simple but it’s exactly what the user is asking themselves. It’s prominently displayed and one sentence is just enough to say how the app interacts with Stripe and makes the user’s life better. This element combined with a focus on images within the app detail pop ups, makes browsing multiple apps a breeze.

The main listing page leaves lots of white space with the right balance of images and text. Apps are displayed with logo, title and category and that’s it, giving the user enough information to decide if they want to learn more. The overall design feels inviting while still conveying a high degree of quality and reliability. This is extra important for Stripe as thousands of business rely on them everyday to handle one of their most important activities, getting paid.

Slack – The Slack App Directory

One of the biggest problems in any app marketplace design is app discovery. Slack tackles this head on with a prominently displayed search bar right at the top of the page. Most people landing on your app store have an idea, category, or even specific app they are looking for, so designing around that action is a great way to provide value fast.

As expected, the main App Directory page looks great with featured apps and simple listings. The next step is a bit unorthodox but in true Slack fashion, unorthodox and very well done.

 

Slack App Store design main page

 

Any category listing (example Brilliant Bots) or search results are displayed in a list view with small icons, name, tagline and even emojis. The layout, with categories on the left and then apps on the right, may not work for everyone but it aligns with how Slack’s users navigate its core product – with channels on the left and then content listed on the right. Look similar? 

 

  Slack App Store app search resultsSlack product interface

 

Beyond the Slack specific design, people are generally comfortable navigating list views like Google search results, so this can be a powerful design choice if you have a large number of apps.

Xero – Xero App Marketplace

Unlike Github or Atlassian where there is a focused user base (software developers), every type of business from a law firm to restaurant, needs accounting services and are all potential users of the Xero Marketplace.

Xero has designed for this by creating a toggle between ‘App Function’ (another way of saying category) and ‘Business Type’. Large icons display each business type and supporting images pull the user’s eyes to the one that is most relevant. It’s only when you hover over a particular category that you see a description which keeps the overall look incredibly clean. This gives users the ability to self-identify and find the apps that meet their specific business needs.

 

Xero Marketplace business type page

 

The minimal panel at the top of the page also does a good job of getting out of the way, letting the user dive straight into the apps.

The app detail pages get right to the point with minimal information and a video, front and center. This works well when the user knows the type of app they are looking for. Within 5 -10 minutes, they can have a good understanding of multiple apps.

 

Xero Marketplace app details page

 

After the video, you can’t miss the single call to action, in this case ‘Get Bill.com’. When you have a wide user base like Xero, there is value in designing constraints and this is an excellent example of letting simple design, guide your user to a desired action.

Atlassian – The Atlassian Marketplace

The Atlassian Marketplace is one of the more mature and developed business app marketplaces out there and it’s important to know how to maintain good design as you grow.

It’s not as clean and simple as the other examples, but their team has done an amazing job of designing around additional features; like ratings and reviews, and doing that across multiple product lines like Hipchat and Jira. The design team knows that adding additional elements to the marketplace can detract from the design but that those elements contain important information so the end result is net positive.

 

Atlassian Marketplace app store design

 

The large number of apps and multiple products means constraint can be a designer’s friend. The marketplace starts with three large category icons that draws the user’s attention. If they are unsure where to go, this can guide them in the right direction. Those icons are consistent with the flat design at the top of the page, making a strong first impression.

The app details page feels more like a traditional SaaS product page, with images, videos, descriptions and tabs for reviews, pricing and support. They’ve balanced the need for more information, while still keeping the app detail pages as inviting as possible.

 

Atlassian app details page

 

Bonus points for giving app developers the ability to respond directly to end user reviews. It’s more of a feature than design but great to see nonetheless.

 

Atlassian app details with developer comments

 

What Are The Takeaways?

Consistent Design Matters

Not only throughout the marketplace itself, but with your company’s website, product and brand. Your marketplace is an extension of your core business and the design should have every bit of attention to detail as your core product and website.

Focus On Developers

Every example puts their developers front and center (as they should). You want to resist the urge to tell people about your core product, new features or even how much care you took in your new app marketplace design. Let the design speak for itself and let your developers do the talking.

Start with Simplicity

Minimal clutter on any given page means users have less to do before taking action. If you’re unsure whether to add a design element, leave it out. Treat app marketplace design like a product where you release early, release often and listen to what users want along the way. As your marketplace grows, you may add elements like ‘reviews’ but adding them as needed over time will help you design around that complexity better.

Know Who You’re Designing For.

You know your users best so make sure to use that information for your design. Do they have a technical background or not, are they early adopters or mainstream users. Every company should acknowledge this before designing their marketplace.

 

Go Forth and Conquer Your App Marketplace Design

Design is crucial but the goal is always to support your developers. Whether it’s physical retail or digital apps, a marketplace is only as good as the products it offers. Your products are your developers and their solutions that meet a specific user need.

Once you’ve built an awesome developer community you can (and should) learn from the best designs out there, make them your own, and the create your own world class and beautiful looking app marketplace.

Related posts

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...

Introducing Client API: Build your own app marketplace and partner portal
Tools & Guides

Introducing Client API: Build your own app ma...

Introducing Client API: A new OpenChannel API that is aimed to dramatically reduce the time and cost required when building...

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...