Case study: Waterfall — an interactive Android home screen

Charlee Designs
5 min readFeb 2, 2021

There is a very niche community of Android users who treat their devices’ home screens as a form of expression. They are people who look for more creative ways of organizing their everyday favorite apps beyond what the device manufacturer intended.

My goal is to answer the needs of those users, and the needs of my own, and to create beautiful home screen designs. I want to make a mundane task of checking the time and launching an app be a more personalized experience.

Promo image of ‘Waterfall — Niagara‘ from ‘Ember for KLWP’ app.

What’s up with that Waterfall?

Waterfall — Niagara is a custom, interactive Android home screen project in the form of a live wallpaper, designed and implemented in Kustom Live Wallpaper (KLWP for short). It’s meant to work seamlessly with Niagara Launcher.

What is KLWP and Niagara Launcher, then? KLWP is a what-you-see-is-what-you-get type of tool built for designing interactive live wallpapers for Android devices from scratch. Niagara Launcher is a third-party replacement for whatever default app launcher (the main screen of your phone from which you open your apps) is shipped on any given Android phone.

No, really, what is that Waterfall?

Waterfall — Niagara is a creative bridge between KLWP and Niagara Launcher. It’s a preset made in KLWP, designed with all of the unique features of Niagara in mind.

Default Niagara look along with Wave Alphabet feature in action

Niagara’s Wave Alphabet is its distinctive feature. It allows users to find the desired app with a comfortable gesture. My goal with ‘Waterfall — Niagara’ was to embrace it and highlight it in a natural way.

Niagara broadcasts four states that it can be in, KLWP receives that broadcast.

A description of Niagara states accessible by KLWP

This allows for my live wallpaper to have animations that react to those states, making for a seamless experience of using the home screen.

When users are picking an app to launch by using the Wave Alphabet feature, the highlight is the only element present. This is a choice dictated by necessity. The number of apps present under any given character varies by user. By temporarily removing the upper section there’s no risk of the app list to overlap with any elements of the live wallpaper.

While on the Android recents screen, everything in Niagara disappears. It was an obvious choice for all of the elements of the live wallpaper to behave in the same manner. The background image takes over in its blurred version. This helps shift users’ focus from the home screen to the carousel of apps on the newly opened screen.

Swiping up on the home screen activates Niagara’s search feature. By typing in the search field, relevant apps will populate the list, top to bottom. This again means that it’s necessary to remove any elements of the live wallpaper in order to properly accommodate the anticipated app search results.

All of those animations enhance the experience of using Niagara Launcher while naturally integrating with its features and intended behavior.

Sprinkling some goodies on top, literally

While the default configuration of Niagara has a time widget, it can be replaced with third-party widgets or removed entirely. I chose the latter and designed the upper section from the ground up.

Niagara Launcher has its own semi-flexible layout. The app list’s position can be configured by users — they can move it up and down, but not left and right. This is both a challenge and an opportunity. I decided to build off of the launcher’s unique LTR layout.

The vertical line to the left of the clock accentuates said layout, and the vertically stacked hours and minutes in the clock are an extension of the vertical list of apps that Niagara Launcher offers.

As the launcher itself is of minimalistic nature, my choice was not to overload the upper section. This means that the music player is separate from the “home cluster”, so to speak, which contains clock, date, and basic weather information. Navigating between the two is only a matter of tapping the corresponding icons at the border of my upper section and the app list. This is, again, a necessity rather than choice, since Niagara Launcher does not broadcast information about swipe gestures to KLWP, which eliminates the option of quickly swiping between the two areas.

Why the music player, though? KLWP offers extensive integration with Android’s media players. Over the years it’s become a trend and an obvious addition to many KLWP presets, such as this one. It’s a convenient shortcut to one’s favorite music, available right on the home screen.

My takeaways from working on this project

Niagara Launcher is an entirely different beast compared to either default app launchers or other popular choices like Nova Launcher or Lawnchair. These can be configured to serve as blank canvas, by removing all of the user-facing elements such as clocks, app icons and more, being left with the wallpaper only.

I decided to work with Niagara Launcher for this project in order to learn how to overcome the need for the aforementioned blank canvas approach. Instead of being let loose, I took an existing UI and built upon it, expanded the experience by adding my own animated elements, all while respecting the layout of Niagara.

It was a valuable exercise, and a humbling lesson that taught me that one doesn’t always get to have it their way, even when it comes to design.

Lastly, if you would want to check ‘Waterfall — Niagara’ out, it’s available in Ember for KLWP now!

--

--