top of page
Image by BoliviaInteligente

Live Priority

Live Priority is a lightweight application designed for tiered community ranking. It allows users to select their first and second preferences and see the collective data update instantly upon submission. Fully customizable and flexible, it is built to adapt to the specific needs of any local project.

Why did I build this?

"Community preferences shouldn't be a mystery. Often, the true insight lies in the balance between 1st and 2nd (even 3rd, 4th...) choices. I wanted a straightforward way to capture that nuance and give the data back to the residents immediately. This tool provides what matters: a clear, real-time look at community intent."

Image by Visax

Live Priority

Key Features

Tiered Preference Selection

Beyond a simple vote. Capture the depth of community intent by allowing participants to dynamically rank their first and second choices across all available options.

Advanced Visual Feedback

Real-time results at a glance. High-quality graphics immediately visualize the split between primary and secondary priorities the moment a user hits submit.

Qualitative Context
Add the "why" to the "what." Participants can submit brief comments alongside their choices to provide the human story behind the quantitative data.
Instant Dialogue Display

Transparent community sharing. User comments appear on the page immediately after submission, fostering an open and honest exchange of ideas.

Flexible Project Scaling

Built for any scenario. The application easily adapts to accommodate different tiers, categories, and ranking options to fit specific project needs.

Live Engagement Tracking

Total transparency in participation. The total number of participants updates automatically in real-time, showing exactly how many voices are shaping the outcome.

Live Priority

Tech Notes

Implementation Resources

Layout & UI Architecture

Goals: To create a high-speed, tiered ranking tool that captures 1st and 2nd choices and visualizes community intent without page reloads.

  • Max-Width Wrapper. 1100px. Balanced width for readability of both survey questions and data charts.

  • Global Alignment. Vertical Stack. Sequences title, questions, options, and results in a logical, descending flow.

  • Answer Options. Repeater (Rows). Organized into two columns: Text (left) and Choice Selection (right).

  • Internal Spacing. 20px - 25px Gaps. Maintains a clean, "no-fluff" aesthetic with consistent breathing room.

Module 1: Submission & Ranking Logic

Unlike standard forms, this application bypasses native Wix submission functions to ensure higher performance and custom data handling.

  • Custom Submission Control: Both the priority selections and the comment field are managed via custom Velo code. This prevents typical form-submission lag and allows for the instant refresh of the results dashboard.

  • Weighted Participation Tracking: * Poll Counts: Managed via custom code to accurately track unique 1st and 2nd choice weights.

    • Comment Counts: Utilizes the native Wix CMS count function for efficient, real-time totalizing of qualitative entries.

Module 2: Interactive Data Visualization

The results section is to turn abstract choices into a clear visual "pulse" of the community.

  • Chart.js Integration: The poll results are rendered inside a custom HTML iframe using the Chart.js library. This allows for advanced, multi-colored bar charts that distinguish between 1st and 2nd choice "weights."

  • Qualitative "Speech Bubble" Display: * Comments are displayed in a Repeater using an A/B alternating design pattern.

    • Visual Style: Individual cards use a specific radius setting (24px, 24px, 24px, 0px) to mimic a quotation bubble, emphasizing that these are human voices, not just data points.

    • Comment Input: A structured 2-column, 2-row grid with generous padding (25px/50px) to make the act of writing feel open and uncrowded.

bottom of page