Completely redesign National Bank of Greece's Developers Portal with the latest and greatest tools. A secondary objective was to set up a custom cluster infrastructure with complete redundancy and security to host the portal. The whole project has to be headless, versatile and cutting edge. Just like the rest of the Bank.
Getting deep in the cutting edge thing, we leveraged numerous technologies that are today's holy grail of web applications. Drupal 8, React JS, REST APIs, Custom integrations with the Bank's internal systems and last but not least, a cluster of 9 custom and high performing servers to serve this to the world.
How it was made
Connect on a Global Scale
We completely revamped the homepage layout and upgraded all elements to component based design. The design looked really futuristic, and micro-animations really capture visitors attention.
With the first glimpse you can really see that this design is really cutting edge for a traditional bank, but it was intentional in order to come closer to the high-tech philosophy of developers.
A quick look on the homepage and will practically give you access to the rest of the website sections to guide you where you need to go.
As Easy As 1 2 3
With so many APIs available practically any developer that wants to create an application that will use National Bank of Greece's systems will visit this page at least once.
This page offers an easy to follow overview of the steps a new developer needs to do, in order to get going with his app. It is essentially an onboarding, not only for the usage of the developer portal but for the process of creating an app, getting it approved by NBG and everything in between.
Since we're using React js everything is based on react components so this makes designing each page easy and consistent.
There's an API For That
National Bank of Greece has probably the most comprehensive API product catalog in Greece and one of the best worldwide as you can see from a recent InnoPay study of developer portals from all over the world that ranks NBG's Developer Portal as one of the best in the world in openness.
In this list you can filter the available APIs by category and then click on your API of interest to read more about it and see the documentation.
Battles are Won in the Details
The API documentation is the most well laid out documentation you will ever see.
Easy navigation, full history, code examples, calls and responses, sample requests, available request parameter etc. Everything a developer needs is right here. But it's the details that they make this stand out from the crowd.
Try Out The Innovation
The best part of the documentation is the try-it-out console.
You can literally send a test request and get the actual response you would get in the real world. All in a safe sandboxed environment.
Small but extremely useful stuff like these separate National Bank of Greece Developer Portal from the crowd of other banks developer portals.
Get The News!
The blog / news section is the heartbeat of every website. It serves as an entry point for most of the visitors while providing value to the reader at the same time.
The articles that National Bank of Greece is publishing give great information and insights on various tech subject that really inform their audience and help their portal to grow.
Since some articles can be very analytical and in-depth we added a special navigational clickable index on the left that its automagically generated from the relative sections of the article. That way the reader can quickly click and jump to the relative section of the article and navigate through the article easily. The good part about this feature is that its generated automatically so the content creator doesn't have to do any extra work.
People Helping People
If the blog is the heartbeat the forums are like a digital meeting point.
When developing an application the certain thing is that you'll encounter some bugs, problems and setbacks. Sure there is Stack Overflow but you can't find every answer there. National Bank of Greece's forums is a place that the banks employees also spend time daily and also know the inner workings of the bank's systems. That way they can help you find answers that you can't find anywhere else.
Our goal here was to be easy to find information, seek or give help.
Threaded conversations, Search using Solr, Categorization and filtering are just a few UX features that really help anyone who visits the forums to get information quickly.