Design exploration for UI components in KaiOS Smart Feature Phones
By Scott Wu, UX Designer at KaiOS
UI elements should function as UX components, providing an intuitive journey that helps users predict what will happen after they click a specific button. They should help users intuitively navigate and successfully interact with apps without getting confused.
We introduced the first version of KaiOS UI components in 2017 and applied it to over 25 models of smart feature phones worldwide.
We decided that it was time to upgrade the design and improve the user experience.
Challenges
Before discussing the redesign, I want to address the two main challenges we faced during the redesign process.
First, the display of every smart feature phone is smaller than 2.8 inches (in a 4:3 ratio resolution). The size of each visual element matters.
Second, users have navigation “habits”. They can resist a new style, layout, and method of interaction that is unfamiliar to them.
Design Goals
- Create and maintain visual consistency within and across all KaiOS applications.
- Reflect the new brand identity by designing Kai products in the simplest and most modern way.
- Make KaiOS lighter by transitioning exclusively to code-based design (no more bitmap images).
Considerations for a New Visual Identity
Color
Dark mode has been widely discussed for years, and it’s still trending. Its ability to conserve battery while also reducing eye strain is its biggest appeal. For this reason, we established the color palettes, individually and in combination, on both light and dark backgrounds and modes.
Shape
Circles and round corners are widely deemed as friendly and usable UI components, in both images and UI elements. They also perfectly reflect our brand identity.
Type
We kept the same font we use in all KaiOS products — Open Sans — but got rid of the light typeface and used size, space, and weight to improve legibility and readability on a small display.
UI Components
Now let’s discuss the logic behind the redesign of the UI components.
1. Status Bar, Header, and Software Key Bar
We unified the background color of the entire user interface from top (status bar) to bottom (software key bar). This creates the perception that the screen is bigger and less cluttered.
2. Tab Bar
The main problem with the tab bar on a small screen is that the user never knows how many tabs they have open. We introduced the tab bar indicator to help them quickly identify where they are in an app. The long pill shape indicates the current tab, while the dots represent the remaining ones. With this information clearly displayed, users have a better navigation experience.
3. Search Bar
We replaced the default search bar with a simple icon and some text to reduce the amount of screen space it took. When selected, the search function turns into a larger, full-function input field.
4. Button
Our buttons are now pill-shaped. They look friendlier than before. Partners can choose the color of the main button, but red is used for critical actions.
5. Selection Controls
We added a gentle touch to the toggle, checkbox, and radio button animations, and used minimal graphical elements such as dots, lines, and circles. The code-friendly animations give users consistent and pleasant visual feedback.
6. Popup
The speech bubble confirmation dialog is one of our favorite components. Its emotional design makes the user feel as though the device is chatting with them. A little bit of human touch can change the man-machine interaction.
The date picker is simplified, but more usable. The user knows exactly which element is selected and how to make adjustments.
7. Toast
We brought the silhouette effect to the toast design in light mode. The pill shape color is clear over the white background and presents a strong yet visually comfortable contrast that commands visual attention. For dark mode, we swapped the two colors for the same effect.
8. Volume Control
Instead of the traditional linear progress bar, we used the circle to represent volume: the bigger the circle, the louder the sound.
9. Empty Screen
The empty page design is essential because it’s the first page the user sees when they open an app that doesn’t come with any content. To better present the text, we turned colorful app icons into single colorways with transparency to blend them into background colors behind the text. We left part of the icons out of the screen to create more solid color space in case there’s a need to add more text. Based on Gestalt principles, users can still easily recognize the app icons by their parts.
Conclusion
This new design exploration of the KaiOS UI components provides better usability with a choice of dark and light modes.
The minimalist design approach makes the interface look bigger and more prominent on a display that is 2.8 inches or smaller.
The component-based design makes applications both visually and functionally consistent, helping users feel comfortable as they navigate to complete desired interactions.
We have successfully applied it to several apps in the KaiStore developed by KaiOS team, including KaiNews, KaiWeather, QR Reader, and the recently-launched Wallpaper Shop app. Thanks for reading so far. If you enjoyed this post, leave us a clap! If you have feedback or ideas, please share them below.
Want to get the latest updates of KaiOS? Don’t forget to follow our Twitter, Linkedin, and Facebook.
