Quippy Browser Extension | Lakshmi Pratap

Project overview

Solving my own tab-switching problem

In my day-to-day work I kept breaking flow to open a new tab for small tasks — currency conversions, timezone checks, quick translations, word lookups. Each one meant five steps and about 30 seconds; twenty-plus times a day, that's real lost focus, not just lost time.

I prototyped a fix at a Figma Makethon: select text, press a shortcut, get the answer in place. The response when I shared it on LinkedIn pushed me to build it for real — with ChatGPT and Claude as coding partners, I took it from prototype to a shipped Chrome extension during a career break.

Role

Product Design, UX Research, Frontend Development

Timeline

October 2024 – Present

Tech Stack

HTML, CSS, JavaScript, Chrome Extension APIs

Status

Live on the Chrome Web Store, and in daily use across Gmail, Docs, Slack, and 20+ other sites during testing.

01 — Origin story

It started as a five-minute fix at a hackathon

I kept breaking my own flow to open a new tab for small things — a currency conversion, a timezone check, a quick translation, a word I half-remembered. None of it was hard. It just meant five steps and a lost train of thought, twenty-plus times a day.

The Figma Makethon prototype

At a Figma Makethon, I sketched the fix I actually wanted: select text, press a shortcut, see the answer right where you are. It was rough — one function, no polish — but it captured the idea before I'd written a line of code.

Early Quippy prototype from the Figma Makethon — a single, unstyled function showing text selection turned into an instant result

Early prototype, built at the Figma Makethon

I shared it on LinkedIn mostly to show what I'd made. People started asking if they could actually use it — that response is what turned a hackathon sketch into something I decided to ship.

Validating it beyond my own workflow

Before building further, I ran a structured survey — 50+ designers, developers, writers, and marketers. Currency, timezone, translation, and unit conversions came up most, alongside quick word lookups while writing — the same fragmented, five-steps-for-one-answer pattern I'd noticed myself.

"I don't want to learn a new tool. I just want my simple tasks to happen instantly, wherever I am, without thinking about it." — Survey Respondent

With that validation, I moved from a one-function prototype to a real design system — the decisions behind it are below.

02 — Solutions

Built around zero friction, not more features

Research pointed to one principle: zero friction, universal access, instant results. Every decision below aimed to make Quippy feel like part of the browser, not a separate tool to learn.

Design decision 01

Keyboard-first activation

Ctrl+Shift+Q, chosen over a right-click menu

A right-click menu means moving the mouse, finding the option, clicking — a shortcut becomes muscle memory in two or three uses. Ctrl+Shift+Q (Cmd+Shift+Q on Mac) is easy to reach with one hand, doesn't conflict with existing browser or system shortcuts, and the platform is detected automatically so the UI always shows the right key.

Design decision 02

A design system before a line of code

Built in Figma first, so the build stayed about function, not visual decisions

Quippy overlays on top of any website, so the system needed to stay legible without clashing with the page underneath — neutral base colors, WCAG 2.2 contrast throughout, and an 8px grid keeping the whole popup compact at a 400px max-width.

Color

Typography

Design decision 03

Shadow DOM for style isolation

Protecting Quippy's styles from every host site, and vice versa

A global style on any given site — even something as blunt as div { background: red; } — could break the popup entirely, or Quippy's own styles could leak into the host page. Shadow DOM keeps its HTML and CSS in their own protected scope, adding some build complexity in exchange for looking the same everywhere.

Design decision 04

Fourteen functions, not twenty

Cut down from an original list of 20+ after usability testing

Conversions cover currency, weight, length, area, volume, digital storage, duration, dates, and temperature; lookups cover translation and dictionary definitions; utilities cover quick maths, timezones with a meeting scheduler, and design units like px, pt, em, and screen ratios. Each one auto-detects the input where it can — numbers suggest conversions, words suggest definitions — so the right function is usually already selected.

🧮Maths

📖Meaning

🌐Translate

⚖️Weight

📏Length

📐Area

🫙Volume

💾Digital

⏱️Duration

📅Date

🌍Timezone

💱Currency

🌡️Temperature

🎨Design

In the browser

A few of the 14 functions in use.

Default state

Function selector plus a pre-filled, editable input.

Currency

Real-time rates, cached hourly, with a copy button.

Timezone

Full country names, plus a built-in meeting scheduler.

Translate / Dictionary

Auto-switches to dictionary mode for single English words.

Unit conversions

One consistent interface across temperature, area, and volume.

Utilities

Timer and calculator, in the same design language as everything else.

03 — Impact

Removing friction, not adding features

Quippy launched on the Chrome Web Store in November 2024 and has been in daily use since, validated by designers, developers, writers, marketers, and business professionals who use it dozens of times a day.

14

Core Functions

0ms

Load Impact

100%

Site Compatibility

Zero

Data Collected

Decision Impact

Local caching for currency rates Cut API calls from hundreds a day to about 24, with instant (0ms) conversions

Editable, pre-filled input Removed friction on imperfect text selections without slowing the flow down

Smart translate/dictionary detection One interface covers both, no manual switching required

activeTab + storage permissions only No tracking, no analytics, no stored queries

04 — Reflection

What building and shipping it taught me

Real-world use is irreplaceable. About 80% of the UX fixes came from two weeks of using Quippy as my own daily tool, not from controlled testing.

Designers can build real products. With AI tools as development partners, the line between designing and building is thinner than it used to be — I had no prior extension experience going in.

Simplicity beats features. Cutting a planned 20+ functions down to 14 well-executed ones mattered more than covering every edge case.

Context awareness earns its keep. The features that landed best — dictionary/translate switching, timezone parsing — anticipated intent instead of asking for instruction.

Try Quippy

Available now on the Chrome Web Store. Install it, select any text, and press Ctrl+Shift+Q.

View on Chrome Web Store →