Offline UX Tool

Hero Logo

I.
Project Overview

Privacy-first remote card sorting that made Vela’s weather Information Architecture (IA) explainable—before wireframing.

  • Outcome: Dashboard IA map · User-language labels · Safety-first Prioritization
  • Role: Designer/Builder
  • Stack: HTML/CSS/JS
  • Tags: Privacy-first · Analysis-ready export · Frictionless sorting flow
  • Study: Remote open card sort · 32 cards · n=5 sessions · consensus ≥4/5
One session captures clusters, labels, priorities, and rationale—locally.

II.
Objective

Vela’s weather experience spans many conditions, metrics, and alerts. Before wireframing, I needed user-grounded IA—evidence for how people naturally group weather items, name categories, and prioritize what matters “right now.”

III.
Constraint

In remote research, some participants hesitate to use typical online card-sorting tools due to privacy concerns (accounts, cloud storage, tracking). That hesitation can hurt recruitment and reduce candor—putting the research itself at risk.

IV.
Solution

I built an offline-first card sorting tool that runs locally in the browser:

  • Local-only by default: No accounts, No cloud
  • Participant-controlled export: Optional JSON export
  • Fast, self-explanatory flow: Drag & Drop, add zones, reorder
Privacy-first data flow Data stays on the participant’s device; export is optional and participant-controlled. Participant device Local only No cloud, no accounts (Optional) Export JSON Participant-controlled Researcher analysis Synthesis & decisions Data stays local unless exported by the participant.

V.
Method (Open Card Sort)

  • Participants: n=5 participants (remote) · water-activity planning context
  • Format: Remote open card sorting · 32 cards · local browser run · JSON export
  • Prompt: Plan a water activity → group cards → label groups → answer post-sort questions
  • Analysis: Aggregated clusters/labels/rationales · consensus ≥4/5

VI.
Outputs

Within a single session, the tool captured the inputs needed for IA decisions:

  • Clusters: How users group weather items
  • Labels: The words users naturally use for categories
  • Priorities: What should surface first vs. stay in details
  • Rationale: Why items belong together (short post-sort questions)
Post-sort questions capture the reasoning behind groups and labels.

VII.
Impact on Vela

Card sorting made Vela’s dashboard IA evidence-based, clarifying structure, labels, and priority.

  • Alerts / Safety: Alerts became a dedicated safety layer with Today’s Alerts and Safety Alert Settings (presets + custom signals).
  • Water Quality: Water Quality became a primary domain with official data and community updates, with water risks surfaced through the alert layer.
Consensus (n=5 sessions) Line-less compact consensus summary: domain, agreement count, and note. Consensus (n=5 sessions) Domain Consensus Note Alerts / Safety 5/5 Distinct decision layer Water Quality 4/5 Often distinct domain Offline / Navigation 5/5 Planning prerequisite Accessibility 5/5 Expected as a set Community 5/5 Separate from alerts
Final Vela dashboard information architecture map derived from card sorting results
Final IA map derived from the consensus clusters (n=5 sessions).
View Vela case study (IA)