Building a configuration UI for a wearable device

Background

From 2015 to 2020, I designed and developed web applications for a medical-grade wearable device, using React, Redux and SVG.

Problem

Our system supported the placement of small biometric sensors on over 30 different body locations. However, there was a potential for confusion between these locations (for example, mistaking "Flexor Digitorum" for "Extensor Digitorum"), and each location required a specific sensor orientation. Our customers needed an elegant, foolproof way to configure sensors.

Solution

I created an interactive, two-dimensional map of the body that displayed all the possible sensor locations and orientations:

The code

I defined each sensor location by its type and position in the coordinate space relative to one of four background images:

const locations = [
  {
    id: "FLEXOR_DIGITORUM",
    type: "muscle",
    x: 178,
    y: 167,
    orientation: 75,
    scale: 1
  },
  {
    id: "EXTENSOR_DIGITORUM",
    type: "muscle",
    x: 278,
    y: 167,
    orientation: 106,
    scale: 1
  },
  ...
];

Then I generated an icon for each sensor location:

const icons = locations.filter((loc) => {
  return loc.type === selectedType;
}).map((loc) => {
  return (
    <g
      key={loc.id}
      className="sensor-location"
      aria-pressed={loc.id === selectedId}
      transform={`translate(${loc.x},${loc.y}) scale(${loc.scale})`}
      onClick={...}>
      <circle
        cx="15"
        cy="15"
        r="15"
        data-tooltip={tx(loc.id)}/>
      <g transform={`translate(15 15) rotate(${loc.orientation})`}>
        <image
          xlinkHref="location.svg"
          width="20"
          height="10"
          transform="translate(-10 -5)"/>
      </g>
    </g>
  );
});

Finally, I combined the background image and the icons:

<svg width="600" height="450">
  <image xlinkHref={`body.${selectedType}.svg`} width="600" height="450"/>
  {icons}
</svg>

Conclusion

This exercise drew on my design and technical skills at the same time. My solution was fast and cheap to implement, and the visualizations were reused in marketing materials and technical documentation. Next time I'd like to do it in 3D!