iMistAway v3

Web App, Mobile App, Design & Development

MistAway Systems is the leading manufacturer of misting systems for controlling mosquitoes and other annoying insects. That's the official blurb, but only half the story. MistAway is also a pioneer in the Internet-of-Things space, and I had a rare opportunity to rethink both their web and mobile offerings from the ground up as they transitioned to a brand-new platform.

 

Over the course of a year, my work with MistAway moved through several phases.

1. Design. We began in Sketch before transitioning to an interactive InVision prototype. The design phase accomplished two things: it established the new aesthetic—blue and its shades, with strong emphasis on white space and typography—while ensuring that none of the functionality from the existing applications was left behind.

2. MVP. The motivation behind this entire project was the need to transition iMistAway to a newer, more performant IoT platform. The transition entailed several months of work to migrate data and create an entirely new tech stack to maintain and monitor the new platform. My first task was exploratory. I built two small React apps to demonstrate the new platform's speed and showcase how to communicate with its APIs.

3. Proxy server. We opted to have both the web and mobile apps communicate with a middleman server in lieu of speaking directly to the new platform's API container. To that end, I wrote a lightweight Express.js server that rerouted all API calls to the correct destination, but also established new endpoints for additional functionality.

 

4. Build, build, build. Over six months, I developed the web and mobile apps in tandem. Each had unique requirements: the web application was designed for power users—those who have multiple units, if not hundreds—whereas the mobile application targeted homeowners with typically one or two at the most. That contrast kept me on my toes. Every design decision needed to defer to the target audience, and to take into consideration the user's relationship with the product. Where the projects are similar is in shared libraries: React (and Native) as a UI framework, and MobX to handle fetching data and managing state.

5. Launch. Migrating an existing IoT platform is no small task. Migrating on the cusp of an active mosquito season is even more challenging. As MistAway flipped the switch, my role shifted to support. The integrity of the migrated data needed to be verified, and several scripts needed to be written to take that data and transform it to suit the requirements of the new platform. To that end, I employed Ink to create a command line application that housed over two dozen support scripts. This was my first foray into the world of CLIs, but hopefully not the last.

6. Grow. When the new apps and platform went live, the work continued. In the months after, I added timeseries charts, crafted a custom datepicker component, incorporated a custom map view of the data using Google Maps, and designed a history table feature (seen above) complete with server-generated CSV downloads.

It was a lot of work. Luckily for me, MistAway was a dream client from beginning to end. I'm proud of what we've built together, and excited to see how their new platform and suite of apps supports iMistAway for years to come.

What Worked

  • Constant communication. MistAway gave me access to their private Slack channel early on, and I fostered a great relationship with the team in charge of the migration. We maintained regular contact through once-a-week in-person meetings and weekly sprints.
  • Simple colors. I took MistAway blue, their chief brand color, and infused it into white and black. The resulting trio of colors served as the bedrock for both apps and simplified the visual language of both designs.
  • MobX. I am a fan. A super fan. For many reasons, but chiefly this: mosquito misting systems send a surprising amount of data every few minutes, and the UI needs to be well-equipped to reflect even the smallest of those updates. MobX made this astoundingly easy to do—on both web and mobile.

What Didn't

  • a11y. As the web application grew in size—especially near the official launch—I began to take less care with semantic markup. I regret this, and I make no excuse for it. One of my goals moving forward into 2020 is to redouble my efforts to create clean, accessible applications. (No matter the complexity.)
  • Android. React Native builds applications for all, whether you rock an iPhone or not. I own an Android device to test with, but the reality of the situation is that I spend 99% of my time with one platform over the other, and that kind of thinking bleeds—consciously or not—into my designs. I need to give Android its due.