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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2F4q0ZR45PWDkEY0fAkM7y%2Fc5d1635e-9dc7-4ce0-8962-342724797e9b.png?alt=media&token=7eb5c8d6-ad22-4310-a81c-14660fa63bae","id":"c5d1635e-9dc7-4ce0-8962-342724797e9b","width":1200,"height":675,"filename":"02.png","type":"image/png","caption":"","border":false}]}
```

Since unmoderated study tools like Validately and UserTesting became widely available, they have helped many functions on a team and designers like me evaluate options and obtain early feedback on specific aspects of a product.

It has always been eye-opening to uncover issues by watching testers navigate through screens and mocks, and listening to their feedback. However, two parts of the process were particularly time-consuming for me:

1. **Before the sessions**: writing up an easy-to-follow script without grammar mistakes

2. **After the sessions**: comprehending fully and extracting verbatim quotes from the video recordings

I encountered testers who kindly corrected my grammar mistakes and struggled to make sense of my overly complex instructions, despite my spending days preparing the scripts and often having them reviewed. These issues were caught during pilot tests, but I hoped to identify them even earlier. Moreover, when it came time to document findings, taking notes from the recordings and identifying important contextual comments by the testers required me to re-watch the videos numerous times. The quality of machine-generated transcripts was not great two years ago and earlier, complicating this task further.

Now, as I prepare study scripts, I keep ChatGPT open alongside my document. For each task, I check grammar and explore better ways to phrase things. Whenever ChatGPT suggests a correction, I make sure the key points remain intact and then iterate several times to refine them into clear and simple instructions. Just like I write this post, paragraph by paragraph, with ChatGPT's help. Similar tools, such as Claude and Bard, would offer the same assistance (in case you run out of quota on one).

On to the transcript feature, I’ve only used one study tool recently (Userbrain), but this likely applies to other tools as well. With the integration of the latest language model, I've found that the transcripts of session recordings are incredibly accurate, capturing words that I might have missed with my own hearing. It’s a completely enhanced starting point for reviewing. Now, I can watch all the recordings at 2x speed to spot obvious issue areas first, and carefully read the transcripts to not miss important comments and get verbatim quotes for documentation. Then, I watch them all at 1x speed to fully understand again. It’s quite delightful.

In addition to transcription, the AI analysis provided by study tools is likely to improve over time, and the tools may eventually provide co-pilots for me to ask questions and create highlight reels. But even before we reach that level of advancement, the process improvements enabled by AI are already sufficient to allow running more studies more efficiently and enjoyably.

User studies and AI: Preparation & reviews made easy

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2F7uiyrf0LpHRKUG9VkihF%2F0e90db7e-04b8-4cd9-8dd6-d5eb1134a50b.png?alt=media&token=11321cb5-2237-433c-93b6-4e0138cfb2fe","id":"0e90db7e-04b8-4cd9-8dd6-d5eb1134a50b","width":1200,"height":675,"filename":"3.png","type":"image/png","caption":"","border":false}]}
```

\
Exploring generative AI products on the market, as well as those under development, reveals that every query and request yields unique outcomes. This generative characteristic is to be expected. Additionally, the models and data for AI products are in a constant state of flux, making variability in outputs not only easily noticeable but also frequent. Moreover, new ideas and features develop at short cadences, and users witness all these changes combined.  While evaluations and feedback loops ensure quality at scale, it's equally vital for us as developers and designers to manually test and build intuition for our AI products—and to do so early and routinely.

**Test early builds. Get the baseline.**

Early product builds that leave the local dev environment will likely crash at first. If not outright crashes, often many components are broken, preventing effective testing, e.g., AI not generating content, AI slowing down screen transitions, etc. This is the baseline intuition. Things only get better. Report crashes.

**Test every build. Spot themes.**

Stepping through the key use case scenarios of our product—install, first run, ask a question, landing on a page via sharing, etc.—we can directly experience the core product values while noticing shortcomings of the original design. I find it helpful to complete full passes of the major flows before stopping at every glitch. Jot down issues briefly to revisit at the second pass. What’s working well? What are the priorities to unblock at this point? What requires ongoing monitoring? Log tickets capturing themes and priorities. Draw the line on what requires fixes. Add in missing designs. We get to better acknowledge constraints to work with, e.g., LLM AI text streaming can come very slowly, and be able to find resolutions with better understanding.

**Test towards the upcoming milestone. Stay up to date.**

It might be a user study, internal or external friendlies, or a big demo. Getting hands-on with the latest build allows for fully grasping user feedback. Also, report issues to help minimize bugs and maximize chances to get meaningful feedback. I had a handful of testers participate in user studies, only to find that the intended AI features did not show up at all.

**Test routinely. Sense variability.**

Many times, when I test the products I design, I find myself paying attention only to whether the implementation matches the design mocks, the UI operates correctly, and so on. I find that I need to get the UI implementation correctness done first. Then, I can be more mindful of the users in the following routine tests to see the product holistically and see what’s changing. The UI that used to work yesterday might not work soon; for example, a UI that accommodates AI latency might not work when the model becomes extremely fast.

It requires a time investment. Over time, we become fluent at it!

Manual testing: Building intuition for our AI products

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHmIGl8vde8Tsm40fufonAw7vYdW2%2FO767LtnXSFz2OqbTwM9B%2F31a12f60-5e3b-4efe-bfca-0b075cf7a80d.png?alt=media&token=27b11903-defb-4049-9ffa-11a3dc8307ae","id":"31a12f60-5e3b-4efe-bfca-0b075cf7a80d","width":1200,"height":675,"filename":"01.png","type":"image/png","caption":"","border":false}]}
```

Working as a designer for a LLM AI-powered product, which we'll refer to as 'AI' in this post, I have had the opportunity to try and use various AI products available in the market; for example, ChatGPT, Pi, Perplexity, Google Workspace, Amazon, Shop, TLDR, etc. My role involves creating a chatbot interface, and through my experiences, here are seven observations about AI-powered chatbots.

1. **AI is always responsive** \
   When unable to generate a sufficient answer, AI acknowledges its understanding of the query and indicates its inability to respond, which is deemed an acceptable form of communication in a conversation. Unlike traditional customer support chatbots that often triage users, AI stands out by never leaving me hanging. It engages me in open-ended conversations, readily responding to a wide range of inputs. Whether my queries are vague, out of context, or complex, AI consistently keeps the conversation going.

2. **AI understands imperfect inputs** \
   AI comprehends and corrects imperfect inputs, including typos, incomplete grammar, and vague expressions. This capability distinguishes it from traditional keyword searches on websites, which are less forgiving of typos. Additionally, it surpasses conventional search engines; with AI, I can simply ask "What's that?" in a chat thread, and it accurately understands the context and provides relevant information. AI also asks clarification questions when needed.

3. **AI takes terse and natural language** \
   AI seamlessly accommodates a wide range of input styles, from terse, single-word commands to complex, paragraph-length queries. Whether I request troubleshooting with just a word or provide a detailed situation description, AI responds with its understanding and relevant answers, ensuring a smooth and continuous conversation.

4. **AI covers a wide range of topics** \
   The AI models powering AI products are typically trained on extensive knowledge bases, often sourced from the web. Even though a product incorporating these models may not have been trained specifically on technical terms featured in the product, its AI is often capable of providing explanations for these terms right out of the box. It's important to note that AI can not only answer questions about knowledge specific to the product but also on a broad spectrum of subjects. This includes everything from recipes and coding to life advice, which might sometimes seem contextually unrelated, depending on the product.

5. **AI is very useful at summarizing and identifying patterns** \
   AI is good at summarizing content, identifying patterns, and providing valuable insights. When faced with lengthy or complex responses, I can request rephrasing and clarification as needed. Additionally, it can generate simple formatting, like tables, which enhances understanding, especially for complex information. By the way, the formatting could benefit from additional visual enhancements.

6. **AI goes non-sensical** \
   AI, at times, provides fabricated or inaccurate responses. This can be considered both a limitation and a feature (in a use of creative activities). When developing a product, maintaining continuous QA is crucial, and having an ever-evolving checklist is essential.

7. **AI is overly accommodating and agreeing** \
   AI's accommodating nature can sometimes lead to inconclusive conversations, necessitating mechanisms for meaningful conclusions.

All these features, except for #6 and #7, foster continuous conversation, delve deeper into topics, and maintain its flow. When developing a product intended to provide answers and assist users in achieving their goals, the AI in that context should proactively guide the conversation toward resolution. How might we ensure that each response is genuinely useful and easily digestible? How might we consistently propel the conversation forward and conclude it to a satisfying outcome? And, what strikes you in your world?

7 features of LLM AI that strike me

> 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.