Essential Home
Essential is Andy Rubin’s hardware company focusing on smart home products and smartphones. https://www.essential.com/ Besides the new AI-based small phone project Gem, I also collaborated on some UI/UX design & prototyping for the home project Hato.
When Essential Home launched, Amazon Echo Show had not released yet. With no direct competitor, this project was referred to as an“Amazon Echo with a screen.” This device has a round-shaped screen, multi-directional microphone array, and an integrated IR sensor. Above all, it has an advanced AI assistant that not only provides conventional VUI-based features (setting a timer, playing music, making a call, etc.) but also acts as the central control and hub for all of your smart devices.
Targeted at a similar user group as the Echo, Hato wish to provide much advanced AI support together with a well-rounded smart home system. It will be able to serve as a smart home assistant who can do a lot more than telling you the weather and setting an alarm clock. As the biggest stand-along product in the Essential product line, it will be able to connect with Essential phone, Essential Stick, and other smart devices of yours. So that communicating with your devices and controlling your smart home system will become much easier.
My role in this project focuses more on practical user flow design & iteration. I created frameworks and prototypes to share the vision, design principles, and content strategy.
Design Challenge 1:
OOBE Experience UX
OOBE (out-of-box experience) is the experience a user has when preparing to first use a new product. Most smart home products have similar OOBE installation steps like connecting wifi, setting up an account and location information.
Hato has a small round screen, which made typing a bit trickier as a stand-alone product if installed without a companion app. Although the companion app was already in the product line (to be developed though), Hato should still be able to work without an app and we can’t assume all of our first-time users already have it installed. Forcing all users to install a new app before using Hato adds steps to the installation process.
Therefore, I designed more simple interactions like tapping yes/no buttons and provided more presets such as location information auto fill-in to help simplify this process.
User flow of OOBE experience by me
Design Challenge 2:
Glance Screen UX
Glance is Hato's stand-by screen when the device is woken up (either through a wakening command or IR motion detection). The biggest challenge in this task is how to present a typical “app list” screen decently into a rounded shaped screen format without confusing the users.
iPad and iPhone interface, image from Apple.com
During brainstorming, there were several different versions of concepts. While most of the team members agreed that the traditional grid-based listing format wouldn’t work well on the round screen, simply copying the “beehive” concept of the Apple Watch or other similar products didn’t seem to be a good idea either.
Apple Watch and Google Wear OS interface
There are more reasons for this than just being unique. Considering that users will use voice commands to launch apps more frequently than that they do on smartwatches and smartphones, there’s no need to present a big list of available apps. Therefore we targeted a design that would smoothly transition between the standby screen and APP list screen, presenting a minimum amount of APPs for the sake of simplicity.
I proposed this concentric circles concept with an inner circle for the standby screen and an outer circle showing the app list when the users interact with the product. The 4 most frequently used apps and 4 most recently used apps will be presented on the “app ring” for best accessibility.
The first version of my app switching features user flow
The final version of my app switching feature user flow, which was much cleaner than previous versions
The concentric Glance screen with circular app list design in later prototypes. Visually designed and engineered by other team members
Design Challenge 3:
Timer and Alarm Features
As the designers for the Essential Home operation system, we also worked on designing a few apps that come with the hardware such as the timer and alarm clocks. The circular shaped screen should be the perfect canvas for time-related content because the round shape can be intuitively perceived as a physical watch and clock.
As a start, I researched and presented some existing timer and clock apps design to the team and then proposed my sketches. The team liked the idea of using a virtual earth for world time. In later versions, I dived deeper into this concept and designed the full UX flow of the “earth” world clock.
Some of my initial sketches
My illustrations of the user flow of 4 major time-related features
After a few rounds of meetings within the team, brainstorming and iterations, I tried to play with the unique screen shape a bit more and proposed some other fun ideas:
Earlier concepts of the timer feature user flow by me. Circular-shaped clock and hourglass-shaped timer
Earlier concepts of the alarm clock feature user flow designed by me
The design challenges of clock features flow (and many other Hato apps too) focused on:
1. How to minimize the GUI and simplify the back-and-forth between steps since Hato is built to be a VUI centered instead of GUI centered device.
2. How to be unique and expressive without breaking the consistency created by existing visual language.
For example, we tried several fancy ways to present multiple ongoing timers but eventually for the sake of unity those designs compromised to a more simple horizontal carousel.
One of the earlier concepts of the timer feature user flow designed by me
The final design of the timer feature was much simpler