# 3Devs — Art Direction, Modular Web System & AI-Assisted Visual Production for Commerce Technology > Case study: Art direction, modular design system, AI visual production, and UI design for 3Devs, a Mexico City commerce technology company. Web Design / Art Direction / Motion Design / AI Visual Production Digital ecosystem design, art direction, and modular web architecture for 3Devs: a Mexico City-based commerce technology company focused on scalable eCommerce, marketplace operations, catalog governance, and logistics workflows across LATAM and the US. Repositioning from 3Dadv into a commerce technology firm — modular web system, AI-directed imagery, and visual framing for the Agent Model and proprietary platforms Seller Center, Nova Content Commerce, and ShippHub. - **Client:** 3Devs (formerly 3Dadv) - **Industry:** Commerce Technology / eCommerce - **Location:** Mexico City, Mexico - **Year:** 2026 - **Time frame:** 1 month - **Budget:** $3K USD - **Role:** Art Director / Senior Web & Motion Designer - **Platforms:** Responsive Website - **Tools:** Figma / After Effects / Midjourney / Photoshop / Illustrator - **Deliverables:** Art Direction - **:** Website Design - **:** Design System - **:** Responsive Screens - **:** Reusable Templates - **:** Interactive Prototypes - **:** Module Animations - **:** Micro-interactions - **:** AI Visual Direction - **:** Project Mockups ## Overview 3Devs faced a critical strategic pivot: evolving from its legacy identity (3Dadv) to break away from the perception of a conventional development agency or generic technical staffing provider. The business objective was to establish itself as a premier commerce technology company capable of architecting complex digital operations, integrating middleware, and deploying proprietary software. The UX and design challenge lay in clearly communicating two sophisticated pillars: their highly structured Agent Model (specialized commerce talent backed by senior architects and delivery managers) and their proprietary software suite (Seller Center, Nova Content Commerce, and ShippHub). I designed a modular visual system combining bold, condensed typography (Finlandica), warm editorial surfaces, dark technical environments, and cinematic imagery. Every AI-generated visual asset was rigorously art-directed, edited, and refined to maintain impeccable executive consistency across the website, responsive screens, product mockups, and motion pieces. ## 01 Art Direction & Corporate Positioning To separate 3Devs from typical software agency aesthetics, I established a visual language projecting technical authority, operational precision, and corporate maturity. The core palette leverages high-contrast black, yellow, and white, utilizing yellow strictly as an intentional action accent rather than overwhelming background noise. • Typographic Hierarchy: Employing the Finlandica typeface for headlines, introducing a bold, condensed, and technical character that enforces clear structural hierarchy across digital layouts. • Visual Rhythm: Seamlessly transitioning from dark, high-impact technical environments in the Hero and platform sections to clean white and grey editorial surfaces for optimal readability in complex service descriptions. ## 02 Modular Web System & Reusable Templates Rather than designing one-off, isolated pages, I built a scalable, component-based responsive design system supported by seven reusable page templates (Home, Service Hubs, Service Detail, Agent Model, Platform Detail, Case Studies, and Insights). • Scannable Architecture: Designing modular card grids to articulate their core technical offerings: Commerce Development & Support, Architecture & Technical Discovery, Integrations & Middleware, Marketplace Operations, and Support & Optimization. • Agent Model Differentiation: Architecting visual comparison tables and structural diagrams that clearly explain why specialized talent backed by senior CTOs and agile methodologies outperforms standard staffing or freelance hires. ## 03 AI Visual Production & Product Framing Communicating abstract commerce concepts—such as middleware orchestration, multi-carrier logistics, AI-governed catalogs, and omnichannel workflows—required a bespoke visual approach. • AI Art Direction (Midjourney): Generating, editing, and color-grading abstract tech environments and cinematic imagery in Photoshop and Illustrator, eliminating the generic, uncurated look of raw AI output. • Proprietary IP Mockups: Designing polished interface containers and visual mockups for their three flagship platforms: Seller Center (marketplace and seller governance), Nova Content Commerce (AI-driven catalog enrichment), and ShippHub (multi-carrier logistics orchestration). ## 04 Motion Design, Prototyping & Micro-interactions Movement was deployed as a functional UX tool to make the speed, reliability, and precision of 3Devs' operations tangible. Through interactive Figma prototypes and After Effects motion studies, I established page transitions, module entrance animations, card hover states, and dynamic micro-interactions that reinforce user orientation and conversion. ## 05 Business Outcome & Market Readiness The cohesive digital ecosystem established 3Devs as an indispensable commerce technology partner across Mexico and LATAM, perfectly positioning the brand for its upcoming US market expansion. The platform effectively drives high-intent commercial inquiries from CTOs, retail leaders, and partner agencies while providing the internal team with a living, scalable design system. 3Devs defined the business positioning, sitemap architecture, copywriting, product capabilities, and web development. My contribution focused specifically on art direction, website design, responsive systems, AI visual asset production, interactive prototyping, and motion direction. Website: https://3devs.mx/ HTML: https://www.giovidaurri.com/case-studies/3devs/