SuperSmart: Smart Home App UI & Animation Design

SuperSmart loading screen featuring rotating logo animation
Overview

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

image of mid-fidelity wireframes

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

Research

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.

Image of Google Home loading screen. Text reads "Cute and playful animation uses colors and shapes reminiscent of Google's logo".
Image of Samsung SmartThings Living room page. Text reads "Quick and subtle icon movement confirms a successful tap in 
bottom nav bar".

Knowing that I would be focusing on animation design for this project, I paid particular attention to the animation used in these two apps. Many of their microinteractions evoke a cheerful sense of friendliness, which lends a positive note to the user experience.

Design

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:

simplicity, eco-friendliness, clean

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.

Image shows icon design iterations and inspiration.
Image shows first iteration of loading page design, and second iteration of the same page.
Storyboarding Animation

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

Image of screen transition storyboards, describing motion for items entering the screens on home and loading screens
Image of screen transition storyboards, describing motion for items entering the screens on temperature and lighting screens

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.

Image of lighting microinteraction storyboard, describing first half of motion changing lightbulb from color to white
Image of lighting microinteraction storyboard, describing second half of motion changing lightbulb from color to white
User Feedback

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.

icon microinteraction storyboard, first iteration describing a jump and wobble motion
Icon microinteractions, first iteration
icon microinteraction storyboard, second iteration describing a wobble motion and color change
Icon microinteractions, second iteration following user feedback
Animation Implementation

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

animated gif demonstrating Inertial Bounce expression applied 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.

animated gif demonstrating Wiggle expression applied to icons

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.

animated gif demonstrating Cosine Rotate motion applied to icons

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

The final screens are below!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s