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 ("muscle", "region", "cardio" or "spine") and its position relative to one of four background images:

Then I generated an array of icons for the selected type (e.g. "muscle"), using SVG:

Finally, I superimposed the icons on the correct background image:

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!