Follow us on Facebook
Follow us on Facebook

UX/UI Design and Web Development of Turri Creadores de Origen Website

Turri Creadores de Origen is a multisided marketplace platform that facilitates the selling of sustainable, origin-based products while revealing the human stories behind them.

By combining digital design, storytelling, and community values, it transforms commerce into connection — turning local authenticity into a shared experience of trust and meaning.

Case Description

Context

Many rural producers in Costa Rica craft exceptional products but struggle to reach markets that value authenticity and sustainability. Their stories often remain invisible, lost between intermediaries and fragmented communication.
Turri Creadores de Origen emerged to transform this gap into an opportunity — building a digital marketplace that connects producers and conscious consumers through storytelling, design, and technology. The project redefines commerce as a channel for cultural preservation and shared growth.

Objectives

  1. Integrate storytelling and commerce into a cohesive user flow
  2. Build a modular CMS structure ready for marketplace expansion
  3. Design a user experience rooted in trust and cultural authenticity
  4. Empower producers to manage and update their own profiles easily
  5. Ensure a performant, responsive, and visually consistent interface
  6. Create a foundation for data analytics and AI-assisted storytelling

Process

    Steps: Research

    1. Conducted in-depth interviews with producers and potential buyers to uncover challenges, motivations, and values.
    2. Mapped user journeys to visualize emotional and functional touchpoints throughout the buying process.
    3. Analyzed forums and online communities discussing sustainable and origin-based products to identify unmet expectations.
    4. Benchmarked online marketplaces and storytelling platforms to assess how others balance commerce and narrative.
    5. Synthesized insights to define user needs, goals, and behavioral patterns that informed design decisions.

    Output

    • Revealed that authentic storytelling drives engagement and trust more effectively than product descriptions.
    • Identified a gap in digital representation for small producers — users want transparency, but producers lack accessible tools.
    • Learned that buying decisions are emotionally influenced by perceived human connection and story credibility.
    • Understood how e-commerce and sustainability platforms present information

    Steps: Information Architecture Design

    1. Defined the core entities — Producer, Product, Story, and Region — and identified their attributes.
    2. Designed taxonomies and relational structures to mirror real-world connections between origin, process, and product.
    3. Created a sitemap and navigation flow that enables intuitive discovery from story to product and vice versa.
    4. Structured the content model and field relationships to ensure scalability and flexibility for future growth.

    Output

    • Recognized that users naturally navigate by stories and people, not by product categories alone.
    • Established a modular content model capable of supporting future marketplace and data integrations.
    • Defined a navigation hierarchy that mirrors how users think and how producers wish to be represented.

    Steps: UX / UI Design

    1. Created moodboards inspired by natural textures, materials, and tones from rural Costa Rica to define the emotional palette.
    2. Developed a token-based design system to ensure scalability and visual consistency across components.
    3. Designed wireframes and interaction prototypes to validate flow, hierarchy, and usability before visual refinement.
    4. Built functional prototypes to test responsive behavior and interaction feedback.
    5. Defined the Page Content Specification to guide copywriting, visual production, and content coherence.

    Output

    • Created a design system to maintain consistent spacing, rhythm, and hierarchy to support comprehension and storytelling flow.
    • Created a page content specification document, establishing the purpose of each page and the recipes to communicate with users, which outlines the role of each section in the storytelling.
    • Created wireframes to sketch the storytelling and define constraints for copywriting
    • Created a functional prototype to test the user flow and the blueprint for frontend development.

    Steps: Copy Writing

    1. Applied the established brand voice and tone — clear, warm, and trustworthy — to all written content.
    2. Followed the Page Content Specification and prototype guidelines to structure copy across all entities, templates, and taxonomies.
    3. Identified and refined **communication formulas** that deliver the core brand message consistently (e.g., purpose → process → value).
    4. Wrote headlines, ledes, calls to action, and body text aligned with UX flow and emotional pacing.
    5. Integrated microcopy to enhance usability, accessibility, and natural interaction within forms, buttons, and contextual messages.

    Output

    • Delivered cohesive content reflecting the brand identity, tone, and emotional flow across all pages.
    • Established reusable message formulas that maintain clarity and resonance for future content.
    • Ensured that tone and structure aligned with UX intent, improving readability and engagement.
    • Created messages to fulfill the purpose of each page and section according to the page content specification made in the UX process.

    Steps: Web Development

    1. Configured the technical infrastructure, including hosting environment, DNS, and database setup to ensure stability and scalability.
    2. Structured Custom Post Types, Custom Fields, and relational logic to model Producers, Products, Stories, and Regions.
    3. Developed modular front-end components that dynamically populate content and maintain consistent layouts.
    4. Created static landing pages for storytelling sections while integrating shared layout elements for coherence.
    5. Implemented dynamic loops connecting stories, producers, and products for seamless navigation.
    6. ptimized performance, accessibility, SEO, and responsive behavior across devices.
    7. Installed and configured analytics tracking to measure engagement and user flow.

    Output

    • Delivered a flexible CMS architecture that allows expansion without altering the core structure.
    • Established data relationships to allow for dynamic content generation according to entities, taxonomies, and their attributes.
    • Developed dynamic content components that adapt to new templates and entities seamlessly.
    • Built a technical foundation for analytics, reporting, and automation pipelines.

Results

Facing the challenge of connecting rural producers with conscious consumers through authentic narratives, we designed a digital marketplace that prioritized storytelling over pure transactions. This approach revealed that fostering emotional connections significantly boosts user engagement and community building, transforming commerce into a meaningful cultural exchange. This experience underscored the power of content-first design in creating impactful user experiences.

Main TakeAway

  • Successfully launched a fully functional Turri Creadores de Origen website, establishing a multisided marketplace that effectively connects producers and conscious consumers through rich storytelling and a user-centric interface.
  • Delivered a scalable design system and modular CMS architecture, providing a robust foundation for easy content management, future feature expansion, and long-term platform adaptability.
  • Established comprehensive Page Content Specifications and Editorial Guidelines, ensuring a consistent brand voice and messaging across the entire digital platform.