Prototyping an App Connected IoT Device for Tracking Product Usage

This prototype was made for an awesome company called Who Gives A Crap that sells sustainable toilet paper direct to consumer all over the world and donates profits to sanitation efforts in developing countries.

1-to-1 motion tracking proof of concept

I was experimenting with ways for Who Gives A Crap to automate customer ordering and increase customer retention. They said “no idea was too big or small,” and they loved “out-of-the-box” thinking.

So the following design is what I came up with to answer the questions:

  • How could we better understand customer ordering habits?
  • How could we increase customer retention?
  • How could we track product usage at a granular level?

Toilet paper rolls roll around in a circular motion. Also, the company’s products are uniform, all rolls have exactly the same amount of toilet paper on them. If there was a device attached to the product then we could track the rotations, measure the rotation of a roll, and tell with confidence when it’s time for a new one.

These ideas just come to me…

With the wave of smart home automation devices well upon the market, I wanted to create a smart toilet paper roll that could help the company better understand customer behavior and also automate an order process for the customer, since currently that ordering process is manual.

Early sketches of the idea for the proof of concept

By using a low power micro computer, along with WiFi Connection hardware and an accelerometer, we can measure the rotation of a toilet roll.

For more confidence, we can use the onboard accelerometer and gyroscope to detect a roll change motion. This roll change event is very different than the standard single axis device rotation characteristic of product usage. The product usage motion is almost totally around the x-axis with negligible motion on other axes. Therefore, we can detect with confidence when the user changes the product for a new roll because we will detect a large amount of motion on the other axes.

We expect the device to rotate in a particular direction, but that direction could go the opposite way when users change the roll. So I account for that possibility in the code. There also could be slight rotations in opposite direction simply through normal use and these are also taken into consideration. Since it takes on average (with minimal deviations) 244 rotations to empty a roll based on manual testing as well as testing with the hardware, generally we will be able to tell with confidence when a roll is low and alert the user accordingly.

We can assume we already have information on a user’s inventory, based on their order history, so we can prompt them when it’s time to restock their supply and queue up an order.

I used a low latency AWS instance to host the backend of the project that tracks the rotation and displays the visual data on the front end in real time.

The purpose of this prototype was to demonstrate possibilities and show what we could do. In the final commercial product we would want to have on board storage on the device, the data we are storing is extremely small data points, and may be upload once per day.

In real-world usage, we wouldn’t necessarily need real time data. Depending on what the consumer facing App ends up offering to users, we might only need to upload data once per day. That way we are keeping the device in a very low power sleep mode. Depending on the engineering, we might be able to simply upload data for a particular event after a set amount of time has passed since the last motion i.e., after the user has used the product, count a set amount of time, then upload the data.

I would need to experiment further with these methods to confirm it works as expected and efficiently because there are major power considerations to take into account. The device needs to be extremely low power, only be consuming power when the device is in motion, and alert the user when the battery is low. We want to minimize how often a user has to charge the device so as to keep it convenient for them. If they have to charge their toilet rolls every week, they probably aren’t going to want to use this product tracker.

Of course, the connected App and its design are core to this product’s success. As long as it’s set up is simple, easy to use, and doesn’t really change customer behavior, and we give an incentive for use such as free toilet paper, money off a future order or other similar discount or incentive, we can expect a large uptake in usage.

Company Logo
Device Logo Design Concept

Who, what, when, why, where? Why give a crap? WiFi? Wi Give A Crap

Branding is a huge component here. The founders of the company talk a lot about their unique branding, and it’s clear they aren’t being shy, so far it’s worked well for them, and I love working with quirky brands that embrace their uniqueness and love to draw attention. My favorite part of UI design is tying branding themes and motifs throughout the experience, to really immerse people in the brand with little details.

Some early UI Concepts for the Web App Prototype

Demonstration of successful “Roll Change” event detection and respective animation on Web UI
Custom Themed Icons for the Who Gives A Crap App

I wanted to go for a flat minimalist style for icons, based on rounded line art, and instantly thought of using a spiral to represent a toilet paper roll as seen looking down the left side.

As it turns out, perfect vector Archimedean Spirals are not trivial to create in Illustrator. Nevertheless, I felt that the shape would be a perfect representation of a roll of toilet paper, for a flat minimalistic icon.

Achievement Animation

This product also drives consumer loyalty, as reorders will be automatic. Customers will appreciate the automated ordering, rather than having to log into their account and place an order when it could be too late, maybe they’re all out. Which naturally would result in them going to the store and buying another brand. This product tracker benefits both the company and the customer.

Push Notification Concept for iOS App

We could also connect it to health apps and home apps to help users track health data and enable Siri or Alexa to check levels of toilet paper in bathrooms.

Ultimately this device will:

  • increase customer loyalty by simplifying the ordering process by automating reorders
  • increase customer retention by smoothing the ordering process,
  • increase customer engagement with the brand through activities, achievements in the app
  • raise brand awareness through unique/viral marketing campaigns, provide the company a strategic advantage with data on customers habits regarding product usage

You could actually use machine learning on these large data sets (with anonymized data (of course)) to understand the differences between toilet paper usage events… but that’s definitely a topic for another discussion.

A conceptual popup animation, designed to be quirky and draw attention – right on brand
The final Wi-Give A Crap Toilet Paper Usage Tracking Device

I’m a highly experienced UI designer but recently have become involved with more comprehensive, holistic product design that extends beyond just software design and melds great Apps with custom hardware to deliver exceptional UX.

One more thing

I used the same pattern from the existing product packaging for the wallpaper on the mockups and animations

I don’t even think anyone else at the company noticed this.

Regardless, that’s the level of detail I work at.