Nishad Patne

Projects / PI Card Deck

Completed

PI Card Deck: four reflection decks for ASU, on the web and on phones

1 / 5The home page

Product
PI Card Deck, the free digital home of ASU's Principled Innovation card decks
Role
Designer and project lead
Team
  • Nishad P (design and project lead)
  • a designer (graphics and testing)
  • an engineer (engineering review)
  • the PI team (card content, illustrations and reviews)
Timeline
  • May to September 2026
  • launching to a wider ASU audience at the PI team's Fall Convening event
Status
  • Passed the PI team's review and handed off on September 29
  • live on the PI team's site
  • the code sits in a private LEI repo, now with the PI team
Made for
ASU's Principled Innovation team, by ASU's Learning Engineering Institute (LEI)
My tools
  • Figma Make
  • VS Code
  • Claude Code
  • Asana
  • axe
  • WAVE
  • Playwright
The site runs on
React, front end only, with no backend or accounts

The Principled Innovation card decks hold questions for reflection, to open a meeting or think through a decision before acting.

Principled Innovation is ASU's framework for decisions guided by character and values, and one of the university's design aspirations, the goals it sets for itself.

In 2026 the PI team asked LEI to redesign the decks for Preschool, K–5 and 6–12, the first of them new, and to bring everything into Spanish. I ran the project end to end, from the spec to the hand-off, and directed the AI agents that wrote the code.

The result is four decks in English and Spanish, on desktop and on phones.

01

Impact

  • 158,000+students

    Reach

    Made for the whole ASU community, 158,000+ students and 21,000+ employees, and its extended community of schools and educators; free to anyone on the web.

  • Free, where print costs

    The printed decks sell for$30 to $40 each
    all four arefree here

    The printed decks sell for $30 to $40 each; all four are free here.

  • eightmilestones

    On schedule

    From scoping on May 12 to hand-off on September 29, through eight milestones.

  • Passed client testing

    The PI team's two rounds changed only wording and a logo.

  • Live on the client's site

    It runs at the PI team's own address, ahead of a wider launch at their Fall Convening.

  • More than the contract

    A fourth deck, for educators and adults, that the contract left out.

02

What people use

Four decks: Practice PI for educators and adults, Preschool, K–5 and 6–12.

Popular: The PI team calls the decks one of its most popular tools.

In teaching: ASU's teachers college has used them in its graduate teacher preparation courses since fall 2021.

In research: They appear in published work on character education and research ethics.

A deck you flip through, on desktop

1 / 4The home page
Sliding and flipping cards (video, 17 seconds)

  • Like a deck on a tableThree cards in a row, and only the centre one responds.

  • Moving through itThe arrows, the keyboard or a rail of numbered thumbnails. Tap a card to flip it to its deeper question.

  • Colour means a domainIn Practice PI, K–5 and 6–12, every card belongs to one of four domains (moral, civic, intellectual, performance), each with its own colour.

  • A dock at the bottomFilter by domain, shuffle, or switch to a grid of every card.

  • DefinitionsIn a drawer beside the deck.

Around the deck

1 / 5An activity

  • ActivitiesEach deck has its own, to run with a group.

  • Daily questionOne card from each deck, picked by the date, so everyone sees the same card that day.

  • FavoritesCards for one meeting or class, cleared when the session ends, as the spec set out.

  • Create a cardWrite your own, front and back, with a live preview.

  • SharingAny page as a link or a QR code, so a room can open the same deck on their phones.

On a phone

  • The deck
  • The back of a card
  • The dock, with filters
  • Flipping a card, then switching to Spanish (video, 10 seconds)

  • The same parts, restackedThe card fills the screen, and the dock stays pinned at the bottom, within reach of a thumb, with the filters behind one button.

  • One designI decided early that phone and desktop share the same components, so they never drift apart.

English and Spanish

  • One switchIt changes everything from the navigation to every card, and the site remembers it.

  • Preschool in SpanishI produced the Spanish for Preschool, and the PI team reviewed it.

  • Room to growCard layouts leave space for Spanish, which runs longer than English.

1 / 2The home page in Spanish
03

One system, four decks

The spec asked for navigation that takes any number of decks without structural changes, so I designed one system.

1 / 5Practice PI

  • Quiet frame, loud cardsThe site is a quiet ASU frame, and the decks carry the colour. My brief for the deck view said it in four words: loud cards, quiet room.

  • Colour with one job eachA domain's colour means that domain wherever it appears, and each deck brings its own art to its own pages.

  • Accessible by ruleWhich text colours may sit on which backgrounds, and every selected state shown with more than colour.

Four structures, one deck view

  • Practice PI: two questions with the practice they explore

  • K–5: a question for grades K–2 and one for 3–5 on each card

  • 6–12: the steps of a decision

  • Preschool: self, others and environments, with cards for adults and cards to use with children

  • A fourth deck, almost freeThe contract left Practice PI out, but its cards already sat in the same data and only its design differed. Adding it was a data job, so I shipped it too.

  • Client asks absorbedWhen the PI team wanted their deck art on the 6–12 cards, it went into the same card layout.

04

How I ran it and tested it

I wrote the spec, ran the client reviews, designed the site, the experience, the decks and the translations, and directed the AI agents that wrote the code.

  1. A spec the client could hold me to

    what we'd deliver, part by part; what we assumed (front end only, no accounts, favorites for one session); what was out of scope; how changes would be handled; and eight milestones from kickoff in May to launch readiness at the end of September.

  2. Decisions in the room

    each month I demoed the working site to the PI team and we settled the open questions there, like which logo goes where, where definitions live, and what to call a group of preschool cards. Between meetings, they had a staging link.

  3. A board built for agents

    ten two-week sprints in Asana behind the eight milestones, with a status of its own, AI Draft, for work agents generated that no person had checked yet.

  4. Agents on written briefs

    first in Figma Make, Figma's AI prototyping tool, then in VS Code and Claude Code. Each brief set what to change and what to leave alone, what done looks like, and when to stop and ask. Early on, an agent invented two domains and renamed two others; a cleanup brief took them out and restored the names.

  5. Testing in rounds

    1. 01three rounds by a designer on my team and me, before the client saw it
    2. 02accessibility checked against WCAG 2.2 AA, the web's accessibility guidelines, in one day: WAVE by hand, axe run by agents
    3. 03two rounds by the PI team, and the experience came through both unchanged
05

Reflection

Most of my work is web apps for researchers and teachers, and branding. This is my one real client-facing website, on the web and on phones, and the kind of project where a traditional interface is still worth doing well, because an organization is showing its own work to the public.

To me it also reflects how I deliver: tested in rounds, and run as one system from the spec to the hand-off.