Design at Kai
Published in

Design at Kai

Small screen, large view: Why and how we redesigned the browser interface

Picture materials collected from: People vector by freepik , Flower vector by pikisuperstar, Education vector by stories , and House vector by stories .
The original design vs. the new design.

In Pursuit of Simplicity

1. Header

  • Reduced the height of the header bar. As a non-interactive item, the title of a website only needs a small amount of fixed space, so we made the bar shorter.
  • Merged the header and the status bars. By applying the same background color to the status and the header bars, we reduced color complexity and size.
Header before and after.

2. Soft Key bar

  • Left key (Home) — Opens the landing page.
  • Central key (Select) — Selects a target.
  • Right key (Options) — Opens the Options Menu.
Physical keys and their corresponding soft keys.
Icons representing the function of each soft key.
The soft keys adapt to the context.
The view is extended to the bottom of the screen.
The cursor will not overlap the software key bar.
The software key bar will automatically disappear when playing a full-screen video. For the full video please visit: https://www.youtube.com/watch?v=Ff2_s1BTH_o

3. Shortcut Key Tips Menu

Shortcut Key Tips menu: 2018 and 2019
The new design: press [ # ] key to open the shortcut key menu.
An option to hide the visual hint.

Screens Now Have 23.7% More Space

The new design brings 23.7% more space than the original one does.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
KaiOS Technologies

KaiOS Technologies powers an ecosystem of affordable digital products and services, and exists to empower people around the world through technology.