ChromeOS App Model

Screenshot of an installation dialog for a web app
OS-facilitated PWA installation is one component of a better app model on ChromeOS

As a lead designer on ChromeOS, I established the App Model, an initiative to seamlessly integrate apps from different platforms into the OS.

Background

One of the benefits of ChromeOS is that it allows the installation of apps from many different platforms, such as progressive web apps (PWAs) or Android apps. However, sometimes these apps can behave differently because of their platform differences, resulting in unpredictable outcomes for end-users who shouldn’t need to understand an app’s technical construction to understand how an app will behave. I recognized the need to better unify key app behaviors, capabilities, and system representations to improve user experience and perception. 

Task & Actions

In an IC UX capacity, I initiated and led the App Model project from strategy to various streams of execution.

Strategy & defining scope of the App Model

I identified the need to invest in a concerted App Model effort after synthesizing existing user research and customer insights, and pitched and gained support for a dedicated work stream from our leadership team, making it an OKR for the organization.

I then:

  • Established design principles (for example, to focus on predictability between apps rather than perfect consistency);
  • Created a working spec that would cover app representation, behaviors, and capabilities;
  • Defined collaboration models with supporting teams; and 
  • Broke down areas of the spec into smaller projects that could be released independently

Although an ongoing and long-term area of investment, I released several features supporting the goal of making app behavior more predictable and improving upon app capabilities. Many of these features were focused on bringing PWAs (web apps) up to the standards that users expected from installed apps.

Designing native PWA installation 

PWAs, one of the primary app types for ChromeOS, allow developers to deploy cross-platform, desktop-ready apps. Apps like Figma, Adobe Express, and GeForce Now are all PWAs.

While PWAs could be installed via an “install” option in the browser on ChromeOS, the installation process did not match what users expected for apps. Web apps, when installed from a website, would appear as if they had opened in a new browser window, rather than making it clear it had been installed to the system. Additionally, it was hard for users to discover where to install a web app from as installation was only able to be brokered via the browser and therefore had a limited visibility entry point via the browser URL bar.

Screenshot showing previous versions of PWA install on ChromeOS via a browser URL icon
This screenshot, courtesy of web.dev, shows the older method of PWA install on ChromeOS, which relied on triggering a basic dialog via a limited visibility icon in the browser URL bar.

In order to help users perceive web apps as truly installed apps and unlock more installation paths, I identified the need to give them a native-like installation experience that could be triggered from different places apps might be installed from. I explored multiple installation paths before I designed a new install dialog that could be triggered from different contexts. The dialog was designed to look like an OS-generated dialog in order to reassure users that this was a legitimate installation flow no matter where they triggered it from.

Images showing the 3 states of the web app installation dialog on ChromeOS
I designed the PWA install dialog on ChromeOS to have 3 states: pre-install disclosure state (left), the inline install progress state (middle), and the post-install success state with the next step of opening the app (right).
Image showing two variations of the web app install dialog based on whether an app developer has provided screenshots or not
I also had to design various fallback states for the installation dialog. For example, if a developer did not provide application screenshots as part of their web app manifest, then we needed a fallback design that removed the image but still provided enough information to make an installation decision. The dialog color will adjust to match the overall OS color theme set by the user to enhance the feeling that this was an OS-legitimate flow.

This feature improved the perception of web app installation and also enabled the creation of more entry points to initiate installation, such as by unlocking our ability to offer an “Add to Chromebook” button announced at Google I/O 2024 as well as an early app discovery surface called the App Mall.  

Animated GIF showing the end-to-end installation flow of the Pixlr PWA via the "Add to Chromebook" button
This screen recording, courtesy of ChromeOS.dev, shows the end-to-end installation flow of a PWA via the “Add to Chromebook” button, a flow that was unlocked by using the contextual system installation flow I designed

Tabbed PWAs

As part of making web apps feel more natively integrated into the OS and to encourage more availability of PWAs, I defined a system-level tabbed element for application window title bars. Our research showed that users view installed web apps, which run in their own window, as more powerful than those running in browsers, but some developers were not making their web apps available to install because they didn’t want to lose the multitasking capabilities of tabs. 

I defined the UI and logic for a tabbed mode API, including what options would be available to developers, defaults, and fallback logic. This feature supported a plethora of new developer use cases and enabled apps like Figma, which relies heavily on tabbed workflows, to make their PWA installable on ChromeOS. 

GIF of tabbed mode as a native title bar element developers can choose, as shown in the installable Figma app on ChromeOS

Results

The app model has been an ongoing area of consideration and investment for the ChromeOS team thanks to my driving it forward. The individual releases mentioned above also were featured at Google I/O 2024 (video | article) and became key announcements for ChromeOS developers in 2024. And as previously mentioned, these features unlocked important use cases, such as the Add to Chromebook button and enabling Figma to promote an installable PWA on ChromeOS.

Screenshot from Google I/O video showing speaker announcing tabbed mode & adoption by Figma
This photo from Google I/O 2024 shows how tabbed mode and other app model features were keystone announcements for ChromeOS

All work for this project is © Google

Skills demonstrated

  • Strategy & visioning
  • Project management
  • Systems design
  • Interaction design
  • API design
  • User research