Client
Year
Role
Duration
7 months
Agency
Runroom
I led the creation of a scalable and versatile design system, defining style guides, designing reusable components, directing photographic style, and managing handoff and QA for seamless, cross-device implementation.
About the client
Laboratorios Ordesa, based in Spain, is a leader in infant nutrition and health supplements with over 80 years of experience. They develop innovative products for children’s and adults’ well-being, with a strong presence in over 30 countries across Europe, Asia, the Americas, and the Middle East.
The challenge
The design system needed to accommodate multiple brands, ensuring efficiency with shared components while keeping each brand’s look unique.
The websites had to support multiple languages, including RTL layouts for Arabic, which required extensive typography testing to ensure legibility and support for various scripts and glyphs.
On the UX side, we developed a private area with all its casuistics, along with a three-level mega menu and advanced search functionality, all designed to be fully responsive. Developing within Drupal introduced creative limitations, requiring adaptable yet flexible modules.
The process
The project followed Agile methodology, working in a multidisciplinary team with a product owner, front-end and back-end developers, and myself as a hybrid UX/UI designer. At times, we used double sprints to meet client milestones, temporarily expanding the team to accelerate delivery.
To guide our design decisions, we conducted a comprehensive benchmark analysis, evaluating competitors and market trends to spot opportunities for innovation.
I conducted extensive typography tests. For Latin-based languages, I chose Geomanist for its clean, geometric style. For non-Latin scripts like Arabic and Chinese, I used Noto Sans, which harmonizes across multiple languages and supports the necessary glyphs.
Next, I defined style guides for each brand, creating web-friendly color palettes from their logos. Each site was designed using primary, secondary, and neutral colors, ensuring optimal contrast, legibility, and consistency across screens.
Before final design, I created wireframes for all key components, establishing structure and flow. These wireframes guided the final designs, ensuring flexibility and reusability through atomic design principles.
Each component was prototyped in Figma, ensuring it aligned with the functionality required by the Drupal CMS.
Photographic direction was another critical element. We chose imagery that evoked emotion and human connection, aligning with the core values of each brand. Images were carefully optimized for web performance to maintain responsive design across all devices.
For development, I managed a clear handoff, providing assets and documentation. Finally, we conducted rigorous QA testing to ensure responsiveness and functionality across all devices, browsers, and languages.
The solution
The result was a modular design system that allowed each brand to express its unique identity while sharing a common visual language. The system was built to be scalable, with reusable components that were flexible enough to adapt to any brand’s needs. This ensured that new brands could be integrated efficiently, saving time and costs in future implementations.
Conclusion
Despite the technical limitations of Drupal and the complexity of managing multiple languages and brand styles, the design system for Laboratorios Ordesa was a success. It enabled quick deployment of new brand websites, reducing development time and ensuring consistent UX/UI across platforms.
The project met the client’s needs for flexibility, scalability, and efficiency, delivering long-term value through its adaptable structure. This system ensures that future brands can easily be integrated while maintaining a cohesive experience.
