Leumi API Marketplace
Bank Leumi wanted to make it easier for internal and external developers to find and connect to APIs across multiple cloud environments, whilst monetising the service.
Through this open innovation framework, Leumi wanted to take their first step towards building an open ecosystem that includes entrepreneurs, developers, customers and employees that collaborate to create new value for both the community and Leumi.
Lead Product Designer
Meet Israel's largest financial corporation.
Bank Leumi is Israel’s largest financial corporation and it offers a wide range of banking services and financial solutions to local and international clients.
GFT was approached with one goal in mind - to help lead and collaborate with their internal product team and provide the platform and technology that can turn their ideas into reality.
I joined the project in early 2022 and the context was complicated. The project had been in motion for some time but was lacking structure and leadership.
The internal product team at Bank Leumi had a low-fidelity POC that the developers were attempting to build from but a lack of detail and quality in both the design and functional requirements resulted in output that was misaligned, disjointed and hugely inefficient. This had to be recognised before the project could move forward.
API Marketplace and Developer portal design.
The design goal was to help organisations, teams and independent developers to take advantage of their secure APIs by creating a Marketplace and Developer Portal.
The creation of a bank-owned API Marketplace and Developer Portal represented a strategic opportunity for Leumi. In theory, the creation of a secure space for product development and API consumption would:
- Streamline internal and external developer workflows.
- Support the bank’s desire to be recognised as a tech-partner and facilitator of innovation across multiple sectors.
- Support the diversification of the bank’s income through API monetisation and a user subscription strategy.
- Re-platform away from a costly legacy application that historically served the bank’s API utilisation strategy.
Alongside exclusive resources and mentoring, all within Leumi’s ever-growing banking ecosystem, users would be able to develop and test their ideas and technology, and then scale and expand into new markets - maximising their potential success.
Stepping back from the detail.
When you’re trying to solve a problem it can be tempting to slip into a technical discussion that focuses on features and functions; if you get caught up in the details too early, you risk inadvertently solving the wrong problem or approaching it in a way that doesn’t keep the users' needs in mind.
We were presented with a long list of features that lacked context, structure (such as acceptance criteria) and clear retracement to the user need.
Without much scope in the timeline for user research, utilising internal SME knowledge and validating the design direction as early as possible would be key.
Bridging insights into design requirements through problem-framing.
The first two weeks were focused on onboarding the design team and problem-framing in a lightweight and effective way.
We recruited two Sponsor Users to help bring their experience and expertise to the team. While Sponsor Users don’t replace formal design research and usability studies, they helped to close the gap between our assumptions and their reality - particularly given the tight delivery deadlines.
- The Developer: APIs simplify how developers integrate application components into existing architecture, making it easier to build applications and micro-services more rapidly.
- The Team Manager: As companies transition to using micro-services in their architectures, more APIs are created across the organisation. Developers can create a space within the portal and invite others to share internal and external APIs from a private workspace.
We provided a foundation for experience design by reframing existing requirements and knowledge into needs statements.
Key examples include:
- Developers need a way to consume any API using a unified format so that it is easy to understand and embed in their app.
- Developers need to view API documentation and the parameters for individual endpoints to quickly understand how the API works.
- Developers need a way to subscribe to an API to start using it.
- Developers and Team Managers need a way to manage all their API subscriptions and payment plan.
Well-established marketplaces such as RapidAPI, APILayer and Google Cloud provided a comparative benchmark for our designs.
The mental model of internal developers had been formed in part through their interaction with the legacy application, so it was important to look back before moving forward.
User needs were reframed as functional requirements (which represented the proposed solutions) so that effort could be quantified and tracked throughout the design sprints.
Requirements were prioritised based on value to the user and/or business vs feasibility/technical complexity.
Define and design the critical paths.
The creation of a 'Design Kit' for Leumi as a collection of reusable assets aligned to React, allowed us to rapidly prototype and ensure a consistent digital experience.
Legacy development on the project had not adhered to a consistent grid and breakpoint system. Front-End development had to be re-purposed in alignment with the following system:
A breakpoint is the screen size threshold determined by specific layout requirements.
When applied to design, these red routes are the critical and frequent paths that users take to complete their tasks. Without these routes, your product would not deliver any value. Examples included:
- Create new App
- Find and subscribe to an API
- Add/remove an API from your App
- Find and view endpoint data for API
- Find and view swagger file data for API
- Download API SDK
- Search/filter for APIs in Marketplace
- Log-in / sign-up to an App subscription plan.
API Documentation Page.
The API documentation page provides a technical overview of how to consume and integrate the API effectively; including authentication guides, code snippets and nested endpoints/methods. It also provides updates on the API’s lifecycle such as new versions or retirement.
The page is generated automatically via a ‘Swagger’ file.
Traditionally, API documentation was achieved through the typical content creation and maintenance software and text editors. However, advancement in technology has allowed formats such as Swagger Specification/OpenAPI to automate the documentation process, thereby enabling development teams to design and maintain these documents effectively.
Detailed design guidance for the layout and behaviour of varying endpoint types was validated with our sponsor users.
Developer/User Area: My Apps.
Once logged in, the App dashboard serves to provide an overview of all applications that have been created. Features include App creation, API overview, API analytics, account support and billing.
The user can view analytics for API utilisation at an App level. On the top of the page, you'll be able to see a chart with all the calls being made to all the APIs your app is connected to. You'll also be able to see a log with all the requested data. You are able to filter these analytics to only show certain APIs within the app.