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.
Table of Contents
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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.
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.
