Building a new home, and new branding for the Chrome Web Platform team to meet web developers through canonical resources for modern web development — [web.dev](http://web.dev) in 3 months

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2F2ecDyZJegg24fAfEv53l%2F63f9b1c7-90fb-4724-a368-c9dcb650b019.png?alt=media&token=bd901c83-38ce-4e0b-be4a-096ba08adeb5","id":"63f9b1c7-90fb-4724-a368-c9dcb650b019","width":1302,"height":654,"filename":"webdev.png","type":"image/png","caption":"web.dev","border":true}]}
```

## Motivations

The Web Developer Relations team on Chrome had a vision to build a new home to distribute canonical recommendations on web development for web developers, e.g. web.dev/pwa and web.dev/secure (vs bit.ly/secure).

Also, the team needed to migrate necessary content resources from its original home [developers.google.com/web](http://developers.google.com/web) to the home under a newly thought-out navigation structure.

The long-term vision of the project was to develop it beyond the written content site and turn it into a home with a learning platform and integrated personalized tools.

## What

The team shared the short-term goal to deliver the first version, Beta, with the most essential parts in the 3 month time frame targeting to launch it at the Chrome Developer Summit 2018.

Joining the multi disciplinary forces together — Product, Engineering, Developer Relations, Tech Writing, Marking, UX Research, UX Design, and Design Agency Partner — the team immediately embraced the user centered design process.

The team kicked off the project with the design sprint to define the target user, to identify the primary use cases, i.e. fix a specific problem and also dive deep into a topic, and to enumerate ideas.

The team vetted the early ideas through developer feedback, and fleshed out details. When possible, the sub groups ran parallel to one another implementing the functionalities and deciding on branding direction while tuning into user studies on the prototypes.

The beta version was shipped on schedule at the summit.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2F2ecDyZJegg24fAfEv53l%2Fe7bc0577-d902-4673-a120-e80ddcad5119.png?alt=media&token=12d001ad-f515-406d-91b8-e2af59202894","id":"e7bc0577-d902-4673-a120-e80ddcad5119","width":1302,"height":654,"filename":"webdev-content.png","type":"image/png","caption":"Accessibility course landing page","border":true}]}
```

Now, web.dev is the home for ever growing developer users to learn the canonical concepts, e.g. Learn CSS, and the latest web platform changes, e.g. new APIs and layout engine. web.dev also hosted its first-ever online conference, web.dev/live in June 2019 when Covid-19 hit.

## My contributions

I led the design development of the Beta product, introducing & driving the design process, running the design sprint, and designing the navigation structure and the detail UIs. I partnered with the UX Researcher, the design agency and the Google Brand Studio, and drove the resolutions on the design direction and on the details. I reviewed the implemented product, and worked with the team to finesse.

Read more about what the product co-lead [shared](https://www.youtube.com/watch?v=aGxrGyGSFPs&t=1689s) about the design process and my contribution.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2F2ecDyZJegg24fAfEv53l%2F49eb5357-92b2-4a9b-85bf-9d69a5a55437.png?alt=media&token=af906e2d-80e4-47ac-8b29-6a00ed621c5b","id":"49eb5357-92b2-4a9b-85bf-9d69a5a55437","width":1302,"height":494,"filename":"webdev-mock.png","type":"image/png","caption":"Mock (left) vs Beta (right)","border":true}]}
```

Post-beta, I onboarded and guided a designer to manage the design development, the design system expansion, and the product/service additions onward.

Trusting the process

Learning from developer users, and establishing stable UI foundation for new design system and new products for Lighthouse

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2FCnk6slJZlC7Kl9uHhX3x%2F97538837-ee9e-45db-927d-428be5cb5b58.png?alt=media&token=d841de5f-08ad-4c41-9ca3-92867c7e38d4","id":"97538837-ee9e-45db-927d-428be5cb5b58","width":1302,"height":540,"filename":"lighthouse-original.png","type":"image/png","caption":"Version 2 (original UI)","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2FCnk6slJZlC7Kl9uHhX3x%2F301d4e40-df00-443f-a346-2391ef375fe0.png?alt=media&token=b9cb0301-be09-4ec3-83fd-cb6891955955","id":"301d4e40-df00-443f-a346-2391ef375fe0","width":1302,"height":540,"filename":"lighthouse-usability.png","type":"image/png","caption":"Version 3 (after usability fixes)","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2FCnk6slJZlC7Kl9uHhX3x%2Ff133e2c6-90a6-406b-8e76-08f580721135.png?alt=media&token=2cf3cd9e-a9db-410f-8beb-2f9d4f920a9b","id":"f133e2c6-90a6-406b-8e76-08f580721135","width":1302,"height":540,"filename":"lighthouse-ds.png","type":"image/png","caption":"Verision 6 (design system) Note: added only for context. I guided the design development.","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2FCnk6slJZlC7Kl9uHhX3x%2Fa63f1436-7e4f-4ebf-8b0a-a50305205ed9.png?alt=media&token=bc2ce163-b6bc-46c1-a2ba-db9d95a0a090","id":"a63f1436-7e4f-4ebf-8b0a-a50305205ed9","width":1302,"height":540,"filename":"lighthouse-ds-2.png","type":"image/png","caption":"Version 6 dark mode (design system) Note: added only for context. I guided the design development.","border":true}]}
```

## Problems

[Lighthouse](https://developers.google.com/web/tools/lighthouse) is the go-to tool for web developers to measure the quality of the web pages and get recommendations on what to improve on.

In 2018, there were many features to add, and new product lines to add, i.e. continuous integrations, and community plug-ins.

Also there was an abstract feedback that the Lighthouse report (below) was not easy to comprehend. There were various ideas to try and explore.

The usability study revealed and unpacked the comprehension issues on the UI patterns in detail.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2FCnk6slJZlC7Kl9uHhX3x%2F4ae4cd96-98ba-4a80-bf10-be5e226629b0.png?alt=media&token=96f8e158-630b-410b-a333-097113558e76","id":"4ae4cd96-98ba-4a80-bf10-be5e226629b0","width":1302,"height":540,"filename":"lighthouse-user-feedback (2).png","type":"image/png","caption":"Usability study feedback","border":true}]}
```

## Solutions

The team delivered both usability improvements and new measurement mechanism under the hood, which would enable the design system revamp and the product expansion.

Throughout the course, the team went through generative and evaluative design activities.

* Design workshop to build a shared brain on the issues and ideas

* Sketches and mocks

* Usability study on the existing UI and on the new ideas

* Design iterations, reviews, and refinements

* UI pattern inventory

* Sessions of design system development and reviews

* Logo development and reviews

* Prototypes

## My contributions

As the lead designer, I introduced and drove the design process, and ran design workshops with the cross functional groups. For the usability improvements, I did hands-on design for iterations and study preparation, and shipped the version 3 on the Chrome DevTools as well as on the [Google Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/) in 2018. I then redesigned the PWA audit report UI and shipped the new badge system.

I proposed and get the buy-ins for engineering investment and funding to the new design system creation. I hired the design system expert, and guided the design development and the launch of the version 6. And, I guided the design and launch of the Lighthouse CI product.

I onboarded a new designer to own the Lighthouse product design, and continued guiding the design and launch of the features up until April 2021.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2FCnk6slJZlC7Kl9uHhX3x%2F0661fd44-b59e-455d-bed4-a53ef4607cee.png?alt=media&token=d1d39746-1b9b-42b5-9e33-8fd3ea9c8c92","id":"0661fd44-b59e-455d-bed4-a53ef4607cee","width":1302,"height":632,"filename":"lighthouse-pwa.png","type":"image/png","caption":"Progressive Web App Lighthouse Audit Report","border":true}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2FCnk6slJZlC7Kl9uHhX3x%2F386ae4d6-8358-4270-8d7c-541209beb9b0.png?alt=media&token=4a44ce38-9bdc-4409-bbfa-d1cc832adaff","id":"386ae4d6-8358-4270-8d7c-541209beb9b0","width":1302,"height":632,"filename":"lighthouse-psi.png","type":"image/png","caption":"Google Page Speed Insights","border":true}]}
```

Improving usability to scale the product

Laying the UI foundation of the installed experience for web apps on desktop, and shipping on all four desktop operation systems for the prime time

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2FGyZ5HS2Hc4c4jQyOBDMC%2F98c85a1d-e1ed-4803-aa93-7e8b6490d13e.png?alt=media&token=a0c32b41-c49f-491b-bd66-53dc6948b707","id":"98c85a1d-e1ed-4803-aa93-7e8b6490d13e","width":1080,"height":448,"filename":"PWA-intro.png","type":"image/png","caption":"","border":false}]}
```

## Why

Web applications had been ever evolving providing comprehensive utilities and experiences. Think communication apps, music players, enterprise apps, and so on. Compared to traditional apps on desktop operating systems such as a graphic editor on Windows, accessing web apps only via the browser tabs was limiting.

When easier access to web apps were provided, e.g. launching apps from the desktop shelf and switching apps using the shortcut keys Alt+Tab, users would be able to use them more easily and developers would be able to strengthen their relationship with their customers.

Mobile web browsers on Android already supported registration of web apps as regular apps on the OS to enable the home screen access and the app switching, by implementing the [W3C web app manifest](https://www.w3.org/TR/appmanifest/) spec. And web apps that added the traditional app-like capabilities were called [Progressive Web Apps](https://en.wikipedia.org/wiki/Progressive_web_application) (PWAs).

Expanding PWAs to desktop was the right thing both for the users and for the developers on the web.

## What

To shape the experience of installable web apps, the team investigated how the app windows look and behave, and also enumerated the essential elements to indicate identification, security status, and default functionalities of web apps. The team also envisioned what it's like to instantly install web apps, which did not require any downloads.

The team defined the key UI elements and shipped the installable web app experience starting from Chrome OS and to Windows, Linux, and macOS.

* Install entry points

* Install instruction

* Install feedback

* App launch entry points

* App window

* App identification

* Security indication

* Default functionalities, e.g. print, zoom, autofill, etc.

* Navigation across apps and browser

* Out-of-scope navigation

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2FGyZ5HS2Hc4c4jQyOBDMC%2Fa0705ac3-3603-4dcf-89ad-de4aca8d9893.png?alt=media&token=64f97a9c-9477-493a-b0b0-eee619c703cc","id":"a0705ac3-3603-4dcf-89ad-de4aca8d9893","width":1080,"height":448,"filename":"PWA-win-element.png","type":"image/png","caption":"App window elements","border":true}]}
```

Since the team implemented the install-ability on all four OS'es, well known web apps such as [YouTube](https://www.youtube.com/), [Spotify](https://open.spotify.com/), [Google Maps](https://www.google.com/maps), [Twitter](http://twitter.com), and [Framer](https://framer.com/projects/) updated them to be installable.

## My contributions

I was the lead designer for [Desktop PWA launches on the all four OSes](https://www.youtube.com/watch?v=rUUazNIZW7I&t=1395s). I drove and conducted the comprehensive UI reviews of the very first launch of the Desktop PWAs, i.e. on Chrome OS, designed the critical missing pieces, and finessed all UI surfaces. I guided the design development on Windows, Linux, and macOS, and again conducted the comprehensive UI reviews and finessed.

I authored the content to guide design of Desktop PWAs for [Google I/O](https://youtu.be/NITk4kXMQDw?t=1987). Later I advised the recommendations for PWA install promo [patterns on mobile](https://web.dev/promote-install/).

Most recently, I guided the design development to upgrade the install experience, i.e. icon update, in-product help, and rich install prompt, and developed the permission UI for file handling.

Apps on desktop, powered by the Web

> My role is the **hands-on** **creation and launching of the GTM campaign creatives** for the fast-paced weekly launches to compete in the AI/LLM market. I'm in the best-fit position to deliver for the campaigns with a thorough understanding of the product design & tech and the GTM strategy overseeing the product design and quality.

Powered by NeevaAI, Neeva launched two flagship products:

> **1. [NeevaAI Answer](http://neeva.com/):** One answer based on query understanding and multi-doc summarization is the top result module on Neeva.com Search Engine.
>
> **2. [Neeva Gist](https://neevagist.com/):** A reimagined mobile search app on iOS and Android that brings the answer and the gist of the web to you in visual stories instead of the ten blue links that you have to sift through to make sense of the web pages and identify what you're looking for.

The communication of the Neeva AI products focuses on user values and use cases. And also we meld the collective communication with technical insight pieces on the tech under the hood, the AI predictions, and the design and research insights while mixing fun stunts, e.g., GTM Truck, AI Personalities for April Fool's day, isbing/bardavailalble.com, and timely events.

```cv
tweet
https://twitter.com/i/status/1631325862837583872
```

```cv
tweet
https://twitter.com/Neeva/status/1648749316922646530
```

```cv
tweet
https://twitter.com/Neeva/status/1646913269955739650
```

```cv
tweet
https://twitter.com/Neeva/status/1641825005171539969
```

```cv
tweet
https://twitter.com/RamaswmySridhar/status/1641163109741084677
```

```cv
tweet
https://twitter.com/Neeva/status/1638593333202231321
```

```cv
tweet
https://twitter.com/Neeva/status/1636754886829432835
```

```cv
tweet
https://twitter.com/Neeva/status/1634232418461786112
```

```cv
tweet
https://twitter.com/Neeva/status/1631692958008262656
```

```cv
tweet
https://twitter.com/ParkerOrtolani/status/1631359522005450753
```

```cv
tweet
https://twitter.com/Neeva/status/1629913525022867458
```

```cv
tweet
https://twitter.com/RamaswmySridhar/status/1629173291901685760
```

```cv
tweet
https://twitter.com/RamaswmySridhar/status/1628823744847450112
```

```cv
tweet
https://twitter.com/Neeva/status/1628454121052286982
```

```cv
tweet
https://twitter.com/Neeva/status/1627454102086070275
```

```cv
tweet
https://twitter.com/Neeva/status/1626632185561382912
```

```cv
tweet
https://twitter.com/Neeva/status/1625574362718822441
```

```cv
tweet
https://twitter.com/Neeva/status/1625200273223303168
```

```cv
tweet
https://twitter.com/Neeva/status/1621907959914586119
```

```cv
tweet
https://twitter.com/Neeva/status/1621306246061080576
```

```cv
tweet
https://twitter.com/ProductHunt/status/1619062775350972417
```

```cv
tweet
https://twitter.com/Neeva/status/1619029503119859713
```

```cv
tweet
https://twitter.com/hwiilee/status/1618827884810100736
```

```cv
tweet
https://twitter.com/marthapatzer/status/1618718292499369985
```

```cv
tweet
https://twitter.com/Neeva/status/1613248807394762803
```

```cv
tweet
https://twitter.com/RamaswmySridhar/status/1613271413020037120
```

```cv
tweet
https://twitter.com/RamaswmySridhar/status/1611378604587487235
```

```cv
tweet
https://twitter.com/Neeva/status/1611400969845149699
```

NeevaAI Go-To-Market

Improving the default styles of HTML form controls on Chromium and Chrome, in collaboration with Microsoft Edge team

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Fp31Dat16gv7GBvdRgzPs%2F56e49b5a-5d95-4f2e-b692-b53bc18eb652.png?alt=media&token=2fb38814-dddf-45d6-931b-d68090328cff","id":"56e49b5a-5d95-4f2e-b692-b53bc18eb652","width":1080,"height":540,"filename":"checkbox-before-after.png","type":"image/png","caption":"HTML Checkbox Chrome Version 1 (left) and Chrome Version 83 (right)","border":true}]}
```

## Why

### Edge team's investment

In 2018, Microsoft announced to build the Edge browser based on Chromium, and, the Edge team prioritized updating the form controls. The investment in the area — time and effort from domain experts — was much needed, and Edge team and Chrome team needed to collaborate to yield the best outcomes.

### In need of a visual system to continue to evolve

When the basic controls like Checkbox were added at the first launch of Chrome and Chromium in 2008, they had common appearances. However, the default visual styles were deviated over time as new controls, for example, progress bar and date picker, were introduced.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Fp31Dat16gv7GBvdRgzPs%2Fcdece51b-0552-4769-8407-60a577393c55.png?alt=media&token=d0b807a6-0555-4079-b574-b27fbb3206e1","id":"cdece51b-0552-4769-8407-60a577393c55","width":540,"height":270,"filename":"original-controls.png","type":"image/png","caption":"Default visual styles were deviated over time as new controls were introduced","border":true}]}
```

Lacking common styles, when it was necessary to add dark themes to the controls, it was complicated to tackle. Just darkening the existing styles was not a right thing to do. Because that would double the design debt as well as the technical debt.

### Developer pain points using the default HTML controls

The [developer survey](https://www.youtube.com/watch?v=ZFvPLrKZywA&t=803s) by the [Edge team](https://www.gwhitworth.com/posts/2019/form-controls-components/) revealed the developer pain points in styleability and customizability.

Styleability — To implement their products' design systems and brand guidelines, developers needed to style the HTML controls. However, doing so was not well supported at the default HTML level. Checkbox and Radio in the default HTML controls didn't provide style attributes to change colors. Progress bar and Range slider required many lines of code to change the styles.

Customizability —  Developers also needed to add functionality that were not provided by the default HTML controls, for example, Selectbox popup with checkboxes inside.

Developers ended up developing custom controls to style and customize, also to overcome the browser inconsistencies. The custom controls often lack screen reader support, come with a large size javascript, and add to the maintenance burdens. The default HTML controls are the ones that should address these needs fundamentally.

## What

### Visual refresh —  Work Stream 1

The existing styles have a wide range of visual treatments. Bringing consistency to the default styles was a necessary step to make the default controls useful out of the box. Improved color contrast and dark mode styles were the key additions to the refresh.

In addition to the visual refresh, the controls on the Chrome/Chromium on macOS, which mimicked the Safari styles, were migrated to the new styles. The Color Eyedropper was also newly added.

The refresh including the dark mode support is now available on Chrome and Edge on Windows, macOS, Linux, Chrome OS, and Android as well as on WebView on Android.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Fp31Dat16gv7GBvdRgzPs%2Ff68fd6c4-b73c-499c-a42b-596747ac4552.png?alt=media&token=55998edb-2ae5-4982-884a-b22eeeb48bfa","id":"f68fd6c4-b73c-499c-a42b-596747ac4552","width":540,"height":270,"filename":"refresh-light.png","type":"image/png","caption":"New design","border":true}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Fp31Dat16gv7GBvdRgzPs%2Fa9cf2ddd-61e0-4c15-9555-33aa860c12e8.png?alt=media&token=0bc9f017-e52f-426f-ba1e-2d58d162c7c5","id":"a9cf2ddd-61e0-4c15-9555-33aa860c12e8","width":540,"height":270,"filename":"refresh-dark.png","type":"image/png","caption":"New design on dark mode","border":false}]}
```

### Expansion of capabilities  —  Work Stream 2

While the visual refresh was developed and rolled out as a near term initiative over the recent two years, the two standard efforts were initiated as a longer term play to support better styleability and customizability — Accent Color, and Popup.

[Accent Color](https://github.com/w3c/csswg-drafts/issues/5187#issuecomment-800651916) is to provide a simple way, via one line of CSS, to color Checkbox, Radio, Progress, etc. [Popup](https://github.com/w3ctag/design-reviews/issues/599) is to expand functionality of a control such as Selectbox by allowing addition of more UI controls in its popup surface.

The development is done via [open-ui.org](https://open-ui.org/). More customizability continues to be discussed.

## My contributions

My primary contributions were on the visual refresh. I drove the issue resolutions across the companies while doing hands-on designs. For the Accent Color and Popup, I provided input when needed.

**Design reviews and iterations** — The Edge UX team designed the comprehensive set of the initial design. I was the dedicated design reviewer representing the Chrome UX. We took turns. I proposed iterated designs, and the Edge designer reviewed and proposed the next. We landed on final resolutions through these multiple cycles.

**Testing** — I prioritized manual testing the controls in all OSes, in different screen readers, and in different content surroundings to ensure the new design is better, and working correctly. From the testing, we identified and fixed numerous issues, existing and new, and in the implementation as well as in the design.

**Communication** — I documented the project intent, the issue examples, and the rationale for the new design. I communicated it to the Chrome decision makers on Windows, Chrome OS, macOS, Accessibility, and UX for their input. That led to the buy-ins from each of them.

**Unblocking** — I provided answers, explanations, and updated designs to address UI implementation questions throughout. I made calls to whether a feature met the quality bar.

## Work samples

Design and implementations via Chromium issue tracker

* [Dark mode](https://bugs.chromium.org/p/chromium/issues/detail?id=1099579)

* [Eyedropper](https://bugs.chromium.org/p/chromium/issues/detail?id=992297#c23) ([idea prototype](https://eyedropper-idea.glitch.me/))

* [Focusring](https://bugs.chromium.org/p/chromium/issues/detail?id=1026553#c29)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Fp31Dat16gv7GBvdRgzPs%2Fa8566004-2ddf-47b2-85e8-ed423bda11b9.png?alt=media&token=01457084-8361-432f-b51b-c0561c90dc32","id":"a8566004-2ddf-47b2-85e8-ed423bda11b9","width":995,"height":884,"filename":"dark-color-naming-states.png","type":"image/png","caption":"Dark mode color naming and states for implementation","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Fp31Dat16gv7GBvdRgzPs%2F70f53f52-f147-42d1-8656-cb43849996a2.mp4?alt=media&token=4d5b287b-504d-4dcf-ab11-b927c3df5604","id":"70f53f52-f147-42d1-8656-cb43849996a2","width":600,"height":600,"filename":"01-10x-9x9.mp4","type":"video/mp4","caption":"Eyedropper - idea prototype","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Fp31Dat16gv7GBvdRgzPs%2F21cceb60-f542-4439-ac4e-3f6000afbb5e.png?alt=media&token=1b81730e-d0be-461e-93c1-7cf1b025af07","id":"21cceb60-f542-4439-ac4e-3f6000afbb5e","width":2932,"height":4766,"filename":"color-eye-dropper-mock-early.png","type":"image/png","caption":"Eyedropper - early mocks","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Fp31Dat16gv7GBvdRgzPs%2F41e0392f-eb79-461f-84c3-adaedb9070fc.png?alt=media&token=df2404bc-8d17-491c-8cc4-997fc66f95b1","id":"41e0392f-eb79-461f-84c3-adaedb9070fc","width":1466,"height":1639,"filename":"color-eye-dropper-mock.png","type":"image/png","caption":"Eyedropper - iteration","border":true}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Fp31Dat16gv7GBvdRgzPs%2F4c167fdc-2f87-4fbf-8c1b-1d6822e86526.png?alt=media&token=83aa11e0-23e2-49a7-9dbb-4cc60f86177c","id":"4c167fdc-2f87-4fbf-8c1b-1d6822e86526","width":1543,"height":628,"filename":"focusring-styles.png","type":"image/png","caption":"Focusring refinement","border":true}]}
```

Test. Communicate. Unblock. Repeat.

Fixing abusive web notifications, and generalizing the UI framework for web permissions

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Ftm5uAmTKHJZ8CZLDird0%2F5d4f4c4f-aaca-40b6-95c8-e7d1f4955db9.png?alt=media&token=1da1fd99-f7eb-47c9-8653-48cb5a1af956","id":"5d4f4c4f-aaca-40b6-95c8-e7d1f4955db9","width":1080,"height":540,"filename":"prompt 1.png","type":"image/png","caption":"Permission request in a popover dialog (original)","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Ftm5uAmTKHJZ8CZLDird0%2Fa26bcc85-8665-4551-871d-3f8c55690f4a.png?alt=media&token=9bbc3116-9fdb-4bab-a094-a3aad4a255b2","id":"a26bcc85-8665-4551-871d-3f8c55690f4a","width":1080,"height":540,"filename":"prompt 2.png","type":"image/png","caption":"Quiet UI (interim to fix the notification permission, and investigate generalized solutions)","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Ftm5uAmTKHJZ8CZLDird0%2Fda08641e-dd32-496d-b0a1-6bc94d423451.png?alt=media&token=226a37e2-84d8-4b6b-a339-c8a3cabfcaf0","id":"da08641e-dd32-496d-b0a1-6bc94d423451","width":1080,"height":540,"filename":"prompt 3.png","type":"image/png","caption":"Chip UI (latest iteration for generalization) Note: Added for context only. I only guided this iteration.","border":true}]}
```

## Problem

Web users are spammed by prompts especially the one that asks to accept notifications from websites. The users and the web ecosystem suffer from abusive notifications by malicious websites. How might we keep out unwanted and spammy notification behaviors while supporting meaningful uses?

## Solutions

The solutions were not obvious at the beginning. Throughout the course of exploration and experiments, the team — consisting of engineers, data scientists, UX writers, product managers, designers, and various reviewers — expanded the solution space beyond the UI treatments, and devised layers of mechanism to respond to contextual characteristics.

* Levels of UI loudness

* User level adaptation

* Crowd deny

* [Enforcement program](https://support.google.com/webtools/answer/9798950)

* [Public data and comms](https://developers.google.com/web/updates/2020/02/notification-permission-data-in-crux)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Ftm5uAmTKHJZ8CZLDird0%2F2feabab9-6912-44bc-a125-a9523b74a129.png?alt=media&token=ef0f23e0-c048-4cdd-bbe1-f8c2e6a03e2b","id":"2feabab9-6912-44bc-a125-a9523b74a129","width":1080,"height":540,"filename":"silient (1).png","type":"image/png","caption":"Silent UI when likely unwanted","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Ftm5uAmTKHJZ8CZLDird0%2Fb6291d60-e4ab-4c3d-b2ff-adbc2a93551d.png?alt=media&token=6ed6beb3-b5a5-4f01-a88d-11afb4d9175e","id":"b6291d60-e4ab-4c3d-b2ff-adbc2a93551d","width":1080,"height":540,"filename":"quiet.png","type":"image/png","caption":"Quiet UI when ambiguous","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Ftm5uAmTKHJZ8CZLDird0%2Fc0c2a186-4452-487d-b445-9e83dbc54864.png?alt=media&token=2114d2a1-5359-4182-80ba-0c1e4567e047","id":"c0c2a186-4452-487d-b445-9e83dbc54864","width":1080,"height":540,"filename":"loud.png","type":"image/png","caption":"Loud UI when the user wants","border":true}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Ftm5uAmTKHJZ8CZLDird0%2Fd03f7266-a1f6-4121-b22a-5c8233035374.png?alt=media&token=ab95f659-32ff-436d-9da9-e8e20704d222","id":"d03f7266-a1f6-4121-b22a-5c8233035374","width":1080,"height":540,"filename":"enforcement.png","type":"image/png","caption":"Contextual messaging 1 — Discourage with warning","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Ftm5uAmTKHJZ8CZLDird0%2F70c01ff0-aa5d-443f-abda-ca3a7c394ecc.png?alt=media&token=eeb30afa-74b6-4e6c-8ec8-9aa93922e63d","id":"70c01ff0-aa5d-443f-abda-ca3a7c394ecc","width":1080,"height":540,"filename":"crowd.png","type":"image/png","caption":"Contextual messaging 2 — Inform with crowd trends","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Ftm5uAmTKHJZ8CZLDird0%2F25da0bb0-d3e4-4ecf-a5a6-4f6caad341aa.png?alt=media&token=520b7a9a-375e-4a24-85ff-c96ddcb89422","id":"25da0bb0-d3e4-4ecf-a5a6-4f6caad341aa","width":1080,"height":540,"filename":"user level adaptation.png","type":"image/png","caption":"Contextual messaging 3 — Guess, and ask for correction","border":true}]}
```

* [Introducing quieter permission UI for notifications, Jan 2020](https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html "Introducing quieter permission UI for notifications")

* [Protecting Chrome users from abusive notifications, May 2020](https://blog.chromium.org/2020/05/protecting-chrome-users-from-abusive.html)

* [Reducing abusive notification content, Oct 2020](https://blog.chromium.org/2020/10/reducing-abusive-notification-content.html)

* [Paper, Usenix accepted — “Shhh...be quiet!” Reducing the Unwanted Interruptions of Notification Permission Prompts on Chrome by Bilogrevic et. al. 2021](https://www.usenix.org/conference/usenixsecurity21/presentation/bilogrevic)

## My contributions

I led the design from its inception. Throughout the development, I drove investigation, iterations, and designs for experiments, which resulted in public launches on Win, Linux, Mac, Chrome OS, and Android.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2Ftm5uAmTKHJZ8CZLDird0%2F1cccb8ba-bdaf-4266-9309-a4d89282823c.gif?alt=media&token=2590f294-5828-4f3c-b079-7c637f1f24b5","id":"1cccb8ba-bdaf-4266-9309-a4d89282823c","width":960,"height":600,"filename":"First-Run-Desktop-Mobile-Together.gif","type":"image/gif","caption":"First-run of the quiet notification on Desktop (rigth) and Android (left)","border":true}]}
```

In parallel, I also guided the generalization of this UI for broader web permissions, which can be tested with chrome://flags/#permission-chip enabled on Chrome.

Leaning into iterations

Problem

Solutions

My contributions