PiX app

PiX is a visual language, originating in Chile in 2008, specifically engineered to represent and model interactions and user experience within digital services. Its fundamental purpose is to serve as a common, pictogram-based language that integrates the multiple disciplines inherent in UX work, thereby streamlining creative, design, and co-creation processes.

A central challenge in design communication is that our design >is a dialogue that unfolds in time but we lack the language to represent it properly and across all disciplines involved in the project. PiX directly addresses this by offering a structured, temporal notation system. This system captures the sequential flow, the qualitative aspects of the experience, and the emotional journey of the user, effectively moving beyond static design snapshots. By providing a coherent representation of interaction over time, PiX significantly reduces the reliance on extensive supplementary explanations, ensuring that the proposed experience is clearly understood across all project stakeholders.

The strength of PiX is further amplified by its capacity to foster interdisciplinary collaboration and co-design. Its accessible pictogram-based language renders it universally understandable, facilitating effective communication among designers, developers, business strategists, and end-users. This is particularly valuable in co-design contexts, where diverse perspectives are crucial. PiX transcends mere notation; it operates as a generative and inclusive framework, making it an ideal instrument for co-design workshops where individuals from varied backgrounds can contribute meaningfully to the design process.

How it works

The score is divided into three layers: The user layer, the interaction layer and the service (or system) layer.

The Score

person	This layer depicts the persons's intent and goals through the development of his/her mental model of the task at hand. It also shows the (expected) emotions involved in the overall experience.
dialogue	This is the interface dialogue layer that represents the concrete actions happening on the interface: gestures, messages, actions; all direct manipulation of elements and constructs happening onstage.
system	This is the system layer which shows what happens under the hood, what enables the service performance; all supporting actions and processes delivered to the person.

How to create a PiX

1. Open the App
2. Name your PiX and add a description
3. Type inside each PiX cell, for adding an icon, just type pix- plus the icon name you wish to insert (check the complete list of icons)
   • Within the autocomplete, select with your arrow keys ↑ or ↓ and hit return to insert it
   • If you ignore the autocomplete and keep typing, just press space to insert the icon
4. Split the score with the button to declare a different section or screen. You can name the new section in the textarea that appears on top
5. For adding a new step in your score, just press tab and a new column (or step) will be added at the end, or the click on the button for inserting a new step wherever you need it
6. For removing a step, just click on the button

Resources

• PiX Collab - Miro Template
• PiX for Figma

Downloads

Icons

All icons are available as a separate package in the Pixograms repository.

1. Pixograms in SVG format
2. Pixograms Webfont (All icon names are ligatures)

Templates & Stencils

Illustrator

1. PiX Template - English
2. PiX Template - Español

Omnigraffle

1. PiX Score Template
2. Action Objects
3. Actions
4. Playback Controls
5. Arrows
6. Containers
7. Devices
8. Objects
9. Score
10. System
11. Expression Faces
12. Gestures

Features

1. Streamlined Workflow for Rapid Prototyping and Documentation. Insert icons efficiently while typing with pix-iconName and TAB to jump or create the next slot. This feature is designed to accelerate your design process.
2. Save your work by storing or restoring your browser session, ensuring continuity and easy access to your projects.
3. Import and export your PiX in JSON format, facilitating version control and seamless integration with other tools.
4. PDF output for creating great design deliverables, perfect for presentations, client reviews, and archival purposes.
5. 2 Templates you can choose from: a 3-layered PiX score for general interaction design or a 5-layered service blueprint score for broader service design contexts.

PiX: Evolution and contributions over the uears

PiX is a visual notation developed at the School of Architecture and Design (Interaction Design program, PUCV). It began as undergraduate theses and expanded through research projects and peer-reviewed publications. Over time, it has been refined by students and academics, and applied professionally. The table below summarizes this journey with direct links to each contribution.

Year	Type	Title / Link	Contributors
2008	Undergrad Thesis	Bitácora Colectiva de Travesías Amereida	Katherine Exss, Estefanía Trisotti
2008	Chapter (Thesis)	Interaction Scores: Toward a Unified Representation (PDF)	Katherine Exss, Estefanía Trisotti
2009	Undergrad Thesis	AURA: Semantic Web for Heritage Archives	Nicole Dupré, Javiera González, Esteban Saavedra
2014	Undergrad Thesis	PiXograms	Melany Marín, Ingrid Céspedes
2014	Research Project	Redesign of Interaction Scores: Formalizing a Language for UX Design	Herbert Spencer, Katherine Exss
2015	Research Project	Interaction Scores as Design Tools for Modeling Value in Digital Services	Herbert Spencer, Katherine Exss
2020	Undergrad Thesis	PiX as an Accessible Language & Method for Co-design	Rosario Muñoz, Alejandra Alcavil
2020	Research Project	PiX Scores: Language & Method for Co-design	Katherine Exss
2020	Interdisciplinary Undergraduate Research	PiX as Accessible Language & Method for Co-design	Katherine Exss, Herbert Spencer, Vanessa Vega
2020	Academic Article	Bad Practices in UX Design: Dark Interaction Patterns	Katherine Exss, Catalina Pérez, Herbert Spencer
2022	Master’s Thesis	Iconographic Narratives: A Language for Narrative Writing	Rosario Muñoz
2024	Academic Article	Toolkits for Accessible Participation: PiX as a Universal Co-design Tool	Katherine Exss, Herbert Spencer, Vanessa Vega C., Marcela Jarpa, Izaskun Álvarez-Aguado, Rosario Muñoz, Alejandra Alcavil

PiXograms

The Pixograms font family is designed specially for representing the actions, processes and objects involved in the flow of user experience. It works as a separate repository and works as a dependency for PiX so its easier to maintain and upgrade.

All Icons

This textarea uses pixograms as the base font, so you can type the icon names and they'll appear as ligatures. Check the original repository

add alert angry api archive ask attach audio autocomplete body branch button buy call camera cancel check checkbox click clock cloud collapse color comment config contact contacts copy cut database date delete desktop deviceorient devicerotate deviceshake devicevibrate dialogue dislike doubleclick doubletap down download drag drop edit email empty expand export face ff file film filter furious gallery game hand hand1 hangup happy image import input intrigued kiosk left like link list lock logo map merge message mobile move next notebook notify page password paste pause pay person pinch play position prev print process progress qr radio radioselect range rec remove resize rew right rotate route rss sad save say scroll search select send share smiling speak stack stop surprised switch system tablet tag tap tap1down tap1left tap1right tap1up tap2 tap2down tap2left tap2right tap2up tap3 tap3down tap3left tap3right tap3up tap4 tap4down tap4left tap4right tap4up tap5down tap5left tap5right tap5up text think time tv unlink unlock up update upload video view window zoom

Meta

Score headers and meta icons.

Generic

Multipurpose

Devices

Devices serve to specify what kind of interaction is involved. It's the key to the score:

---

Emotions

Intent

---

Objects

Device

---

Interface Elements

User Input

Playback Controls

Touch Gestures

---

System

System Feedback