ecolytiq Software Development Kit

PROJECT OVERVIEW

The Ecolytiq SDK was developed in partnership with Visa to provide financial institutions with a modular, lightweight alternative to the standard white-label solution. Instead of adopting the full Ecolytiq UI, clients could use the SDK as a "Sustainability-as-a-Service" toolkit, enabling them to integrate specific, individual components (like a carbon transaction view or a personalized insight card) directly into their existing native applications or banking platforms. This provided clients with maximum flexibility to apply their own branding and design system onto core Ecolytiq intelligence.

WORK PROCESS

My primary responsibility was to design and structure the SDK to prioritize developer experience (DX) and ultimate design flexibility.

1. Component Deconstruction: Working closely with the internal Product team, I dissected the core Ecolytiq product suite (ecoAware, ecoEngage, etc.) into discrete, reusable UI components . This included defining component states, necessary variables (e.g., color tokens, typography slots), and API props required for client integration.
2. API Coordination: I collaborated directly with the Ecolytiq Tech Team (Engineering) and consultants from Visa to define a seamless plug-and-play API. The goal was to ensure that a client's developer could pull the component and easily bind their transaction data and custom styling.
3. Documentation & Tooling: My design output went beyond visual mockups; it included detailed technical specifications and documentation to ensure that external client development teams could rapidly integrate and customize the components without needing extensive design consultation from us. This process transformed our solution from a packaged product into a versatile developer tool.

THE CHALLENGE

The standard ecolytiq solution was a full, white-labeled product: a complete, pre-designed module with the option for design and tech specifications customization and implementation done from our end. While fast to implement, this approach limited the banks' ability to fully customize the look, feel, and precise integration points within their own complex native flows.

The SDK project was created specifically to serve a high-tier client need: providing full autonomy over the integration experience.

• The Shift: We pivoted from delivering a fixed user experience to delivering a flexible developer experience (DX).
• The Goal: The aim was to offer clients the power to integrate our core features—like the carbon calculations or personalized insights—into their existing platform flows while using their own design systems and styling instead of our standard template.

This evolution posed a significant UX challenge: How do you design a set of powerful features to be invisible yet effective? We were no longer designing for the end-user directly, but for the developer as the primary user, ensuring the components were atomic, well-documented, and effortlessly customizable to match any client's brand guidelines.

These included consultation calls with design, tech and our sales team whenever the SDK solution was booked, on how they could implement it properly and setting scope/limitations specifically.

‍

The product was eventually developed on APIs via REACT, for both Android and iOS devices.

‍

DESIGN PROCESS

Picking components from the base flow of ecolytiq's whitelabel solution

Mini design system

The system is designed responsively, with focus on Desktop (Webapp) and Mobile implementations.

‍

Desktop

‍

‍

As the SDK only includes widget functionality, the full product suite is not available on the client side.

‍

Example implementation of the SDK for HSBC UK

Results and Impact

‍

Time to Market"Reduced average client integration time from 6 weeks (white-label) to 3 weeks (SDK)." (If true or a goal).

Client Success: Banks from the UK, Greece and the UAE have opted for the ecolytiq SDK option