Lowe's Iris Home Automation

A (since retired) home automation platform to integrate Lowe's brand and third party smart devices into a central control web application.

Skills

  • HTML 5
  • CSS/LESS
  • Usability
  • Accessibility
  • Responsive Design
  • Interaction Design
  • Animation

Tools

  • Atom
  • Chrome Inspector
  • CanJS
  • DocumentJS
  • Github
  • Accessibility Checker
  • Axure
  • Giphy Capture

Lowe's had purchased a Kansas-based start-up to jump start their foray into the home automation space. I was brought in with a small team of Javascript developers to work side-by-side with an in-house UI Designer. Our goals: To build out a responsive, OS-agnostic, smart device control system with dashboards, and a documentation website showcasing every aspect of the application for future maintenance and development.

Lowe's Iris Dashboard
An iteration of the Lowe's Iris Home Dashboard

Before my arrival, their designer had done branding work, basic information architecture, and desktop-sized designs. However, he was not very technical, nor familiar with responsive design. That's where I came in. I took his brand guide and mock-ups and started building a design system and component library. Using DocumentJS/DocumentCSS, I documented everything: font styles, color palettes, break points, icons, button states, etc.

Lowe's Iris Button Documentation
An example of a documentation page, basic button design.

Once this foundation was set, I roughed out the interfaces of the app in HTML and some base SCSS. I also collaborated with the In-house Designer to improve general usability, accessibility, and address how the designs changed according to different screen widths to make it responsive. I could then hand off static HTML-based pages to our developers, and they could focus on connecting to the API and building out more complex functionality.

Lowe's Iris Responsive Demo gif
Demo of how a page shrinks on smaller screens

Part way through the project, accessibility and usability were discovered to be paramount to this project as many, many of our users were disabled. Automating parts of their homes with central digital control made their houses safer, easier to navigate, and improved the overall quality of their lives. It was clear the controls and status reports needed to be easy to see, understand, and customize. Beyond making sure to use accessibility HTML tags and high enough contrast text, we also added many animations into the interactions to smooth transitions, lead the eye, and non-verbally share information.

Lowe's Iris Custom Slider Demo gif
Demo of various types of slider inputs

An example of this is the sliders we created to control smart light bulbs. Some of them were based on light temperature, some RGB, and most of them had brightness control as well. I figured out how to style the default HTML slider input to indicate what color/ temperature/ brightness the slider had and made sure the touch target was nice and large and easy to select.

When I left the project, the basic functionality for dozens of devices had been pushed to production and we were working on the next phase of features for security and alarm systems. Unfortunately since then, Lowe's decided to retire the whole concept and ended the sale of their smart device line. It's a disappointment to see a project with such great roots made by great people fail, but sometimes the financial bottom line gets the better of us all.