PiX app

PiX is a visual language specially crafted to define and model user experience within digital services.

We need a design deliverable that can encapsule the flow of interaction, the quality of the experience we're proposing to the user, to our team members and to the business.

Most of the documents we hand out to our colleagues and clients represent snapshots of the experience flow, and we expect them to imagine the rest, to connect the dots with their imagination. It usually requires other material explanations —such as customer journeys, video sketches with personas, scenarios and the like– to give the idea of what we really want to be happening with our design. This is mainly because 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.

Features

1. Designed for power users. Insert icons while typing with pix-iconName and TAB to jump or create the next slot
2. Save your work by storing or restoring your browser session
3. Import and export your PiX in JSON format
4. PDF output for creating great design deliverables
5. 2 Templates you can choose from: a 3-layered PiX score or a 5-layered service blueprint score

How it works

The score is divided into three layers:

1. The user layer
2. The interaction layer
3. The service 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

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

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