Client
Laboratorios Ordesa
Year
2020
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.
