{ "site": { "title": "roberta valli - portfolio" }, "intro": { "name": "roberta valli", "description": "Interaction and visual designer focused on complex digital systems.", "descriptionLines": [ "", "Interaction and visual designer focused on complex digital systems." ] }, "projectsIntro": { "paragraphs": [ "Hello!", "I'm Roberta, an interaction designer based between Italy (Como) and Switzerland (Mendrisio), currently completing a Master’s degree in Interaction Design at SUPSI in Mendrisio, following a Bachelor’s degree in Visual Communication. My work focuses on digital systems for exploring complex information, with a particular interest in user experience design, user research and data information." ] }, "about": { "bio": [ "I'm an interaction designer based between Italy (Como) and Switzerland (Mendrisio), currently completing a Master’s degree in Interaction Design at SUPSI in Mendrisio, following a Bachelor’s degree in Visual Communication. ", "My practice focuses on the design of digital systems for exploring complex information, combining interaction design, visual systems, data visualization, and computational processes. I’m interested in how interfaces, datasets, and visual structures can support new ways of navigating, interpreting, and understanding information. Across my projects, I work with archives, visual identities, interfaces, and interactive prototypes, exploring the relationship between structure, behavior, and visual language. My work often investigates how design can reveal hidden connections within images, texts, and datasets, transforming information into more exploratory and meaningful experiences." ], "contact": [ "@robertavallii", "hello@robertavalli.ch", "www.linkedin.com/in/roberta-valli-26290a21b" ], "education": [ { "title": "Master of Arts in Interaction Design", "lines": [ "SUPSI DACD, Mendrisio (CH)", "sep. 2025 - Present (Expected graduation: 2027)" ] }, { "title": "Bachelor of Arts in Visual Communication", "lines": [ "SUPSI DACD, Mendrisio (CH)", "2022 - 2026", "Final grade: 5.5/6" ] }, { "title": "Diploma in Graphic & Communication", "lines": [ "Don L. Milani, Tradate (IT)", "2016 - 2021", "Final grade: 95/100" ] } ], "experience": [ { "title": "Studio JUMA", "lines": [ "Balerna (CH)", "Internship – Content Creation & Motion Design", "February 2025 - May 2025" ] }, { "title": "TML srl", "lines": [ "Bulgorello, Como (IT)", "Summer job – Logistics", "July 2024" ] }, { "title": "Artsana S.P.A", "lines": [ "Grandate, Como (IT)", "Internship – Social media content, web assets, and catalog design", "November 2021 - September 2022" ] } ], "focusAreas": [ { "title": "Interaction Systems", "description": "UX/UI systems, prototyping, responsive experiences, interface aesthetics" }, { "title": "Data & Visualisation", "description": "Knowledge representation, semantic clustering, generative workflows" }, { "title": "Research & Narrative Systems", "description": "User research, speculative design, archival research, worldbuilding" }, { "title": "Physical & Computational Systems", "description": "Creative coding, physical computing, interactive prototyping" } ], "tools": [ "Figma", "Adobe Suite", "HTML/CSS/JS", "Python", "D3.js", "Arduino" ] }, "projects": [ { "slug": "mnemosine", "title": "Mnemosine", "type": "Knowledge visualization", "year": "2025", "shortDescription": "A generous interface for exploring photographic archives through visual, textual, and AI-assisted connections.", "previewImage": "image/mnemosine/progetto/img_00.jpg", "previewHoverImage": { "src": "image/mnemosine/miniature_t.png", "background": "var(--black)" }, "detail": { "type": "Bachelor Thesis", "focusArea": "Knowledge visualization, archival interfaces, semantic exploration", "awards": "UX Design Awards Nominee, SUPSI Critics’ Award", "contributors": "Roberta Valli", "heroMedia": "image/mnemosine/mnemosine_video.mp4", "blocks": [ { "type": "statement", "label": "type of solution", "text": "Mnemosine is a digital platform for exploring photographic and documentary archives through visual, narrative, and semantic connections. Developed from the Roberto Donetta Archive, it redefines archival consultation as an open, exploratory system rather than a search-based tool." }, { "type": "copy", "heading": "research", "blocks": [ { "title": "challenge", "text": "Most digital archives still replicate the logic of physical catalogues: search bars, lists, and rigid metadata structures. While effective for targeted queries, these systems limit exploration, serendipity, and interpretation. Users are required to know what they are looking for, reducing the archive to a retrieval tool rather than a space for discovery. This condition has been addressed within digital humanities through approaches that challenge traditional access models. In particular, the work of Mitchell Whitelaw, Lev Manovich, and Johanna Drucker highlights how interfaces can reveal relationships, patterns, and interpretations, moving beyond a purely functional view of data. In this context, designing an archive interface becomes not only a technical task, but a cultural and interpretative one." }, { "title": "Donetta Archive", "text": "The project is based on the Roberto Donetta Archive, a collection of over 5,000 photographs and a corpus of handwritten documents documenting life in the Blenio Valley, in southern Switzerland, between the nineteenth and twentieth centuries. The archive is characterized by a fragmented and heterogeneous structure: metadata are often incomplete or inconsistent, while handwritten documents are only partially transcribed and lack explicit connections to the photographic material. This condition makes the archive difficult to navigate, but also reveals its potential. The coexistence of images and texts becomes the starting point for designing an interface capable of reconstructing relationships, making hidden connections visible, and enabling new forms of exploration." } ] }, { "type": "statement", "label": "research question", "text": "How can a digital platform reveal visual and narrative connections within photographic archives beyond traditional metadata?\nWhat navigation strategies enable non-linear exploration and unexpected readings of archival content?\nHow can handwritten documents become a visual entry point to activate collective memory and create new forms of access to the past?" }, { "type": "gallery", "span": "1-12", "layout": "grid", "items": [ { "src": "image/mnemosine/miniature_t.png", "caption": "", "span": 12, "background": "transparent", "preserveRatio": true } ] }, { "type": "copy", "heading": "execution", "blocks": [ { "title": "strategy", "text": "The project reinterprets the concept of the generous interface as a design approach, shifting access to the archive from search-based interaction to exploratory navigation. The archive is framed as an interpretative space where images and texts are connected through visual and semantic relationships, allowing users to navigate content without predefined paths." }, { "title": "process", "text": "The project was developed through a multi-layered process combining research, data construction, and interface design. It includes:", "bulletList": [ "theoretical research on digital archives and visual knowledge representation", "comparative analysis of case studies", "user research with researchers working with historical sources", "construction of photographic and documentary datasets", "transcription of handwritten materials", "integration of AI tools", "development of semantic clusters", "design and iterative refinement of the interface" ] }, { "title": "working with the archive", "text": "The archival material was not treated simply as content to organize, but as a system to reconstruct and reinterpret. The project involved building interconnected photographic and documentary datasets through metadata normalization, transcription workflows, semantic clustering, and AI-assisted enrichment processes. Machine learning models were used to identify semantic relationships, generate tags, support the transcription of handwritten documents, and reveal connections that were not explicitly present within the archive’s original structure. These computational processes were continuously reviewed and refined through manual curation to ensure consistency, readability, and interpretative value. This hybrid workflow transformed the archive from a static collection of records into a navigable network of semantic and narrative connections." } ] }, { "type": "gallery", "span": "6-12", "layout": "grid", "items": [ { "src": "image/mnemosine/metadati_video.mp4", "caption": "Generation of missing archival metadata", "span": 6, "autoplay": true, "muted": true, "controls": false, "loop": true, "showControls": false }, { "src": "image/mnemosine/cluster_categorizzati.png", "caption": "Semantic mapping of the archive across multiple exploratory dimensions, connecting portraits, activities, landscapes, objects, and rituals into a non-linear navigation system.", "span": 6, "preserveRatio": true, "controls": false }, { "src": "image/mnemosine/risultati_cluster_ottenuti.png", "caption": "Definition of the thematic clusters used to structure the archive, combining manual curation, metadata interpretation, and AI-assisted image analysis.", "span": 6, "preserveRatio": true, "controls": false } ] }, { "type": "copy", "blocks": [ { "title": "system and prototype", "text": "The prototype is structured around two parallel but interconnected systems: photographs and handwritten documents. Users can browse archive grids, filter content, access detailed records, and build personal collections. Each element acts as an entry point into the archive. At the core of the interface, a visual network allows images and documents to activate related materials through themes, objects, keywords, and typologies. This enables continuous, non-linear exploration, where users construct their own paths across the archive. The visual language is designed to support the archival context. A dark interface enhances the visibility of photographic material, while a restrained grayscale palette keeps the focus on content. A single accent color highlights interactions and connections within the system. Typography follows a structured and neutral approach, reinforcing clarity and readability." } ] }, { "type": "gallery", "span": "6-12", "layout": "grid", "items": [ { "src": "image/mnemosine/architettura_video.mp4", "caption": "Simplified structure of the Mnemosine platform", "span": 6, "autoplay": true, "muted": true, "controls": false, "loop": true, "showControls": false, "loopDelay": 1500 } ] }, { "type": "copy", "blocks": [ { "title": "final result & next steps", "text": "Mnemosine proposes a modular model for cultural institutions, archives, and museums aiming to make visual heritage more accessible and engaging. Beyond the Donetta case study, the platform is conceived as a scalable system capable of hosting multiple collections while maintaining a consistent logic of visual and narrative access. By combining structured datasets, AI-assisted metadata, and visual navigation, the archive is transformed into a relational system that supports discovery, interpretation, and cultural engagement. Future developments include refining AI-assisted processes, improving transcription workflows, and strengthening the integration between textual and visual materials." } ] }, { "type": "statement", "label": "type of solution", "text": "By combining structured datasets, AI-assisted metadata, and visual navigation, the archive is transformed into a relational system that supports discovery, interpretation, and cultural engagement." }, { "type": "gallery", "span": "1-12", "layout": "grid", "items": [ { "src": "image/mnemosine/progetto/img_00.jpg", "caption": "Mnemosine platform entry page", "span": 12 }, { "src": "image/mnemosine/progetto/img_01_corretta.jpg", "caption": "Mnemosine platform entry page", "span": 6 }, { "src": "image/mnemosine/progetto/img_02.jpg", "caption": "Entry point to the Donetta Archive", "span": 6 }, { "src": "image/mnemosine/progetto/img_03_copia.jpg", "caption": "Documentary archive - Grid view", "span": 6 }, { "src": "image/mnemosine/progetto/mnemosin_03.jpg", "caption": "Photographic archive - Grid view", "span": 6 }, { "src": "image/mnemosine/progetto/mnemosine_04.jpg", "caption": "Visual network detail - photo", "span": 12 }, { "src": "image/mnemosine/27_ad_network_visuale_tipologia_di_documento_3.jpg", "caption": "Visual network detail - document", "span": 6 }, { "src": "image/mnemosine/filtri_doc.jpg", "caption": "Filtering system", "span": 6 } ] } ] } }, { "slug": "financial-planning-hub", "title": "Financial Planning HUB", "type": "UX/UI", "year": "2025", "previewImage": "image/ubs/Frame-6.jpg", "previewHoverImage": "image/ubs/ubs_cover2.jpg", "shortDescription": "A new feature for a mobile banking app that transforms financial planning into a continuous, visual, and emotionally approachable experience.", "detail": { "type": "UX/UI", "focusArea": "User Research, Experience Strategy, Mobile Interface Design", "awards": "-", "contributors": "N. Asensio, R. Assirelli, W. De Nicola, I. Parini, R. Valli", "heroMedia": "image/ubs/video_ubs.mp4", "blocks": [ { "type": "statement", "label": "overview", "text": "A feature designed for a mobile banking app that helps users understand how everyday financial decisions shape their long-term goals, through guided onboarding, a dynamic visual metaphor, simulations, and adaptive insights." }, { "type": "gallery", "span": "1-12", "layout": "grid", "items": [ { "src": "image/ubs/ubs_cover2.jpg", "caption": "Financial Planning Hub — main view", "span": 6 }, { "src": "image/ubs/Frame-6.jpg", "caption": "Interface direction and scenario framing", "span": 6 } ] }, { "type": "copy", "heading": "research", "blocks": [ { "title": "context", "text": "The bank already offered solid tools for payments, investments, and budgeting, but long-term financial planning was still a gap. Most users had goals in mind, yet struggled to connect their daily habits to any meaningful future outcome. The app lacked a space where planning could feel personal, continuous, and navigable." }, { "title": "what we did", "text": "We ran a multi-method research phase combining desk research, competitive benchmark, 12 qualitative interviews, and 50+ surveys. The goal was to understand not just what people do with their money, but how they feel about it and where doubt, avoidance, and disconnection tend to emerge." } ] }, { "type": "gallery", "span": "6", "layout": "grid", "items": [ { "src": "image/ubs/nuove/data_from_desk_research.jpg", "caption": "Data from desk research, interviews and surveys: key quantitative findings", "span": 6, "preserveRatio": true } ] }, { "type": "copy", "blocks": [ { "title": "what we found", "text": "Three user clusters emerged from the data: the Last-Minute Planner, who only acts when forced to; the Static Planner, who sets goals but freezes when life changes; and the Rational Optimizer, who combines structure and adaptability. Most users fell into the middle: they had intentions but no tools to keep pace with reality.\n\nAcross all groups, three barriers consistently surfaced: difficulty connecting short-term actions to long-term consequences, fear of making mistakes, and a lack of ongoing guidance that made planning feel inconsistent over time. Financial planning was perceived as something you do once and then lose track of, not something that lives alongside you." } ] }, { "type": "gallery", "span": "1-12", "layout": "grid", "items": [ { "src": "image/ubs/nuove/gab.jpg", "caption": "The awareness gap: the disconnect between long-term planning intentions and short-term financial habits", "span": 6, "preserveRatio": true }, { "src": "image/ubs/nuove/user.jpg", "caption": "Research synthesis: user clusters, behavioral patterns, persona and experience map", "span": 6 } ] }, { "type": "statement", "label": "problem definition", "text": "How might we transform financial planning into a continuous and emotionally approachable experience, one that helps users connect everyday financial behaviors with long-term goals, and adapts when life gets in the way?" }, { "type": "copy", "heading": "execution", "blocks": [ { "title": "experience strategy", "text": "The central design decision was to reframe financial planning not as a tool you consult, but as a space you inhabit. Rather than presenting data and leaving users to interpret it, the Hub guides them through onboarding that personalizes the experience from the start, through contextual insights that surface when they matter most, and through a visual language that makes abstract financial health feel tangible and readable at a glance." } ] }, { "type": "gallery", "span": "6", "layout": "grid", "items": [ { "src": "image/ubs/nuove/Idea Generation_round_robbin.jpg", "caption": "Idea generation: Round Robin methods to explore different solutions", "span": 6, "preserveRatio": true }, { "src": "image/ubs/nuove/Idea Generation_lotus.jpg", "caption": "Idea generation: Lotus Blossom methods to explore different solutions", "span": 6, "preserveRatio": true }, { "src": "image/ubs/nuove/task_flow.jpg", "caption": "User flow: mapping the complete interaction architecture across the Hub's four areas", "span": 6, "preserveRatio": true } ] }, { "type": "copy", "blocks": [ { "title": "the tree metaphor", "text": "At the core of the Hub is a dynamic 3D tree that reflects the user's financial health in real time. When goals are on track, the tree is lush and growing. When something needs attention, it shows it visually, without numbers alone. This metaphor was designed to bypass the anxiety that comes with raw financial data and give users an immediate, emotional read on where they stand. The tree also reacts to simulations, letting users see the impact of hypothetical decisions before committing to them." }, { "title": "core features", "text": "The Hub is structured around four interconnected areas. Financial Plans is where users define short and long-term goals, track progress, and share objectives with others, because some goals are not meant to be reached alone. The Simulation tool lets users model life events like unexpected expenses or income changes, see their impact, and receive actionable suggestions to stay on track. Dynamic Insights delivers personalized, time-sensitive guidance, daily, weekly, or monthly, drawn from the user's actual behavior. The Balance Radar offers a clear, data-driven overview of spending, saving, and investing, with the ability to drill into each dimension." }, { "title": "design principles", "text": "Throughout the interface, we prioritized low cognitive load over information density. Layouts are minimal, motion is soft and purposeful, and information is revealed progressively so users never feel overwhelmed. The visual system integrates into the existing banking app identity while giving the Hub its own quiet warmth: a space that feels different from a dashboard, closer to a companion." } ] }, { "type": "statement", "label": "final result", "text": "A connected planning experience that makes financial complexity navigable, turning abstract goals into living plans that grow, adapt, and stay meaningful over time." }, { "type": "gallery", "span": "1-12", "layout": "grid", "items": [ { "src": "image/ubs/Frame-3.jpg", "caption": "Progressive onboarding: personalizing the Hub from the first session", "span": 12 }, { "src": "image/ubs/7.png", "caption": "Goal setting and long-term financial planning", "span": 6 }, { "src": "image/ubs/8.png", "caption": "Progress monitoring and contextual financial guidance", "span": 6 }, { "src": "image/ubs/Frame-8.jpg", "caption": "System ecosystem: connected touchpoints across the Hub", "span": 12 }, { "src": "image/ubs/Frame-7.jpg", "caption": "Simulation feature: modeling life events and their impact on goals", "span": 6 }, { "src": "image/ubs/15.jpg", "caption": "Adaptive suggestions after running a simulation", "span": 6 }, { "src": "image/ubs/18.jpg", "caption": "Balance Radar: spending, saving, and investing at a glance", "span": 6 }, { "src": "image/ubs/19.jpg", "caption": "Dynamic insights: personalized guidance based on real behavior", "span": 6 }, { "src": "image/ubs/20.jpg", "caption": "The tree metaphor in context: on-track and off-track states", "span": 12 } ] } ] } }, { "slug": "wayra", "title": "Wayra", "type": "Agentic AI ecosystem", "year": "2026", "shortDescription": "A contextual AI ecosystem supporting backpackers during moments of disruption, uncertainty, and cognitive overload, online and offline.", "previewImage": "image/wayra/img_finite/iphone+watch.jpg", "previewHoverImage": { "src": "image/wayra/img_finite/iphone+watch.jpg", "background": "var(--black)" }, "detail": { "type": "Agentic AI ecosystem", "focusArea": "AI-Agent design, Designing intelligent experiences, multimodal ecosystems", "awards": "-", "contributors": "L. Ciapessoni, A. Ioffe, M. Piatti, R. Valli, A. Vanella", "heroMedia": "image/wayra/img_finite/iphone+watch2.jpg", "blocks": [ { "type": "statement", "label": "type of solution", "text": "Wayra is a contextual decision-support ecosystem designed for the unpredictable reality of backpacking travel. Rather than optimizing itineraries before departure, the system focuses on what happens during the journey itself: uncertainty, disrupted mobility, safety concerns, low connectivity, and fast decisions made under stress." }, { "type": "copy", "heading": "research", "blocks": [ { "title": "challenge", "text": "Most contemporary AI travel systems focus primarily on itinerary optimization and pre-departure planning, while few address the management of uncertainty, disruption, and decision-making during the journey itself.\n\nBackpackers continuously navigate fragmented ecosystems composed of maps, booking platforms, transport systems, forums, social media, and AI tools. Information is abundant, but trust remains unstable and difficult to verify.\n\nResearch revealed a strong contradiction between the desire for spontaneity and the need for reassurance. Travelers resisted rigid planning systems, yet still required support during moments of disruption, uncertainty, and cognitive overload." }, { "title": "behavioral research", "text": "The project emerged from a qualitative research phase combining eight semi-structured interviews with travelers and an extensive desk research process focused on backpacking culture, uncertainty, trust, and decision-making during travel.\n\nThe investigation explored how travelers react under pressure, validate information, adapt to unexpected situations, and manage cognitive overload while moving through unfamiliar environments.\n\nAdditional research mapped recurring friction points within backpacking journeys, including transport disruptions, accommodation failures, safety concerns, unreliable connectivity, and situations requiring fast decisions under stress." } ] }, { "type": "gallery", "span": "7-12", "layout": "grid", "items": [ { "src": "image/wayra/backpacking_data.jpg", "caption": "Wayra, behavioral research intent map", "span": 6, "preserveRatio": true } ] }, { "type": "statement", "label": "research question", "text": "How might a contextual AI system support backpackers during moments of uncertainty and disruption without removing the spontaneity and unpredictability that make travel meaningful?" }, { "type": "gallery", "span": "1-12", "layout": "grid", "items": [ { "src": "image/wayra/key insights.jpg", "caption": "Wayra, key insights from research", "span": 6, "preserveRatio": true }, { "src": "image/wayra/travel phases.jpg", "caption": "Wayra, backpacker journey mapping", "span": 6, "preserveRatio": true } ] }, { "type": "copy", "heading": "execution", "blocks": [ { "title": "contextual AI system", "text": "Wayra reframes AI not as a planning tool, but as a contextual support infrastructure capable of accompanying travelers dynamically throughout the journey itself.\n\nInstead of generating excessive recommendation sets, the system narrows complexity into clear and actionable next steps adapted to the traveler’s context, emotional state, attention level, and surrounding conditions." }, { "title": "multimodal interaction ecosystem", "text": "Wayra operates as a multi-touchpoint conversational ecosystem across smartphones, smartwatches, and earbuds, adapting continuously to the traveler’s context, movement, and attention level.\n\nThe smartphone supports detailed interaction and exploration, the smartwatch delivers quick-glance information and haptic alerts, while earbuds enable low-friction voice interaction during movement-intensive situations.\n\nNotifications are designed as situational interventions rather than constant interruptions. The system follows a progressive escalation model starting from haptic feedback and intensifying only when necessary through voice prompts and screen-based guidance.\n\nWayra’s behavioral logic is intentionally designed around emotional stability rather than excessive conversationality. Instead of overwhelming users with options, the system narrows complexity into clear and contextually relevant actions, reinforcing situational awareness during moments of uncertainty, disruption, and cognitive overload.\n\nDesigned to operate both online and offline, the ecosystem maintains contextual continuity even during low-connectivity travel situations." } ] }, { "type": "gallery", "span": "7-12", "layout": "grid", "items": [ { "src": "image/wayra/ecosystem.jpg", "caption": "Wayra, multimodal interaction ecosystem", "span": 6, "preserveRatio": true } ] }, { "type": "copy", "blocks": [ { "title": "system prompt & behavioral rules", "text": "The AI behavior was structured through predefined conversational rules designed to regulate tone, escalation, contextual awareness, and decision-making logic.\n\nThe system prioritizes concise guidance, reassurance, and low cognitive effort, avoiding excessive recommendations or unnecessary conversational friction during stressful travel situations." } ] }, { "type": "gallery", "span": "7-12", "layout": "grid", "items": [ { "src": "image/wayra/toolkit resume.jpg", "caption": "Wayra, system prompt and behavioral toolkit", "span": 6, "preserveRatio": true }, { "src": "image/wayra/BLUEPRINT.jpg", "caption": "Wayra, system blueprint and interaction ecosystem", "span": 6, "preserveRatio": true } ] }, { "type": "copy", "blocks": [ { "title": "journey scenario", "text": "The system was explored through a structured journey scenario along the Camino de Santiago, spanning onboarding, live travel assistance, crisis response, and post-trip memory.\n\nSituations such as storms, wrong trails at sunset, and accommodation failures activate different support behaviors across multiple touchpoints and interaction modalities." } ] }, { "type": "gallery", "span": "7-12", "layout": "grid", "items": [ { "src": "image/wayra/wayra_use_case.mp4", "caption": "Wayra, journey scenario use case", "span": 6, "preserveRatio": true, "autoplayInView": true, "muted": true, "loop": true, "showControls": false } ] }, { "type": "copy", "blocks": [ { "title": "visual identity", "text": "The visual identity was designed around operational readability, emotional stability, and adaptive interaction.\n\nA restrained palette combining black, off-white, and alert red is paired with Space Grotesk and Space Mono typefaces, evoking the language of operational systems while maintaining a calm and approachable atmosphere." } ] }, { "type": "gallery", "span": "7-12", "layout": "grid", "items": [ { "src": "image/wayra/img_finite/wayra_visual_identity.jpg", "caption": "Wayra, visual identity system", "span": 6, "preserveRatio": true } ] }, { "type": "statement", "label": "type of solution", "text": "A contextual AI ecosystem designed to reduce cognitive overload and support backpackers in real time through uncertainty, disruption, and movement, online and offline." }, { "type": "gallery", "span": "1-12", "layout": "grid", "items": [ { "src": "image/wayra/img_finite/wayra_hp_smartphonne_chat.jpg", "caption": "Wayra - homepage, journal and menu", "span": 6, "preserveRatio": false }, { "src": "image/wayra/img_finite/wayra_hp_smartphonne_chat-1.jpg", "caption": "Wayra - smartwatch notification", "span": 6, "preserveRatio": false }, { "src": "image/wayra/img_finite/wayra_smartwatch.jpg", "caption": "Wayra - smartwatch", "span": 6, "preserveRatio": false }, { "src": "image/wayra/img_finite/wayra_onboarding_video.mp4", "caption": "Wayra - onboarding flow", "span": 6, "preserveRatio": false, "autoplayInView": true, "muted": false, "loop": true, "showControls": false } ] } ] } }, { "slug": "paranormal-signal", "title": "Paranormal Signal", "type": "Physical Computing", "year": "2026", "previewImage": "image/paranormal_signal/paranormal_signal_cover_01.jpg", "previewHoverImage": "image/paranormal_signal/paranormal_signal5.jpg", "shortDescription": "An installation exploring the imagined ghost of the Saceba factory.", "detail": { "type": "Physical Computing", "focusArea": "Spatial experience, interactive installations, physical computing", "awards": "-", "contributors": "E. Caridi, W. De Nicola, R. Valli", "heroMedia": "image/paranormal_signal/paranormal_signal_cover_01.jpg", "blocks": [ { "type": "statement", "label": "type of solution", "text": "Paranormal Signal is an installation that explores the boundary between perception and suggestion through the imagery of the paranormal, rendering perceptible variations of space that normally remain invisible. Inside an abandoned building, three satellite dishes operate as listening devices, intercepting environmental fluctuations in real time and translating them into pulsating luminous sequences, image suspensions, and intermittent electronic acoustic impulses." }, { "type": "copy", "heading": "research", "blocks": [ { "title": "challenge", "text": "Physical environments carry signals that exceed human perception — electromagnetic interference, structural vibrations, atmospheric shifts — yet remain imperceptible to direct sensory experience. The challenge was to design a system capable of capturing these invisible variations and rendering them as meaningful perceptual events, without affirming or denying the existence of what cannot be seen." }, { "title": "context", "text": "The project was developed as part of the Designing Spatial Experiences course at SUPSI. The brief invited students to investigate the technological potential of sensing systems as tools for extending perception, encouraging the design of speculative devices capable of revealing phenomena that normally remain beyond human awareness. By hacking everyday objects and integrating them with sensors and microcontrollers, these devices operate as hybrid instruments that translate hidden environmental data into perceptible experiences." } ] }, { "type": "gallery", "span": "7-12", "layout": "grid", "items": [ { "src": "image/paranormal_signal/paranormal_signal_location.jpg", "caption": "Former Saceba cement factory (Balerna-CH)", "span": 6, "aspectRatio": "16:9" } ] }, { "type": "statement", "label": "research question", "text": "How can minimal physical variations in an abandoned space be translated into a perceptual experience that leaves the visitor to bridge the distance between interference and meaning?" }, { "type": "copy", "heading": "execution", "blocks": [ { "title": "strategy", "text": "The installation uses three satellite dishes — detached from their conventional role — as speculative listening devices positioned within the former Saceba cement factory in Balerna (CH). Equipped with accelerometers and ultrasonic sensors, they capture environmental fluctuations and feed them into a distributed Edge/IoT system. A master Raspberry Pi manages the state machine, queries Google Gemini with dynamically constructed prompts built from real-time sensor data, generates Morse code from AI-produced words, and synthesizes a dense, distorted industrial soundscape. Three CRT monitors act as mediators, displaying the translated signals as flickering, fragmented, and ultimately unreadable visual sequences." }, { "title": "process", "text": "The development evolved through distinct phases: initial network setup and multi-screen CRT interface design; connection of sensor data to AI text generation and introduction of the 'industrial ghost' concept; introduction of a degradation system to make Morse output feel corrupted and atmospheric; synchronization of messages via buffering and timing control; and a final phase that replaced random activation with a silence-based ritual, and transformed standard audio playback into a fully custom procedural synthesis system." } ] }, { "type": "copy", "blocks": [ { "title": "system and prototype", "text": "The system operates as a tightly integrated real-time architecture: Arduino/ESP32 sensor nodes read ultrasonic distance and ambient sound sensors, transmitting data via UDP to the master Raspberry Pi. The master manages three states — Standby, Booting, and Active — where activation requires the visitor to be both close and silent, referencing calibration-style telemetry visuals. In Active state, Google Gemini generates single words constrained to industrial/cement factory context from environmental data; these are transmitted as Morse code in audio and light. A slave Raspberry Pi handles synchronized rendering on a third monitor. Visitor proximity modulates interference — introducing audio dropouts, visual glitches, and temporal jitter — making the human body an active element in the signal." } ] }, { "type": "gallery", "span": "7-12", "layout": "grid", "items": [ { "src": "image/paranormal_signal/paranormal_signal_test_arduino_sensors3.JPG", "caption": "Initial positioning and functionality test of Arduino and sensors mounted on a satellite dish support structure", "span": 2, "aspectRatio": "9:16" }, { "src": "image/paranormal_signal/paranormal_signal_test_arduino_sensors.JPG", "caption": "Sensor integration test on a satellite dish", "span": 2, "aspectRatio": "9:16" }, { "src": "image/paranormal_signal/paranormal_signal_dettaglio_sensor.JPG", "caption": "Ultrasonic sensor concealed within the surface of the satellite dish", "span": 2, "aspectRatio": "9:16" }, { "src": "image/paranormal_signal/paranormal_signal_test_tv.JPG", "caption": "Testing phase of the CRT synchronization system", "span": 6, "aspectRatio": "16:9" } ] }, { "type": "copy", "blocks": [ { "title": "final result & next steps", "text": "The installation transforms the ex Saceba factory into an amplification instrument where minimal environmental variations emerge as perceptual events. The work neither affirms nor denies the existence of invisible presences — it constructs the conditions through which they might be sensed or imagined, leaving the visitor to navigate the fragile boundary between signal and suggestion." } ] }, { "type": "gallery", "span": "1-12", "layout": "grid", "items": [ { "src": "image/paranormal_signal/paranormal_signal_video.mp4", "poster": "image/paranormal_signal/paranormal_signal_cover_01.jpg", "caption": "Video documentation of the installation", "span": 12 }, { "src": "image/paranormal_signal/paranormal_signal_cover_01.jpg", "caption": "Complete installation view", "span": 6 }, { "src": "image/paranormal_signal/paranormal_signal_cover_02.jpg", "caption": "CRT monitor displaying generated signal sequences", "span": 6 }, { "src": "image/paranormal_signal/paranormal_signal2.jpg", "caption": "Details of CRT monitors and visual interference", "span": 6 }, { "src": "image/paranormal_signal/paranormal_signal5.jpg", "caption": "Spatial atmosphere of the installation", "span": 6 }, { "src": "image/paranormal_signal/paranormal_signal_06.jpg", "caption": "Details of CRT monitors and visual interference", "span": 4 }, { "src": "image/paranormal_signal/paranormal_signal_08.jpg", "caption": "Details of CRT monitors and visual interference", "span": 4 }, { "src": "image/paranormal_signal/paranormal_signal_09.jpg", "caption": "Spatial atmosphere of the installation", "span": 4 } ] } ] } }, { "slug": "overexposed", "title": "Overexposed", "type": "Data Visualization", "year": "2026", "previewImage": "image/overexposed/overexposed_3.jpg", "previewHoverImage": "image/overexposed/overexposed_3.jpg", "shortDescription": "A data visualization project examining how social media–driven tourism transforms the city of Lugano into a set of hyper-represented locations, exploring the tension between physical reality and its digital image.", "detail": { "type": "Data Visualization", "focusArea": "Data visualization, urban narratives, social media imagery", "awards": "-", "contributors": "D. Bejtaga, L. Ciapessoni, W. De Nicola, E. Miglio, R. Valli", "heroMedia": "image/overexposed/overexposed_01.jpg", "blocks": [ { "type": "statement", "label": "type of solution", "text": "Overexposed is a data visualization project that examines how social media–driven tourism has transformed the city of Lugano into a set of highly represented locations, where the value of a place is increasingly linked to its visibility on digital platforms. The interface transitions from a density heatmap of the most frequently posted locations to an immersive 3D and 360° environment, allowing users to explore clusters of images and geolocated data." }, { "type": "copy", "heading": "research", "blocks": [ { "title": "challenge", "text": "Social media–driven tourism has progressively reduced the urban image of Lugano to a limited set of hyper-represented locations. The challenge was to make visible the polarization between the city's physical reality and its digital representation, and to question how algorithms and social dynamics define points of interest and shape the collective perception of urban space." }, { "title": "context", "text": "As social media platforms centralize the production and consumption of visual content, cities are increasingly perceived through the lens of their most shared images — a condition that raises questions about authenticity, diversity, and the role of data in urban experience. The project explores the tension between what is visible, what is overlooked, and how these dynamics shape the collective identity of a city." } ] }, { "type": "statement", "label": "research question", "text": "How does social media–driven tourism reshape the identity and perception of Lugano? What is visible, what is overlooked, and how do these dynamics shape the collective perception of the city?" }, { "type": "copy", "heading": "execution", "blocks": [ { "title": "strategy", "text": "The visualization uses color as the primary variable in a heatmap to encode the volume of shared images, mapping data density across Lugano's actual topography. Geographic coordinates anchor digital data to the city's real space, making the gap between the 'digital geography' of social media and the physical city immediately visible. In the 3D view, photographic clusters take the form of floating panels within an immersive environment — dozens of identical framings grouped together serve as empirical evidence of how the city's image is flattened into a repetitive visual stereotype." }, { "title": "process", "text": "Data collection was structured in multiple phases: identification of the most frequently tagged locations on Instagram and TikTok; scraping of images and geolocated metadata using Zeeschuimer; filtering and processing via Python-based tools; and application of a clustering pipeline based on visual similarity — using DINOv2 for embedding extraction and HDBSCAN for density-based clustering. The results were reviewed manually to verify consistency and exclude non-pertinent content. Overall, 5 locations were analyzed, with a total of 6,253 images collected and organized into visual clusters." } ] }, { "type": "copy", "blocks": [ { "title": "system and prototype", "text": "The interface is designed as a 'drill-down' experience: the user begins from a detached two-dimensional heatmap showing where touristic pressure is concentrated, then zooms or selects an area to dive into the 3D view. Upon entering points of interest, a 360° immersive navigation allows the user to pan and explore, while pop-ups of Instagram photos literally invade the real-space view — making the clutter of social representation physically felt. Cluster exploration allows users to scroll through the repetitiveness of the photographic subjects and compare the 'symbolic' image of each cluster with its actual surroundings." }, { "title": "final result & next steps", "text": "A participatory component invites citizens to challenge the city's most common photos by contributing a personal image of Lugano from their own point of view. Each new image is paired with the dominant social media photo of the same area, creating a dual-sided digital postcard. These contributions accumulate into an evolving public archive — allowing users to collectively unframe the city and reveal what Lugano truly looks like beyond the spotlight of touristic pressure." } ] }, { "type": "statement", "label": "type of solution", "text": "An interface that makes social media's construction of urban space both visible and tangible — questioning the stereotypical representation of the city and inviting citizens to build a more authentic collective image." }, { "type": "gallery", "span": "1-12", "layout": "grid", "items": [ { "src": "image/overexposed/video_overexposed.mp4", "caption": "Density map of social media activity across Lugano", "span": 12, "aspectRatio": "3024:1660", "autoplay": true, "muted": true, "loop": true, "showControls": false }, { "src": "image/overexposed/overexposed_1.jpg", "caption": "Tourism pressure visualization based on geolocated social media data", "span": 6, "aspectRatio": "3024:1660" }, { "src": "image/overexposed/overexposed_01.jpg", "caption": "Entry point into location-based visual clusters", "span": 6, "aspectRatio": "3024:1660" }, { "src": "image/overexposed/overexposed_2.jpg", "caption": "Location detail view with contextual social media content", "span": 6, "aspectRatio": "3024:1660" }, { "src": "image/overexposed/overexposed_3.jpg", "caption": "Spatial visualization of clustered Instagram imagery", "span": 6, "aspectRatio": "3024:1660" }, { "src": "image/overexposed/overexposed_4.jpg", "caption": "Visual cluster exploration within the urban environment", "span": 12, "aspectRatio": "3024:1660" }, { "src": "image/overexposed/overexposed_5.jpg", "caption": "Detailed exploration of location-based image clusters", "span": 6, "aspectRatio": "3024:1660" }, { "src": "image/overexposed/overexposed_6.jpg", "caption": "Filtering and chronological exploration system", "span": 6, "aspectRatio": "3024:1660" } ] } ] } }, { "slug": "onyx", "title": "ONYX", "type": "UX/UI", "year": "2024", "shortDescription": "A speculative fashion brand and digital experience designed for hostile environments shaped by climate collapse, toxic atmospheres, and extreme weather conditions.", "previewImage": "image/onyx/01_onyx_image_06.jpg", "previewHoverImage": "image/onyx/01_onyx_image_07.jpg", "detail": { "type": "UX/UI", "focusArea": "Concept design, AI-assisted experiences, interface systems", "awards": "-", "contributors": "Roberta Valli", "heroMedia": "image/onyx/01_onyx_image_04.jpg", "blocks": [ { "type": "statement", "label": "type of solution", "text": "ONYX is a speculative visual ecosystem combining branding, UX/UI, and AI-generated imagery within a single coherent system, where fashion becomes both survival infrastructure and a symbol of resistance." }, { "type": "copy", "heading": "research", "blocks": [ { "title": "worldbuilding", "text": "ONYX was conceived as a fictional fashion brand designed for hostile and unpredictable environments. Set in the year 2100, the project imagines a world shaped by climate collapse, toxic atmospheres, and extreme weather conditions, where adaptation has become part of everyday life. Heavy silhouettes, protective accessories, and layered garments respond to sandstorms, polluted air, and unstable urban environments. Within this scenario, clothing becomes both a survival tool and a symbol of resistance." }, { "title": "challenge / scenario", "text": "ONYX explores a speculative future in which fashion shifts from aesthetic expression to functional infrastructure. As environmental conditions become increasingly hostile, the relationship between the body, clothing, and the surrounding environment changes radically. Protection, durability, and adaptability become central elements of the design process, redefining fashion as a system capable of supporting survival while maintaining a strong visual identity." }, { "title": "visual direction", "text": "The visual direction combines brutalist references, dystopian atmospheres, and survival aesthetics. A restrained palette built around black, neutral tones, and dusty yellow environments contributes to defining a recognizable and immersive visual identity. Moodboards, atmospheric imagery, and fashion references were used to construct a coherent visual system across environments, garments, accessories, and digital interfaces." } ] }, { "type": "statement", "label": "research question", "text": "How can AI-assisted image generation support the construction of a coherent speculative fashion identity across branding and digital experience?" }, { "type": "copy", "heading": "execution", "blocks": [ { "title": "strategy", "text": "The project focuses on building a consistent identity across branding, imagery, and digital experience. Rather than treating UX/UI and visual identity as separate layers, the website is conceived as an extension of the brand's narrative universe, translating atmosphere, functionality, and visual language into an immersive digital experience." }, { "title": "process", "text": "Developed between 2024 and early 2025, the project evolved through an iterative process combining visual research, worldbuilding, and interface design.", "bulletList": [ "construction of moodboards dedicated to environments, clothing, and overall art direction", "image generation and selection to define atmosphere and consistency", "refinement of the visual identity across branding and digital touchpoints", "development of a responsive website experience", "early experimentation with AI-assisted visual generation workflows as support for creative direction" ] } ] }, { "type": "copy", "blocks": [ { "title": "visual system", "text": "The visual system combines minimal typography, cinematic imagery, and structured layouts to build a recognizable and immersive identity. A restrained palette and minimal interface elements maintain focus on atmosphere and imagery, while protective visors, oversized silhouettes, and desert-like environments reinforce the ONYX universe." }, { "title": "website & digital experience", "text": "The website translates the ONYX universe into an immersive digital experience centered around imagery and visual storytelling. Minimal navigation, restrained interactions, and large-scale visuals allow the interface to function as a continuation of the brand narrative rather than a neutral container. The experience was designed for both desktop and mobile devices, maintaining visual consistency and readability across different formats." }, { "title": "final result & next steps", "text": "ONYX develops into a speculative visual ecosystem combining branding, UX/UI, and AI-generated imagery within a single coherent system. The project explores the potential of emerging generative tools as support for visual identity design and digital worldbuilding. Future developments could include motion design, interactive storytelling, and dynamic narrative systems capable of further expanding the ONYX universe." } ] }, { "type": "statement", "label": "type of solution", "text": "A narrative-driven digital brand experience where visual identity, interface design, and AI-generated imagery operate as one immersive survival-fashion system." }, { "type": "gallery", "span": "1-12", "layout": "grid", "items": [ { "src": "image/onyx/01_onyx_image_08.jpg", "caption": "ONYX visual", "span": 12, "preserveRatio": true }, { "src": "image/onyx/01_onyx_image_02.jpg", "caption": "ONYX visual", "span": 6, "preserveRatio": true }, { "src": "image/onyx/01_onyx_image_04.jpg", "caption": "ONYX visual", "span": 6, "preserveRatio": true }, { "src": "image/onyx/01_onyx_image_03.jpg", "caption": "ONYX visual", "span": 6, "preserveRatio": true }, { "src": "image/onyx/01_onyx_image_05.jpg", "caption": "ONYX visual", "span": 6, "preserveRatio": true }, { "src": "image/onyx/01_onyx_image_06.jpg", "caption": "ONYX visual", "span": 6, "preserveRatio": true }, { "src": "image/onyx/01_onyx_image_07.jpg", "caption": "ONYX visual", "span": 6, "preserveRatio": true }, { "src": "image/onyx/01_onyx_image_08.jpg", "caption": "ONYX visual", "span": 6, "preserveRatio": true } ] } ] } } ] }