.jpg)
-min.webp)
CORTUBAI - Website Design & Webflow Development
Project Overview
CORTUBAI is a Portuguese company specializing in the assembly, maintenance, and repair of hydraulic kits and components. With steady growth, it became a national reference in the hydraulic systems sector.
Despite its strong industry presence, the company had no digital footprint. I was responsible for designing and launching its first website — a fully responsive, accessible platform to present services, products, and the company’s long-standing reputation.
The goal was to create a clear and trustworthy online presence that could support both client acquisition and long-term business growth.
My Role
As the sole designer and developer, I led the project from concept to launch.
Main responsibilities:
Client alignment and project scoping;
Competitive research and structure planning;
UX/UI design in Figma;
Development and CMS setup in Webflow;
SEO, domain configuration, and quality assurance;
Ongoing content updates and publication.
This was a full-cycle project, where I had to combine strategic thinking, design execution, and technical implementation.
Goals
Given the absence of an existing digital structure, the site had to serve as the company's digital foundation.
My goal was not only to create a website, but to build a reliable tool that reflected Cortubai’s professional standards and could scale over time.
Core goals:
Establish a clear and accessible digital presence;
Showcase the company’s product categories and services;
Build user trust through structure and clarity;
Enable future marketing and SEO efforts;
Simplify content updates through CMS collections.
Research & Planning
Since there were no previous digital benchmarks for the brand or analytics or user feedback to work with, my research focused on competitor benchmarking to understand how similar companies structure their sites.
This helped me identify what users likely expect (e.g., product categories in the main nav, contact above the fold), and where I could innovate — such as providing more structured technical information and cleaner tables.
My goal wasn’t to reinvent, but to make Cortubai’s first digital experience intuitive and trustworthy.
I conducted extensive competitor analysis to:
Identify common layouts and user expectations;
Ensure navigation, contact, and product pages followed recognizable patterns;
Spot opportunities to differentiate — such as better product information clarity.
I worked closely with the client to define the necessary pages and product categories, ensuring the structure aligned with how clients typically approached the company offline.
Content Architecture
I created a custom sitemap with a simple, expandable structure:
Static pages (Home, About Us, Services, Contact);
Dynamic product category pages (via Webflow CMS).
Product content was mapped out in advance with placeholders, allowing the structure to be implemented before all images and descriptions were available — speeding up delivery without blocking development.
Although only the top two levels of the sitemap are shown here for clarity, the full content structure includes a detailed system of product categories and subcategories.
Several product groups contain nested levels of organization — such as subcategories under “Accessories” or “Hydraulic Fittings” — designed to reflect how users search for technical components.
This complex information architecture was carefully planned to ensure smooth and intuitive navigation, even as the catalogue grows.
All product-related pages are dynamic, built using Webflow CMS collections, allowing for scalable content management and consistent layout updates without requiring additional design work.
The structure supports both current needs and future expansion, while keeping the user experience clear and accessible.
Design Approach
The company already had a logo and defined colors, so I skipped low-fidelity wireframes and worked directly in high-fidelity using Figma.
Instead of prototyping in Figma, I used it mainly as a layout tool and implemented the interactions and structure directly in Webflow to save time and iterate faster.
My goal was to reflect Cortubai’s identity: practical, technical, and professional.
The design focused on:
Simple, functional layout to improve clarity;
Strong contrast and readable typography for accessibility;
Visual hierarchy to guide the user naturally;
Readability and accessibility across devices;
Predictable placement of elements (nav, CTA, footer) to reduce friction.
Colors
Primary
#F0F0F0
Secondary
#00751F0
Tertiary
#893652
Text
#1A1B1F
Text
#FFFFFF
Typography
This is heading text
H1 - 48px
This is heading text
H2 - 44px
This is heading text
H3 -18px
This is heading text
H4 - 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.
All P - 16px
Buttons
Icons
.svg)
A simple design system was created to ensure consistency across all screens, respecting the company's visual identity while improving usability.
The following mockups were created in Figma and reflect key design decisions made prior to implementation in Webflow.
Development & Implementation
The website was fully developed in Webflow. I created:
Static informational pages;
Dynamic CMS-based product pages;
Responsive layouts for all screen sizes;
Contact form and search bar;
Internal navigation linking all pages.
A common issue I noticed in competitor websites was the use of external PDFs to display technical product specifications — often requiring users to click through and open new tabs just to view key information.
At Cortubai, I took a different approach: I built structured product tables directly in Webflow using dynamic CMS fields.
This allowed product data to be updated centrally — simply by modifying the documents linked to the CMS.
Webflow then automatically updates the tables across the site, making maintenance faster and more efficient.This not only improved usability and scannability for users, but also gave the business more control and flexibility in keeping product information current.
This not only improved usability and scannability for users, but also gave the business more control and flexibility in keeping product information current.
I also configured SEO tags, set up the custom domain, and tested performance across browsers and devices.
Product categories were structured for visual clarity and quick access. The responsive layout keeps usability intact across all devices.
Instead of linking to external PDF specs, key product data was embedded using custom HTML, making it easier to update and improving scannability.
The services section was structured in expandable blocks to allow scanning on mobile without overwhelming the user.
These informational pages were kept minimal, focused on readability and ease of navigation, especially on mobile.
A simple search function was implemented using native Webflow CMS indexing, improving content discoverability for technical users.
The "About Us" page highlights the company’s history and values with a clean, structured layout that enhances readability and builds credibility.
-min.webp)
Results
Shortly after launch, Cortubai received a product inquiry from a new customer who found the site via online search — proving immediate value even without an online store.
The website now serves as the central digital point of contact and supports ongoing marketing efforts.
Internally, the company now has a professional digital presence they can share with partners and use as a base for future digital initiatives.
Reflection
This project helped me develop my ability to adapt UX/UI principles to real-world business needs, without relying on formal user research or a team.
I learned how to make informed design decisions, work with technical tools like Webflow and CMS, and deliver a full web solution aligned with business goals.
Working with real constraints, content gaps, and evolving inputs forced me to stay flexible, focused, and solution-oriented.
It also strengthened my ability to communicate with stakeholders, make strategic design decisions under uncertainty, and deliver a complete, scalable product that supports long-term growth.
