Kiri: Your browser’s home screen.

By default your browser’s new tab probably consists of the following: a search bar, suggested pages, a news section, and maybe a tiny weather preview in a corner. There’s a common design and that’s for a reason, its a generally good default layout for your average user, and serves its purpose, a default starting place and/or a light background before you navigate to your desired page.

Kiri

Kiri is inspired by the wave of widget adorned mobile home screens, and also by my own needs. As such Kiri likely won’t be the perfect fit for everyone, it is intentionally heavily opinionated. Ideally however, the goal is to add as much customization and extensibility that eventually the end user can adapt it to their needs. But before we get there we need a much leaner starting place.

Starting Design

Before writing code, I’m designing everything in Figma, and writing in depth plans for implementation, allowing myself to plan out every feature and how they interact, as to avoid any tech-debt long term.

No Search Bar?

The first thing you might notice is that there’s no search bar. This is both a technical and design decision.

Technically, matching the browser’s built-in search experience (history, bookmarks, tabs, omnibox suggestions, etc.) would require maintaining browser-specific extensions. By making Kiri a normal webpage instead, it leaves everything in the hands of the user as to set Kiri as their new tab or even to just use it as a normal webpage, if they so choose.

From a design perspective, the browser’s address bar is already focused when a new tab opens, making an additional search bar redundant, and a waste of space, unless the browser is in fullscreen.

What are the widgets?

The current default layout sports 3 distinct columns of widgets. The leftmost column contains a large date time display and a calendar widget with an upcoming events list. The calendar also highlights event days using colored rings, making it easy to see busy days at a glance, a feature I for some reason haven’t found in Apple, Google, or Proton’s calendar widgets. Initially, it will support Google Calendar, with more providers potentially added later. The widget will still be useable, as a simple calendar, if no account is linked.

In the middle shows 2 weather widgets heavily inspired by Apple’s Weather app. The top widget shows the current weather with a graph for the current day’s temperature, and the bottom widget displays a 5-day forecast. Both widgets will be powered by Open-Meteo to avoid requiring any api keys.

Finally the last column on the right is simply a configurable list of quicklinks. Potentially this will be changed to allow searching through a much larger list of sites.

Future Plans

Future plans are mostly related to continuing to flesh out the design of everything, both visually speaking, and also technically speaking. A lot of consideration will likely need to be put in for how exactly things will be configurable and still look cohesive, as well as what other widgets to offer in the first place. One potential idea for the site is add shortcut keys, some of which might open things such as a popover that shows extended information for certain widgets, or widgets that might not be visible on the regular layout. Interactions with widgets will also need to be considered such as whether or not they should open said popovers on click or should redirect to another website, etc. Until the main features have been planned out, this project will most likely stay within the Figma stage for now, although brief testing previews might be released.