How We Designed a Website for the KaiOS Smart Feature Phone

Left: The Nokia 6610 that I had (and lost on a bus) in 2002. Right: A KaiOS phone made by Energizer in 2020.

If you grew up in the 2000s like me, you have a fond memory of what we now call “feature phones”. Back then, getting the new Nokia with Snake II was being on the cutting edge of technology. So when I was first introduced to a KaiOS phone a few months ago, I was washed with a pleasant, nostalgic feeling for my high school days. Being able to press on physical, tactile buttons, using the T9 keyboard, and of course, playing Snake, brought me back to simpler times.

KaiOS phones are what people call “smart feature phones”. What sets them apart from our old Nokias is that they can access the internet via cellular data and wifi. Looking at the Home screen, it feels like a miniaturized version of Android. You have your usual apps like Google Maps, Facebook, WhatsApp, and an Internet Browser. At the cost of sacrificing a touch screen, processing power, and storage, Kai phones can be bought for as cheap as 30 Singapore Dollars, making them more accessible.

With over 100 million users, KaiOS is the first introduction to the internet for many people around the world. Aiming to bridge the digital divide and empower first-comers to the internet, our client, SpudnikLab, wanted to develop a website to recommend and help users discover KaiOS apps. Here’s how we applied the human-centered design process to empathize with the users and create a resource that would best onboard them to the internet.

Empathizing with KaiOS users through research

Having not used a phone with a number pad in almost 10 years, my first step was to quickly familiarize myself with KaiOS by putting myself in a KaiOS user’s shoes. So I turned off my smartphone, chucked it in a drawer, and committed to using KaiOS for a whole day! When designing for a new platform, immersing yourself in that platform can help you empathize better with its users. I quickly learned the struggles of completing everyday tasks that we take for granted with touch devices. Long web pages, pop-up windows, and sticky menus were all cumbersome to navigate using directional keys (no touch scrolling!)

Next, we needed to learn how real KaiOS users experience their phones. Unfortunately, KaiOS is rarely used in Singapore, but we were lucky enough to interview an entrepreneur in India who works with local farmers, as well as a teacher and student in Indonesia. We also found from desktop research that the elderly are another key user group who appreciate the simplicity of feature phones, so we spoke to a couple of senior citizens to understand their difficulties navigating websites on KaiOS.

To paint a clear picture of who we were designing for, we focused on the Indian farmer and captured their context, goals, needs, and frustrations by creating a persona. A persona is a fictional character that represents the target audience and serves as a guiding star to inform our design. Whenever we come across a difficult design decision, we refer back to the persona to ensure we design based on their needs.

Persona of a farmer who relies on KaiOS for agricultural information

Meet Chandra! Chandra is a farmer who has just purchased a KaiOS phone after hearing about the many benefits it could bring to his work. His needs are largely informational: getting tips to grow his crops (like finding the best pesticides and fertilizers), knowing the weather forecast, and identifying the best place and time to sell his crops.

So the question for us was… how can we help Chandra find the best apps that are relevant to his needs?

Designing a guide to KaiOS apps

The answer is a website called Kobi! Kobi is your friendly guide to help you navigate the world of KaiOS apps. Trying apps for the first time can be overwhelming, so Kobi aims to help users understand what different apps do and decide whether or not the app is suitable for them. Here’s how we designed Kobi’s interface to meet Chandra’s needs.

Homepage

The Kobi Homepage

Let’s start with the homepage! Knowing that scrolling long pages can be troublesome using directional buttons (down, down, down, down… down, down down), we aimed to keep the copy and content as concise as possible: just enough information for first-time users, and not too much that it might trouble returning users.

For app categories, we used bright and vibrant icons to improve visibility on smaller, lower-resolution screens. It was also important to ensure the category names accurately matched users’ expectations. To measure this, we advised SpudnikLab to monitor how frequently users pressed “back” after entering a category. As the platform would be made available in other languages, we also advised conducting further research with regional demographics.

At the bottom of the page, you’ll notice that we’re educating users that they can bookmark this site, which makes it so much easier to return to the site compared to typing the URL on a T9 keyboard every visit!

App Category

Exploring an App Category page

The app category listing shows only the essential information: the app name, description, and icon. Again, this is to keep the page length at a minimum. Good copywriting is key, as the description needs to tell the user what the app does in as few words as possible!

App Review Page

The App Review Page: Balancing information and brevity

Lastly, the app review page aims to help the user understand what the app is useful for, and whether or not they would need it. Having learned that audio and voice input is well adopted amongst KaiOS users, we introduced an audio review for users to listen to the review instead of reading it (SpudnikLab’s professional voice artist also makes the review more entertaining!). As the review length can be quite long, we highlighted the need-to-know information upfront and hid the extra details with a “Read More” button.

Tips to optimize for KaiOS

Combining our research of the target users with best practices directly from the KaiOS developers, I’d like to share four tips for anyone interested in designing for KaiOS.

1. Minimize Scrolling

Scrolling with a directional pad can be… difficult. While long pages are acceptable on smartphones, keep pages as short as possible by carefully planning your information architecture and using concise copywriting.

KaiOS scrolling functionality (credit: KaiOS Technologies)

2. Use large tap targets

KaiOS has a snapping cursor feature to make it easier to navigate to tap targets. Use full-width buttons to take advantage of this.

KaiOS cursor snapping behavior (credit: KaiOS Technologies)

3. Keep it Simple

The average KaiOS user does not have experience with touch screens, so complex interactions like dynamic menus can be confusing and frustrating. As much as possible, keep interactions simple with vertical scrolling and single tap buttons. Also keep in mind that users may not have access to high-speed internet, so keep your designs lightweight.

4. Increase color contrast and use large text

Keep in mind that KaiOS screens tend to be small and lower resolution than smartphones. Increasing color contrast can make your images and icons more visible and recognizable. Likewise, for font sizes, larger, heavier fonts will help improve legibility. You can refer to the official KaiOS typography guidelines here.

Creating value for those who need it

Humor me for a moment and imagine your life without the internet. Your first thought might be “That might be kind of nice, living a simpler life,” but if you think longer-term, you’ll realize just how much we take for granted. You wouldn’t be able to video call your loved ones, get answers for every “how-to” question that crosses your mind, do your job properly… The list goes on.

Every day, KaiOS is providing thousands of people access to information, connection, and opportunities online. It is an important platform to pay attention to, especially in our region. The platform is still young and there are plenty of opportunities to add value to its users.

So the next time you design for a platform you’re not familiar with, remember to use the platform first-hand, talk to users, and keep them at the heart of your design!