Web Design / Art Direction / Motion Design / SEO Strategy
Empack — A Scalable Digital System for a Multi-Brand Ecosystem
A shared digital architecture engineered for Empack, Troubadour, and Walker—three distinct brands operating under the Empack Graphics umbrella brand, united by a seamless navigation framework while preserving their individual commercial offerings and visual identities.
Client
Empack Graphics
Agency
Canvas
Industry
Brand implementation, packaging, and creative production
Location
Monterrey, México
Year
2023
Time frame
6 months
Role
UI & Motion Designer / SEO Strategy
Platforms
Web / CMS
Tools
Figma / FigJam / After Effects
Scope
Art direction, web design, responsive UI, design system, information architecture, bilingual SEO research, interactive prototyping, and motion studies
Deliverables
Visual research
SEO strategy & sitemap
Art direction
Design system
Responsive interface design
Interactive prototypes
Motion studies
Presentation animations
Project overview
Empack Graphics serves as the umbrella brand for a specialized ecosystem comprising three complementary brands: Empack (focused on brand implementation and packaging), Troubadour (dedicated to creative services and scalable production), and Walker (specializing in CGI and visual production).
The business challenge was not merely designing three separate websites, nor forcing distinct entities into a generic corporate template. The objective was to build a shared digital system capable of projecting the group's collective strength while empowering each brand to speak authentically to its specific target audience. The solution brought together bilingual SEO research, scalable information architecture, responsive UI design, and functional motion. This portfolio selection focuses primarily on the experience engineered for Empack, while featuring a visual application of how the same shared framework flexes for Troubadour's creative services. Walker is an integral part of the group's shared navigation architecture, though not represented by an individual screen in this curated series.
One Connected Architecture for Three Brands
To help users navigate the group's scope without friction, the interface introduces a unified header navigation. This shared element acts as a structural anchor, allowing visitors to move seamlessly between Empack, Troubadour, and Walker—reinforcing the overarching brand ecosystem while allowing each entity to shine through its specialized content.
Empack: Scale and Execution Capability
The Empack homepage was designed around a clear commercial directive: projecting operational capacity and technical reliability to global brands. A restrained dark interface acts as a high-contrast, neutral stage, allowing the color, materiality, and physical presence of the packaging projects to command attention. Large-scale typography establishes an immediate, authoritative reading hierarchy.
Structuring a Technical, Modular Service Offering
Empack's capabilities span intricate workflows: print production, artwork development, color management, structural packaging, and pre-press technology. The UX challenge lay in translating a highly technical service catalog into a modular, scannable, and visually intuitive content model. The architecture guides prospective clients from high-level service overviews down to granular technical specifications.
Responsive UI Built from the System Level
Desktop and mobile layouts were approached not as primary and secondary adaptations, but as two native expressions of a unified digital ecosystem. The design system enforced strict rules for grids, spacing tokens, typographic scaling, and component behaviors—ensuring the experience retains its premium character and structural clarity across every viewport.
Motion Design Driven by Storytelling
Movement within the interface was treated as a functional UX tool rather than mere decoration. Motion studies were conceived to establish visual hierarchy, guide user orientation, and create seamless transitions between content blocks. The animations add a layer of sophistication, reinforcing the perception of a technologically forward-thinking brand.
Project Pages Built as Commercial Evidence
Every case study within the platform is structured as a sales enablement tool. Rather than passive image galleries, project pages articulate the business challenge, the technical intervention, and the final executed reality.
SEO and Infrastructure for Organic Growth
A digital system must be discoverable to drive business value. The platform's foundation was built upon bilingual SEO research (Es/En), directly informing the sitemap architecture, URL hierarchy, and page-level content strategy. This infrastructure ensures long-term organic visibility for brand implementation queries while supporting talent acquisition via institutional pages.
Troubadour: Same Infrastructure, Distinct Creative Voice
Troubadour represents the ecosystem's specialized arm for creative services and scalable production. Its inclusion in the portfolio highlights the adaptability of the design system: leveraging the exact same architectural foundation and navigation logic, Troubadour shifts into a lighter, editorial visual language tailored to its creative agency positioning.
Design note
The visual system achieves a precise balance between technical rigor and creative energy. By maintaining a restrained UI palette, the interface allows the materiality, color, and texture of the featured packaging brands to take center stage. More than standardization, this architecture provides Empack, Troubadour, and Walker with a resilient digital foundation engineered to scale with their business.
Acknowledgements
Project developed in collaboration with Canvas. Art Direction & Design — Giovanni Vidaurri and Chan . Web Development & CMS — Juan Fuentes .
Share on Linkedin 
Share on Threads 
Share on X 
Share on Facebook Link copied
