UFS (Unica Family Shop)

Robin Schneider, Nicolas Birrer

UFS is a playful tool designed for having fun and experimenting with friends while discovering the UNICA family. It allows users to collaboratively design stickers inspired by their local supermarket.

The UI consists of four plastic fruits.  The rotation of each fruit controls parameters such as sticker size or font choice. Additionally, each fruit has two corresponding partners. The distance between fruits controls further design elements, such as color or font weight. This promotes a collaborative design process, best enjoyed fresh and with friends. To aid the eager designer, the tool includes an additional UI dimension in the form of a digital receipt.  However, we suggest not focusing too much on the details; enjoy the slight chaos and create something with a friend!

GitHub repository

Dynamic Enviroment

Unica Familiy

automatic stand by mode

Layout Overview 2

Layout Overview

Code Process

Each April tag is related to another tag, and each relationship has its own code block. This allows the code environment to be dynamic and adaptable.

 // r:A0M2: WEIGHT
  if (ids.includes(0) && ids.includes(2) && laststicker) {
    const det0 = detections.find((d) => d.id === 0);
    const det1 = detections.find((d) => d.id === 2);

    const dx = det0.center.x - det1.center.x;
    const dy = det0.center.y - det1.center.y;
    distAM = Math.hypot(dx, dy);

    const minDist = calibrMin;
    const maxDist = calibrMax;

    let minVal, maxVal, minValWght, maxValWght;

    // DIFFR PARAMETERS WGHT
    if (currentFont === "unicaSoft") {
      minValWght = 57;
      maxValWght = 228;
    } else if (currentFont === "unicaMono") {
      minValWght = 300;
      maxValWght = 700;
    } else if (currentFont === "unica") {
      minValWght = 32;
      maxValWght = 228;
    }

    let wght = (distAM - minDist) / (maxDist - minDist);
    wght = Math.max(0, Math.min(1, wght));
    wght = minValWght + wght * (maxValWght - minValWght);

    const lbl = laststicker.sticker.querySelector(".label");
    if (lbl) {
      wghtValue = wght.toFixed(2);
    }

    const valueA0M2 = document.getElementById("propertyValue-41");

    if (valueA0M2) {
      const text6 = valueA0M2.textContent.trim();
      const unit = text6.replace(/[0-9.]+/g, "").trim(); // clean unit

      if (typeof wght === "number" && !isNaN(wght)) {
        const roundedWght = Math.round(wght);
        valueA0M2.textContent = roundedWght + unit;
      } else {
        console.warn("⚠️ Invalid wght value:", wght);
        valueA0M2.textContent = "-";
      }
    }
  } else {
    distAM = undefined;
  }

Layout Overview 3

Visual Processs

Fruit Sticker Inspiration

Layout Process / Drafts

Visual Concept