Devportal Awards 2019 is open for nominations. We are looking forward to hearing your thoughts on public-facing API developer portals!
This is the fifth and last article in our series that provides background explanations and examples for the awards categories.
Posts in this series:
- Best Accessible Devportal and Best Internationalized & Localized Devportal
- Best API Business Model and Best Decision Maker Documentation
- Best Onboarding and Best API Reference Documentation
- Best Post-integration & Maintenance Support, Best Policies & Terms of Use and Best Community Spotlight and Outreach
- Best New DX Innovation, Best Design, and Best Overall Devportal
How can API portals enhance user experience in general, and pay special attention to developer experience? How can design elements support usability and content? What makes a devportal, in overall, stand out against competitors?
In the previous articles, we mostly focused on devportal segments, such as: How do you make sure that your users can easily onboard? How can you explain your business models well? What is decision maker documentation? What is self-service support and how can you go beyond that?
This article inspects the developer portal with a holistic approach: How can you glue the different segments together?
We highlight the criteria that we think define the categories of Best DX Innovation, Best Design, and Best Overall Developer Portal and we include examples taken from last year’s nominated devportals.
Best DX Innovation
DX (developer experience) is the inverse of API friction. In the eyes of your users, the value of your API(s) will grow if they experience as few obstacles as possible from start till finish. Great DX can enhance how people perceive your API portal: the experience starts from e.g. registration requirements over information architecture solutions, testing options and support resources to community life and maintaining an app. Taking care of DX is important throughout the whole developer journey, be it through simple solutions, creative innovations or well executed existing technologies.
How do devportals lead the way in boosting developer experience? Do they address developers differently, do they pay attention to specific subgroups? In other words: Do the API documentation components, for example, correspond with the developer’s level of professional knowledge and favourite programming language? How easy is it to interact with peers?
Enable
A DX innovation can be something that causes a sudden insight or that surprises the user in a positive way. Overall, DX elements enable users to work more easily. Some examples of DX elements that can be added throughout the downstream developer journey:
- a clear site navigation (e.g. top menu items, breadcrumb navigation, a sidebar with filtered search options, sticky navigation etc),
- an API catalog with API descriptions & filtering options,
- user specific call-to-action buttons on the overview page,
- try-out & test options (e.g. via an API explorer),
- demos, samples, code examples,
- an easy-to-handle registration process,
- a straightforward API key / token provisioning process,
- docs for different types of learners,
- support options in one place,
- user-friendly API reference pages (e.g. with highlighted code and buttons to copy code),
- a discussion forum,
- readable legal docs,
- a changelog and an API status page,
- a visualization of future plans.
Cisco’s top menu items are straightforward and support the downstream developer journey stages. Users also immediately get access towards announcements.
Different types of developers can enter the documentation and information they need easily on Cisco’s overview page
At the end of Erste Bank’s Getting Started page the devportal provides different topics with direct links that help developers to choose among the next steps.
Erste Bank’s search bar results allow for scrolling in-page. Note the tags both among the search results (“news”) and on the API listing page (“v1”)
Adyen provides a button to copy the code and enables easy navigation via a sidebar menu that highlights the current step
Engage
How can you involve your users? Focus on individual work and community aspects, but also make sure you are able to motivate your users extrinsically and intrinsically:
- ask them to provide community docs:
- pay them for that work,
- celebrate your users (e.g. interview them, let them share their work on a community page or blog),
- organize events and hackathons,
- ask for feedback and opinions:
- gather qualitative data: let users report bugs, edit docs etc,
- gather quantitative data: let users vote.
Read more about how you can engage developers in our article on developer marketing techniques.
Best (UI) Design
Your developer portal will inspire trust when you present every aspect of the APIs in a well-structured and understandable way. The best design category is for devportals that found the perfect harmony between usability, functionality, content and aesthetics. How can you achieve that? Some examples.
Consistent, yet functional UI design
Functional design is responsive and supports the API’s usability. While overview pages need to attract different audiences (developers and decision makers alike) and to provide user journey starting points, the developer documentation pages should best focus on “getting the job done”.
Typeform’s overview page has a marketing focus and features eye-catching design elements (such as micro animations and interactive text). The docs page follows the same design pattern, but focuses on usability and functionality (e.g. animations disappear but the colours — one per product — remain throughout the devportal).
Mapbox’s devportal overview page uses white space to make content sections clear. The UI design also supports the content on the API reference pages (see screenshot): the high-contrast colours clearly show what is clickable.
Note: the portal’s current design altered in comparison to Dec 2018, when the company won the Best Design prize.
Note: the portal’s current design altered in comparison to Dec 2018, when the company won the Best Design prize.
Case study: displaying statistics
Visual elements, such as graphics, specific use of colours, and illustrations can help to picture statistical facts.
Shopify’s statistics intermingle design and functionality: the cards combine contrasting colours and blocks to state the numbers they want to share. The colours indicate related content. This section is mainly for business managers: the quote supports the statistics.
Best Overall Developer Portal
All nominated developer portals automatically run in the Best Overall Devportal category.
Last year, Cisco won the jury prize: “The decisive argument for Cisco DevNet was that they had an unbelievably complex problem to solve with their numerous products and content types, and they could meet this challenge in a truly convincing way.”
What is it that makes a devportal stand out against its competitors? Well-chosen, inspiring, consistent and cooperating features and elements.
We featured some of the devportals from the 2018 awards in this series as illustration of the category they were nominated for. Many of these portals, however, excelled in other aspects as well: in this chapter we’ll highlight some of them.
Nordea uses contrasting colours that make content sections clear. The overview page shares Nordea’s vision on APIs, but mostly functions as a summary page that answers questions, such as (1) Why work with us?, which lists the Nordea benefits for different personas, and (2) How does it work? with a clear step-by-step approach to get started. The API catalog provides a link to a roadmap in Trello that lists future plans. Related categories: Best Design, Best Decision Maker Docs, Best API Business Model, Best Onboarding, Best Post-Integration & Maintenance Support
Nexmo’s community page engages users: it lists events, give an overview of video resources (e.g. of conference presentations), indicate how to get in touch, join the slack community and how to follow them on Twitter. Related category: Best Community Spotlight & Outreach
Ticketmaster immediately shows what the getting started process looks like. If needed, steps can be skipped (the buttons are clickable). Related category: Best Onboarding
CapitalOne’s API catalog lists which API products are fully available and which ones they’re working on. Note the links at the bottom of the tiles to learn more, to enter the documentation and a playground. Related category: Best API Reference Documentation
Deutsche Bank encourages users to report bugs (here) and request features. Related category: Best Post-Integration & Maintenance Support
Shopify’s legal docs cover long and short explanations of specific topics. Besides that, the devportal has great design features (an overview page with abstract graphics, micro illustrations, and hover effects on clickable tiles; a docs page that combines aesthetics and content in a functional way). Related categories: Best Policies & Terms of Use, Best Design
Hootsuite mentions how and where to find support and how much time it takes to receive an answer to questions from the support team (which helps users know what to expect). Related category: Best Post-Integration & Maintenance Support
Design for usability, consistency and experience — strategic decisions, information architecture, UX and UI design, and development go hand in hand. This will result in a higher API usage, a higher perceived API value, less friction and engaged users who might even become advocates for your devportal.
DevPortal Awards 2019: How to nominate your developer portal
What is the goal?
The goal of DevPortal Awards is to recognize public-facing developer portals that show great examples in eleven different categories and to find the developer portal that provides the best overall experience.
Why should I nominate my developer portal?
By nominating a portal you can draw the community’s attention to it and acknowledge the work of the people behind it.
How can I nominate my devportal?
Please fill out the nomination form!
Who chooses the winners?
The winners of the 11 nomination categories will be chosen by the Awards Jury in October.
In the Best Overall Developer Portal category two winners will be selected: one by the jury and one by the community via public voting. The portals nominated in any of the 11 categories are running for the Best Overall portal automatically.
How can I stay up-to-date and get notifications?
Sign-up to the DevPortal Awards newsletter and receive info on nomination and voting, nominee and jury news, and details on the gala event.
This article was edited by Laura Vass & Mónika Alföldi-Zörgő and fact-checked by Gyöngy Gora. Many thanks to Anna Antal for helping with the background research!
