Sensor Focus

date: Aug 2016
client: Charles Dumont
role: FE Development, UI/UX

Sensor Focus accelerates the penetration of the internet of things at home, in stores, and in industrial applications. The flexibility and ease-of-use allow us to bring the latest IoT solutions to our clients at a fraction of the cost of the alternatives.

The idea and all the rights belong to Charles Dumont, a founder of Sensor Focus. Alessandro Odetti did all the back-end work.

My role on the project lies in front-end development of the flagship website. I was also responsible for UI/UX design of it as well as for the android application and admin pages.

This platform can be used by developers or ordinary users alike.

sensor-focus-about

In other words, the app uses device sensors to gather useful insight. What you can use to improve your everyday life and business.

The website itself advertises so-called "solutions". Which are just app configurations that let you accomplish specific tasks. For example, you can analyze how much time your child has spent in front of a monitor and get alerts when a specified limit is exceeded. Or you can learn what seats are most popular in your coffee shop.

The number of solutions that we needed to create was over a hundred. And every single one of them required a separate landing page. It became clear that we needed a CMS system and a lot of configurable building blocks. A system that any content manager without coding skills could use.

Once we made our choice on how the website should look and feel, I have started designing few examples of solution pages. The final design was then destructured into separate reusable modules.

Just to clarify, what is being further described in not the functionality of the app itself, but rather the front-end architecture and UX challenges that I have faced.

Handlebars.js was my templating engine of choice. Content gathered from administration pages is converted to JSON and rendered by Handlebars. The website supports both live rendering for development purposes and prerendered pages for production use. You can check the full technology stack in the repository.

Content flow chart: CMS > JSON > Handlebars Template.

Content flow chart: CMS > JSON > Handlebars Template.

sensor-focus-graph

29 fully configurable and reusable modules have been created up to date.

Custom made design system allows to create new modules with ease. By following a standard template structure and using style guide recommendations, content managers can build new component to fulfill business requirements.

You can find an example of a template and JSON configuration for it below, or you can browse all of them here.

Once the module has been added and filled with content using CMS interface, it is being parsed using a customized templating engine. A custom solution is required to show all the base and advanced level errors throughout the process.

The template you've seen above eventually looks like this when correctly configured:

Example of a rendered module which shows how to install your tracking device.

sensor-focus-module

In addition to the development of website itself, I was responsible for configuration of a separate customer support site hosted on Desk platform by Salesforce.

Additional responsibilities included UI and UX design of administration pages, few of which you can see below, and firmware design and prototyping.

You can try out the firmware prototype here.

Authentication screen that grants access to your administration panel.

sensor-focus-auth

From administration panel, you can manage your tracking devices, analyze incoming data and share access with friends and family.

From administration panel, you can manage your tracking devices, analyze incoming data and share access with friends and family.

sensor-focus-admin

I highly enjoyed collaborating with great people from Sensor Focus. I am grateful for all the invaluable experience this project brought me.

Selected Works

Sensor FocusFE Development, UI/UX

VentionReact, Motion Design

sfdx-watchSalesforce CLI Plugin