Robin O'Connell

   

TacSense

Try it View source

TacSense designs and manufactures miniaturized high-precision pressure sensors. In 2019, I was contracted to update and redesign parts of their website—primarily the Products and Applications pages. The company has undergone tremendous growth and built a new website in the intervening years, but the work I did is still available via the Internet Archive's Wayback Machine. The archived version is slow to load (likely waiting for a response from some service that no longer exists) but otherwise fully functional.

The centerpiece of my contribution was a series of connected, animated figures and illustrations for the Products page. The client wished to emphasize that they were offering a complete solution from physical sensors to data analysis and everything between. I devised an "animated trail" (trademark pending—no, not really) that visually connects each layer of the tech stack as the user scrolls down the page, mimicking the flow of data through the actual system. There are screenshots below, but I recommend trying it yourself to see it come to life.

Screenshots

The heading "Complete Tactile Solution" overlays a render of TacSense's pressure sensors, which vaguely resemble tennis rackets. A circular blue button labeled "Explore" connects to a blue line that leads off the bottom of the page. A winding blue line leads from the top to a render of one of TacSense's pressure sensors, then turns gray and continues off the bottom. Adjacent to the image is the heading "Sensors" above a couple of bullet points. A winding blue line leads from the top to an intricate vector illustration of a circuit board, then turns gray and continues off the bottom. Adjacent to the circuit is the heading "Hardware" above a couple of bullet points. A winding blue line leads from the top to a vector illustration of an antenna broadcasting radio waves, then turns to dashed gray and continues off the bottom. Adjacent to the antenna is the heading "Wireless" above a single bullet point. A dashed, winding blue line leads from the top to a vector illustration of a mobile phone displaying an ECG trace, then turns to solid gray and continues off the bottom. Adjacent to the phone is the heading "Software & AI" above a single bullet point. A white line leads from the top to a white circle containing a photo of TacSense's pressure sensing module. Adjacent to the photo, the text "Standard Development Kits are available for creators" appears above two buttons labeled "Contact Us" and "View Product Guide". The heading "Endless possibilities" appears above three buttons labeled "Health & Wellness", "IOT", and "Industrial". The background shows a shoe with attached TacSense pressure sensing module and a hardhat. Under the heading "Health & Wellness", an offset blue circle containing the slogan "Implementing functional platforms to connect all life activies for a better tomorrow" overlays a circular photo of a person jogging. Adjacent, a few bullet points list relevant product features. A paragraph of marketing copy appears under the heading "Wearable Pulse Sensing". Adjacent, a shadowy render of a human body is marked with blue circles at 9 major arteries. A blue line connects one of the circles to the label "Brachial Artery".

Tools & Technologies

  • HTML/CSS/JS
  • SVG
  • PHP
  • WordPress
  • Integration with WPBakery Page Builder