KaiOS Smart Touch



KaiOS smart touch is the product to fill the gap of 1GB RAM smartphones and enable the migration of 2G network phones to 3G/4G. The affordable low-end Smart Touch is designed with an affordable price, necessary features, and easy-to-use and learn designs.

My contributions to this project were: to collaborate with UX designers to design the launcher navigation model, define the art direction and visual design system of the product, lead 4 visual designers and be responsible for prototypes, UI components, and all the app interface design for more than 40 essential apps and service apps like KaiStore, Payment, and utility apps to enrich KaiOS ecosystem. I am also in charge of motion design and design guidelines.



Role



Visual Design Lead​

UI Designer

Prototyper



Team



UX Designer

UI Designer

Product Manager
Front-end Engineer

Data Engineer

QA Engineer



Duration



Mar 2019 to Jul 2020

1 Yr. 4 Mo.



WHAT'S SMART Touch?



KaiOS is in pole position to enable the migration of 2G phones to 3/4G. Smart Touch is the "missing link" between 2G and more expensive smartphones with 2GB memory. There is a 1.5-billion-unit accessible market over the next five years.



Product Positioning Map



Besides 4G Smart feature phone, KaiOS provides the next level product, a mainstream touch experience for first-time phone users or 2G network users to migrate.



FOB Pricing



The price range is from $34 for a 3G network phone to $41 for a 4G network phone, the sweet spot of the price to bridge the digital gap with an affordable price for first-time internet users.



What's the product proposition?



Smart Touch completes the bridge from feature to the smartphone. It is a light phone with all essentials (i.e. larger display, affordable prices, intuitive UX design, user engagement, accessible to the internet).



WHO are the target USERS?



The target user is one of the key factors when designing Smart Touch.

Our target user includes first-time smartphone users and low-end smartphone users who usually are,


1. Unfamiliar with the internet & electronic products

2. Require effective onboarding due to lower education level

3. Not able to afford high-end products due to lower-income



EMERGING MARKET USERS BEHAVIOR INSIGHTS



Content Type



The most important types of contents are: News, Music, Video, and Sports



Hard Drive



Users use the devices as a "hard drive" to store and share files such as video and music



Simplicity



Complicate navigation confuses potential, first-time internet users



Memory & Storage



A "heavy" app that eats memory and storage can be difficult for the user



Typing Method



Due to the lower literacy rate, users can find keypad or software keyboard typing difficult and would appreciate voice typing more



Wi-Fi Router



Users will set up one device at home as a Wi-fi router for other family members to connect to internet​


DESIGN PRINCIPLE



Simple is our answer for first-time users



Meaningful



Focus on self-explanatory interface design for first-time phone users or users with low literacy skills



Minimal



Focus on essentials by reinforcing the visual hierarchy



Intuitive



Simplified experience, make clickable buttons and entrances visible and accessible



Consistent



Consistent experience across multiple devices with different screen sizes



UX Design



Home screen



  1. Favorite apps are customizable and placed in a "natural area" for both right- and left-handed users.
  2. Infogation bar (combination of device information and navigation bar) at the lower edge of the screen.
  3. Internet Search benefits users to explore the internet world directly.
  4. Cards is a unique design that benefits users, carriers, and KaiOS for user engagement opportunities.


Infogation Bar



Infogation Bar was invented when it came to a design thinking process on how to design a navigation model on a touch-screen-based device; how easily our target users can interact and navigate the screens through the UI components. We found several designs on Android and iOS that can be improved, especially for our target users, first-time smartphone users.


  • The status bar and navigation bar are occupied too much screen space.
  • Notifications and Quick Settings/Control Center are hidden; it requires users to use the "swipe down gestures" to get access without any clues.
  • Return to the Home screen requires users to use the "swipe up gesture" by swiping up the home bar from the bottom.
  • The back button on the upper left in the navigation bar is not easy to reach and press.


The advantage of Infogation bar



The Infogation bar combines information (Status Button) and navigation (Home and Back Buttons). In various scenarios, each element on Infogation Bar would have a different state and behavior.

I was one of the inventors of Infogation Bar (the design patent is filed and being processed).

  • Users can use their thumbs to access different screens and monitor phone status.
  • The Center button not only enters the apps menu, returns to the Home screen, but also tells users the current time and battery status.
  • Notifications and Quick Settings are easy to access by pressing the Status button at the lower right button.
  • Combining the navigation bar and phone information maximizes the content view for users and increases 5-8% more viewing area.


Cards



Cards allow instant access for first-time internet users to understand and explore the Internet. The "What is Internet" card is designed as a game to incentivize users to explore the Internet in an interactive and fun way. Cards also support KaiOS and 3rd party service promotion/campaigns.


My contribution to this feature is to provide the game design concept, collaborate with the UX designer (Tina Chen), and assist the UI designer (Johnny Jao) in completing the project.



The Navigation of Screens Flow



Major screens/actions are One Tap Away from the Home screen. No hidden gestures nor complicated navigation behavior exists.



Animation of Launcher Navigation



This animation showcases how to interact with the main screens and apps, from unlocking the device, entering the Apps menu and Quick Settings, returning to the Home screen, launching an app and cards, etc.



Visual Design Direction



Retro-Future Design



The inspiration came from a street culture that combines Retro style and infuses Modern sensibilities for Smart Touch. The nostalgic style provides a sense of security for users as they might be using a touch screen device for the first time. The futuristic style embraces the power of the internet/technology in the digital world.



Visual Characteristics



  • Airy - Air is responsible, and it exists in our environment. It feels light as we're trying to build for this OS. We use Airly as a metaphor to promote visual hierarchy and reinforce the design to organize content.
  • Bulgy - Circle reflects the endless, no boundary. It reinforces KaiOS brand identity with delighted and user-friendly touches, and the outline stroke provides a nostalgic and futuristic feel.
  • Spacious - Blank area provides enough space on the UI so that it doesn't feel cluttered. Contrast enhances visual hierarchy that sets users' focus on core elements and reduces distraction.


Color



We use the same system color palette across all the KaiOS digital products. The solid color works well on the low-end display; in contrast, the gradient color isn't.



UI Component



Small pieces of design and functionality create a graphic user interface and provide a consistent experience across different apps. The minimal design of UI component is responsive to KaiOS supportive display resolutions for both portrait and landscape modes.



Meet KaiOS Apps



We designed more than 40 baseline essential apps and service apps like KaiStore, Payment, and utility apps to enrich KaiOS ecosystem.



Individual Contributions TO this project



18



App Designs



6



Patents



2



Guidelines



App Designs



Onboarding Tutorial



The interactive tutorial guides users to operate the phone without a mental burden. This onboarding tutorial teaches users how to access the key features through Infogation bar progressively.



KaiStore



KaiStore, the ecosystem offers a variety of apps, tools, games, and social media apps to users and enables them to embrace the power of the Internet.



Internet Browser



The internet search bar on the Home screen was designed to benefit users to explore the internet world. There are two access, the input field lets users search content on the Internet directly, and the tab button allows them to revisit a recent webpage with ease.



First Time Use



FTU, the onboarding experience is tailored and crafted to suit first-time internet users and traditional voice users. We kept the navigation in a linear flow with consistent behavior for less mental burden.



Meet other apps at a glance



Wallpaper Design



The wallpaper theme was designed to follow the visual direction of the Retro-future design, and I took the '80s fashion as the art direction to create the wallpapers.



Ideation



Design elements, such as the high-voltage colors and textures, were adopted from the clothes in the '80s. The scenes were inspired by the graffiti on the street and laboratory in Sci-fi movies. I tried to draw the artworks in Sketch software to simulate 3D and 2D perspectives for the experiment.



'80s texture



3D Space of laboratory



2D Figure of Sci-fi Scene



Design Guides



Design Guide



I created and maintained this guide to serve as a resource to designers and developers to help define the visual style for their KaiOS applications.



KaiStore Partner Guide



I created and maintained this guide to serve as a resource to partners and developers to ensure their products, such as app icon, app name, description, and marketing banner, are ready to display on KaiStore.



Takeaway



Designing a new operating system for the smartphone from the ground up is a remarkable experience. The entire UX design, including all the essential apps of the core OS and ecosystem, took us 6 months from scratch to hatch. The design team comprises 6 interaction designers and 5 visual designers, and I'm the team lead of the visual design team, and also a contributor to the visual design.


Most app design projects I designed previously were for either Android or iOS, the two major mobile operating systems in the industry.


This project, however, allows us to design and define from scratch the navigation model, UX patterns, visual design system, ecosystem of KaiStore, and much more. Implementing the design on a 512MB low-end smartphone device requires a lot of back-and-forth adjustment and feature take-downs to pass the stability test. The screencolor didn't always match the design, the transition didn't play smoothly as we expected, the app froze and crashed due to multiple apps running at the same time, etc. Though we've encountered countless issues during the implementation process, we've successfully overcome the obstacles and created this mobile operating system that we're truly proud of, and deeply believe in that could help level the playing fields for the underserved people and make a positive impact to the world.


HOME



Let's get social