EcoPro México
EcoPro is a 100% Mexican manufacturer of industrial pallets and urban furniture made from high-quality recycled HDPE. The project involved designing and building their corporate website from scratch on WordPress with Divi, solving a complex product catalog serving two very distinct audiences: heavy industry and municipal urbanism.
The scope included information architecture, full UI design in Figma, Divi development, bilingual implementation (ES/EN), and on-page SEO optimization. The site was delivered in approximately 45 days.
Project Phases
"An industrial catalog with two completely different product universes, presented as a single coherent experience."
EcoPro operates in two very different worlds: heavy industry (technical pallets for warehouses, plants, and logistics) and urbanism (furniture for plazas, hotels, and playgrounds). The challenge was building a navigation architecture that let each type of user find their solution without friction, without the site feeling fragmented or overwhelming.
The solution was to design a menu structure organized by audience and use case, backed by a homepage that acts as a smart distributor between both product lines while communicating the brand's sustainable edge.
How I
built it
A six-step process that prioritized structure over visuals, and systems over individual pages.
Discovery & audience definition
Client meetings to map the two buyer profiles: the industrial logistics manager and the municipal architect or urban planner. Their needs, decision criteria, and sector-specific language were identified for each.
Information architecture
Full sitemap design: product hierarchy, industry-specific solution pages, expertise pages, and bilingual structure. The navigation menu was the most refined artifact of this phase, requiring several review rounds with the client.
UI design system in Figma
Built the palette (institutional green + neutrals), typography, base components (product cards, benefit sections, CTAs), and a style guide to ensure consistency across all site pages.
WordPress + Divi development
Page-by-page development in Divi, using Global Presets as a token system to maintain visual consistency. Reusable modules were set up for each page type: product, industry solution, and institutional pages.
On-page SEO & performance
H1s, meta descriptions, and heading structures defined for every page. Image optimization, lazy loading configuration, and cache plugin setup (WP Rocket) to improve Core Web Vitals scores.
Bilingual implementation (ES / EN)
WPML configuration with language-specific URLs and content adaptation for the English version, targeting the international B2B market EcoPro aims to reach.
Tools & Stack
WordPress + Divi as the development foundation, Figma for UI design, and a performance- and SEO-focused plugin stack.
Homepage in desktop view
Main navigation architecture
Category page: Industrial Pallets
Responsive mobile view
Design Decisions
The three choices that had the greatest impact on the final outcome.
Menu organized by business line, not by product type
A logistics manager and a municipal architect don't navigate the same way. Splitting the menu into Industry and Urbanism as primary axes reduced the friction of finding the right product and shortened the path to the quote CTA.
Photography as the lead, design as support
EcoPro's products are their strongest visual differentiator. The UI system was built to give product images maximum visual weight, using typography and color as framing, not as focal points.
Heading structure defined at design stage, not at development
H1s, H2s, and meta descriptions were defined in Figma during the design phase, not as a final task. This gave every page a clear search intent from day one, avoiding content rewrites at the end of development.
What I
learned
A B2B project with a complex catalog teaches more about structure than about aesthetics.
Information architecture is the most important design decision
In B2B projects with complex catalogs, the biggest impact doesn't come from visuals but from how information is organized. The sitemap and menu structure took more time than any individual page design, and it was the decision that shaped the final experience the most.
Divi needs its own system before you open the builder
Working in Divi without a pre-defined design system creates inconsistencies that are hard to fix in production. Using Figma as the design system and Divi's Global Presets as tokens was the technical decision that saved the most review time across 30+ pages.
On-page SEO is part of content design, not a final step
Integrating heading structure and search intent into the design phase, rather than as a closing task, keeps content coherent from day one. On this project it avoided rewriting copy on over 15 pages at the end of development.