Trace Storytelling Interface
Transforming Supply Chain Data into Consumer-Driven Stories
(An open-source initiative by Fairfood)
Project Overview
The Trace Storytelling Interface is an open-source platform that helps brands share verified product journeys — from origin to impact — with end consumers. Designed to make traceability data approachable and engaging, the interface converts backend information into modular, visual narratives that can live on websites or be accessed via QR codes.
Live documentation: docs.fairfood.org/storytelling_interface
My Role
• UI/UX Designer
• End-to-end ownership of design: research, user flow mapping, wireframes, visual design, prototyping
• Delivered a flexible interface system supporting visual theming, mobile optimization, and accessibility
Design Goals
• Simplify complex supply chain data into clear, consumer-facing stories
• Allow for brand personalization without code changes
• Create a seamless mobile-first experience for QR-based product storytelling
• Keep the platform open-source and modular for future growth
User Journey
Users typically arrive via a product QR code or shared link, leading them through:
1. Cover Area – Brand identity, hero image, product/project name
2. Interactive Map – Visualizes origin and journey of product components
3. Impact Activities – Highlights sustainability or community efforts
4. Media Content – Farmer stories, quotes, and visuals
5. Claims & Certifications – Shows what makes the product responsible
Each section is optional, offering flexibility in how much detail a brand wants to share.
Theming & Brand Integration
The interface was designed to be visually neutral by default — but themeable for any brand without development effort.
What’s customizable:
• Color accents (buttons, highlights, visual elements)
• Hero/cover images
• Brand logos and website URLs
• CTA button style
• Content configuration per section
Typography is not themeable, to preserve layout stability and readability across diverse content types. The chosen typeface (Moderat) balances clarity and modern appeal across screens.
Reference: Theming documentation – Storytelling Interface
Visual & Interaction Design
• Modular layout: Stackable content blocks for flexibility
• Mobile-first UI: Optimized for scan-and-scroll experiences
• Clean visual language: Focus on legibility, clarity, and flow
• Brand-safe color palette: Allows identity without clashing with layout
Every design decision prioritized user comprehension and emotional connection — even for users encountering supply chain storytelling for the first time.
Wireframing & Prototyping
Wireframes established the content structure and hierarchy, especially for mobile behavior and modular flexibility. Prototypes in Figma helped simulate full story flows, theming options, and responsive states.
Impact & Results
• Enabled brands to launch product stories quickly, without engineering
• Encouraged consumer trust through traceability and storytelling
• Supported dozens of stories using real-time Trace platform data
• Adapted successfully across categories like coffee, cocoa, spices, and fresh produce
Brands appreciated the balance of structure and flexibility — giving them storytelling power without compromising design quality.
Explore more:
Storytelling Interface – Fairfood Docs
Conclusion
The Trace Storytelling Interface transforms data into narrative. By focusing on modular UI, brand-aligned theming, and clear, accessible design, we created a tool that connects supply chain transparency with real consumer engagement — all through the lens of thoughtful UX.