Case Study · International Trade Finance # Harbor **From Figma to Webflow, with CMS, two languages and a custom working capital calculator.** Harbor is an international trade finance company focused on helping suppliers get paid sooner and giving buyers more time to pay. In 2023, Bipixels developed Harbor’s Webflow website from **supplied Figma designs**. The project covered 8+ pages, CMS setup for ongoing publishing, English and Spanish versions, and a working capital calculator built with custom JavaScript. - *Client* **Harbor** - *Industry* **International Trade Finance** - *Platform* **Webflow** - *Engagement* **2023** - *Webflow Build* **[View Harbor Webflow Build ↗](https://preview.webflow.com/preview/harbortrade-com?utm_medium=preview_link&utm_source=designer&utm_content=harbortrade-com&preview=0cccc9befa459ad5a6d42f5b78c2168f&workflow=preview)** ![WordPress theme selection illustration showing a website layout with design, performance, and responsive controls.](https://bipixels.com/wp-content/uploads/2026/10/how-to-choose-the-right-wordpress-theme.webp) ## The **Challenge** Harbor had its visual direction defined in Figma. The challenge was carrying that design into a responsive Webflow website that supported **content publishing, two languages and interactive functionality**. The team needed to publish news and articles, present its services in English and Spanish, and give visitors a way to explore their cash conversion cycle. These requirements needed to work within the supplied visual design and across desktop, tablet and mobile. ## Bipixels’ **Role** **Webflow Development** ### Figma to Webflow Development Bipixels translated Harbor’s approved Figma designs into a responsive Webflow website, maintaining the intended layouts, typography and visual details while building the content structure, multilingual setup and custom functionality. --- ### Webflow CMS Configured structured CMS collections for Harbor’s articles, news and recurring resource content, making ongoing publishing easier to manage. --- ### Responsive Development Adapted the supplied designs for desktop, tablet and mobile, keeping content and interactive elements usable across screen sizes. --- ### Multilingual Webflow Integrated Weglot to provide English and Spanish versions within a single Webflow build. --- ### Custom Calculator Development Built a JavaScript calculator connecting editable values and range controls to a dynamically updated cash conversion cycle. --- Learn more about Bipixels’ [Webflow Development](https://bipixels.com/services/webflow-development/) and [Website Development](https://bipixels.com/services/website-development/)services. Custom Functionality ## An Interactive Working **Capital Calculator** Harbor’s calculator gave visitors a way to explore how inventory, customer payments and supplier payments affected their **cash conversion cycle**. Bipixels built the functionality in custom JavaScript, with editable values and range controls for: --- ### Days Inventory · Days Receivable · Days Payable Changes updated the result immediately using: --- ### Cash Conversion Cycle = Days Inventory + Days Receivable − Days Payable Visitors could adjust the inputs and compare scenarios directly on the page, making the financial concept easier to explore alongside Harbor’s services. ![Harbor working capital calculator with adjustable inputs and a cash conversion cycle result.](https://bipixels.com/wp-content/uploads/2026/10/harbor-webflow-working-capital-calculator.webp) _Custom JavaScript calculator built by Bipixels to help visitors explore the cash conversion cycle._ ## Built for **Ongoing Publishing** Bipixels configured **Webflow CMS collections** for Harbor’s news, articles and recurring resource content. The team could add new entries through structured fields, with published content using the website’s established layouts. This supported ongoing publishing without rebuilding a page for every new article. ## Built for **English and Spanish** Bipixels integrated **Weglot with Webflow** to provide English and Spanish versions of the website. Both language versions used the same underlying Webflow build, allowing Harbor to present its services in either language without maintaining two separate websites. ## The **Technology** **Platform** Webflow --- **Supplied Designs** Figma --- **Content Management** Webflow CMS --- **Multilingual** Weglot --- **Custom Functionality** JavaScript --- **Languages** English · Spanish --- **Engagement** 2023 --- Explore [Bipixels Services](https://bipixels.com/services/) to see the wider technical capabilities behind our website work. ## The **Result** Harbor received a responsive Webflow website that brought its supplied designs, publishing requirements and custom functionality into one implementation. The completed build enabled: - **Ongoing publishing** through structured Webflow CMS collections. - **English and Spanish browsing** through the Weglot integration. - **Interactive exploration of the cash conversion cycle** through a custom JavaScript calculator. The website combined a consistent visual experience with practical tools for Harbor’s team and visitors. ## Client **Feedback** > “Asmaul is a talented developer who understood the assignment and delivered quality work. He was very thorough in completing the Webflow development to our specifications. Asmaul is in high demand given his skillset so the project took a bit longer than initially agreed to. We recommend Asmaul for any Webflow development.” > > **Bryan Maloney** > CEO & Co-founder, Harbor · Delray Beach, Florida, United States > *4.6 ★* · Upwork Review ## The **Work** ![Harbor Webflow website homepage developed from Figma](https://bipixels.com/wp-content/uploads/2026/10/harbor-webflow-website-homepage.webp) _Harbor — Webflow development from supplied Figma designs for an international trade finance company._ ![Harbor Webflow website mobile responsive layout](https://bipixels.com/wp-content/uploads/2026/10/harbor-responsive-webflow-mobile.webp) _Responsive implementation — Harbor’s Webflow website adapted for mobile screens._ ![Harbor Webflow mobile navigation menu](https://bipixels.com/wp-content/uploads/2026/10/harbor-responsive-webflow-mobile-menu.webp) _Responsive navigation — Harbor’s Webflow menu adapted for mobile screens._ ![Harbor working capital calculator on mobile](https://bipixels.com/wp-content/uploads/2026/10/harbor-working-capital-calculato-mobile.webp) _Custom working capital calculator — interactive cash conversion cycle functionality built with JavaScript._ ![Harbor custom working capital calculator](https://bipixels.com/wp-content/uploads/2026/10/harbor-working-capital-calculator.webp) _Working capital calculator — custom JavaScript functionality for exploring Harbor’s cash conversion cycle._ ![Harbor Buyer Solutions page developed in Webflow](https://bipixels.com/wp-content/uploads/2026/10/harbor-buyer-solutions-webflow.webp) _Buyer Solutions — Webflow implementation of Harbor’s trade finance offering for buyers._ ![Harbor Supplier Solutions page developed in Webflow](https://bipixels.com/wp-content/uploads/2026/10/harbor-supplier-solutions-webflow.webp) _Supplier Solutions — Webflow development for Harbor’s supplier finance offering._ ![Harbor About page developed in Webflow](https://bipixels.com/wp-content/uploads/2026/10/harbor-about-webflow.webp) _About Harbor — translating the supplied Figma design into a responsive Webflow page._ *The original Harbor website is no longer publicly available. The screenshots and Webflow preview document the build delivered in 2023.* ## **More** Work [View all work →](https://bipixels.com/work/) ### Chekin ![Chekin website development](https://bipixels.com/wp-content/uploads/2026/09/bipixels-selected-work-chekin-1024x640.webp) _Chekin — multilingual WordPress website development_ A technical website partnership **since 2018**, spanning WordPress development, multilingual delivery, product integrations, performance, and ongoing improvements. WordPress · Development · Performance [View Chekin case study →](https://bipixels.com/work/chekin/) ### Kiss Me in Paris ![Kiss Me in Paris website](https://bipixels.com/wp-content/uploads/2026/10/bipixels-selected-work-kiss-me-in-paris-1024x640.webp) Website development, performance improvements, and ongoing technical support **since 2023** for a luxury wedding and proposal planning brand in Paris. WordPress · UX/UI · Development · Performance [View Kiss Me in Paris case study →](https://bipixels.com/work/kiss-me-in-paris/) ### Events in Paris ![Events in Paris website](https://bipixels.com/wp-content/uploads/2026/09/bipixels-selected-work-events-in-paris-1024x590.webp) Multilingual WordPress website design and development for an international Paris events business, achieving **99/100 PageSpeed performance on mobile and desktop.** WordPress · UX/UI · Development · Performance [View Events in Paris case study →](https://bipixels.com/work/events-in-paris/) Looking for a similar solution? ## Let’s Build It Right. [Discuss your website →](https://bipixels.com/contact/)