Case study: Peek Launcher

8 min readDec 7, 2016

Peek Launcher is a passion project by me and my good friend Markus Hintersteiner, created over the course of many Friday evenings. It’s now available on Google Play.

My responsibilities include everything related to Interaction Design, Prototyping, Branding and Copywriting.

The Problem

The project started out of a mutual disappointment in the current state of Android homescreen applications. Not much has changed since Steve Jobs announced the iPhone in 2007, even though the way we use our smartphones has become infinitely more complex.

An average homescreen holds about 20 app icons. The average user has about 100 apps installed. That’s 5 pages, each with 20 icons. If you want to launch an app quickly, you better remember where exactly it is sitting in that 5x20 grid.

Presenting: Homescreen Sim 2017. (Bored? Try to find #147.)

Clearly, not ideal.

But let’s ignore the functional side of it for a second. Say you have no issues remembering the placement of those 100 icons, and you don’t mind swiping 4 times to get to the app. Are current homescreen systems then providing a nice experience, ignoring those faults?

No. A screen with a 4x5 grid of icons, regardless of having poor functionality, also looks cluttered. Admittedly, it’s better than your parents’ desktop, but only slightly.

You could say this is subjective, but there are more people who don’t like the look of their homescreens. Like Google. And Apple.

Just have a look at the promo materials both Google and Apple are using to showcase their newest flagships. Neither are showing homescreens the way they are used: full of icons. They don’t promote their phones with realistic homescreen setups, because, well, it simply doesn’t look nice.

Conclusion: to make your homescreen great again, the only thing you have to do is limit yourself to 5 icons per page.

The Solution

So how do we balance functionality and information density? We don’t want to show too much information at once, but also don’t want to hide anything too far out of reach, or tricky to find.

Peek Launcher is built around 3 core principles, designed to solve exactly these problems.

1. Smart suggestions

Peek Launcher uses machine learning to learn the user’s behaviour, and processes this data to present the 8 items the user most likely needs. Factors being taken into account are location, time of day, day of week, activity (rest, walking, biking, driving), other apps recently launched, and more.

After months of internal testing, the results have proven to be very accurate and more importantly, very usable.

When I start biking to work in the morning, Google Play Music is the first app on my homescreen.
When I’m at work, apps like Slack, Dropbox, Todoist, Google Drive and Chrome are always on my homescreen.
When I go for lunch, my loyalty cards app is right there.
When I leave work in the evening, Google Play Music appears again, as well as a shortcut to the Hangouts conversation with my girlfriend so that I can tell her I’m on my way.
When I get home after work, Netflix and a shortcut to my smart light bulb both appear on my homescreen.

In most cases, I don’t need to do anything to find the app I’m looking for, it’s already there.

2. Fast searching

Of course it’s not possible to always know what the user will want. If the item you need is not in your eight recommendations, we make it as easy and fast as possible to retrieve. For this we’re using a persistent numeric keyboard combined with T9-model search.

The numeric keyboard proved to perform better than a full QWERTY keyboard. Keys on a traditional keyboard are 36dp wide, which is not even close to Google’s recommended touch target size of 48dp. The numeric keyboard has only 3 columns of keys and allows keys that are 120dp wide, more than 3 times bigger than those on a traditional keyboard. The increased size has a clear benefit in easy of use and typing speed.

The downside is that we lose some accuracy from a single keyboard input. An “ABC” key of course returns more possible results than the “A” key you would find on a traditional keyboard.

To compensate for this loss in search accuracy, we rank the search results using the algorithm described above. So while a single keyboard input returns more results, we are able to rank those results according to what the user is most likely to launch, which easily offsets the higher amount of results.

The end result is that our numeric keyboard is both faster and more accurate than a traditional keyboard would be, usually taking only one or two taps to find any item you need.

3. Launch anything

With these powerful systems in place, it doesn’t make sense anymore to limit a homescreen to applications. The end goal is to make anything launchable, straight from your home screen. Why would you want to open Google Keep and then go to create a new note, if you could create one straight from your homescreen. Or open your contacts app if you could directly open your friend’s contact info.

We are achieving the first step towards this goal by leveraging one of Android’s most unappreciated features: Launcher Shortcuts. Basically every major app allows the user to add shortcuts to certain aspects within the application.

So Peek does not only expose apps, but additionally shows you the content inside those applications.

Conversations with friends: Shortcuts work with the stock SMS app, Facebook Messenger, Hangouts, Whatsapp, …
Shortcuts to actions inside apps: Adding a task with Todoist, creating a Google Keep note, Composing an email, creating a Calendar event, navigate home, taking a selfie, scanning a document with Google Drive, …
System settings: toggle power saving, enable airplane mode, enable flashlight, …
Websites: add any website to your homescreen with your favorite browser, and launch them just like you would any app.
Dynamic app shortcuts: with Android 7.1, Google added Dynamic App Shortcuts, allowing any app to present the user with a couple of recommended shortcuts or actions. These can be accessed by dragging down on the app icon, or adding it as a stand-alone item.

All these things are now first class citizens on your homescreen.

While traditional launchers also support adding shortcuts, the defining difference is that Peek Launcher allows you to add as many as you want, without adding any clutter. Using a traditional launcher, adding shortcuts to your 20 most used contacts would be a mess. Using Peek Launcher, you won’t even see they’re there until you need them.

UI/UX Design

Peek is a very different kind of launcher.

One thing we definitely wanted to avoid is people seeing our launcher for the first time, being confused about how it would work, and not installing it. Everyone knows homescreens, everyone knows keyboard. So to make the app feel familiar, even on first contact, we decided to leverage those existing affordances as much as possible.

The top part of Peek Launcher is pretty much a traditional homescreen. The bottom part looks like a very normal numeric keyboard. So even though the application is a very different take on the homescreen, it does not feel intimidating or complex to a user seeing it for the first time.

We decided to go for eight icons by default. While we could have fit in a third row and/or fifth column of icons, this did not make sense due to the accuracy and speed of the keyboard. Having an ever-changing selection of icons means the user has to scan these every time. Anything more than eight icons, and it becomes counterproductive to scan all the icons when you could search for them.
We found eight to be the be the perfect balance. You can see at a glance whether the app you need is already there, and if not you can search for it, without the delay you’d get from having to scan more icons.

It was clear from the start that we wanted Peek to be very utilitarian. With our focus on speed and efficiency we did not want to introduce any visual fluff, and worked hard to restrain ourselves to the bare necessities.

However, homescreens are probably the most personal aspect about a smartphone, allowing people to personalise the most central part of their device. So while we did not add any visual element purely for the sake of being beautiful, we did keep personalisation as one of our top priorities, so every aspect of the launcher can be personalised.

Going hand in hand with Google’s Material Design, the standard setup shows the keyboard with a solid brightly colored background with a subtle drop shadow, indicating a slight elevation. And to take personalisation further than just changing the wallpaper, Peek also features keyboard styling.

Whenever the wallpaper is changed, Peek follows suit by using Palette to grab the most prominent color from the image and applying those to the keyboard. The results is that the whole launcher gets a fresh color scheme every time the wallpaper is changed.

For further personalisation, a long press opens the customisation view.

The color can be changed of both the keyboard and the keys. For each there are 10 suggested colors, some extracted from the wallpaper and others neutral presets like black and white.

It is also possible to customise any of the colors with a VHS slider and essentially pick any color you like.

Interactive prototype: https://share.framerjs.com/sj0cd8kh3qkk/ (long press to enter edit mode)

These customisable colors make sure that your keyboard always complements your wallpaper perfectly. For those cases where you want to see more of your wallpaper you can lower the keyboard background opacity all the way to zero, or use the gradient mode.