To start this project, I received the mid-fidelity wireframes pictured here, created by a UX designer.

Target Audience:
• 25-40 years old
• interested in energy efficiency
• want to control their consumption in smart ways
• avid smartphone users

Before beginning the design work, I researched competitor apps that are popular in this field. As Google Home and Samsung SmartThings were both featured on lists of the best current smart home apps, I downloaded and examined these two in detail.

Using the research into successful apps in this market, as well as the information provided for this project, I chose three core values for this app:

With these values in mind, I designed high-fidelity screens for this app, chose a color scheme, and began developing a logo. I drew inspiration from icon designs, aiming for the cleanest and simplest visuals.

I worked out animation concepts using storyboards, first focusing on screen transitions and two microinteractions.

All proposed animations would be activated by a user interaction, so that the motion does not get in the user’s way, but rather confirms that the action they took was successful.

I shared these storyboards with potential users, and received the feedback that the first iteration of the bottom nav bar icon animation (see below) may be unnecessarily complicated. As this is counter to one of the core values for this app, I refined and simplified the microinteraction.

I used the Inertial Bounce expression
to add a gentle bounce to screen transitions.

Next, I tried using the Wiggle expression
to animate the bottom nav icons,
with the if/else expression limiting
the length of the wiggle animation.

I found that this motion was too erratic for the tone of this app, and used the Cosine Rotate preset via Mister Horse’s Animation Composer to quickly and easily add a more gentle rotation to these icons.

I then animated the lightbulb microinteraction using 3D techniques, and created
a preloader animation for the app.

The final screens are below!