Shopl Extension

Designing a Chrome Extension That Lets People Shop Anywhere and Check Out Once

Start A Similar Project Read The Story

Industry

E-commerce01
Browser Extension02

Project Type

Brand01
Chrome Extension02
Web Dashboard03
Website04

Services

Brand Identity01
Product Design02
UX/UI Design03
Web Design04
Design System05

Overview

Shop Anywhere, Check Out Once

Shopl is a Chrome extension and web dashboard for people who shop across many online stores. Add products from any site to one global cart, check out once with your details saved, and follow every order, deal and collection from one home.

My team and I designed Shopl end to end: the brand, the onboarding, the extension, the dashboard and the website.

The Problem

The Challenge

Online shopping is split across tabs. Every store has its own cart, its own checkout form and its own tracking email, so buying from three stores means doing everything three times.

Shopl had to sit on top of all of them: one click away on any site, never in the way, and trusted enough to hold a card.

What got in the way

A cart on every site
Forms typed again
Orders lost in email

Had to stay

Shop on the store’s site
One-click checkout
Bank-grade trust

What I Delivered

How I Helped

I led the design from a blank Figma page: a brand that looks safe to pay with, a popup that works on any store, and a dashboard that brings every order home.

Everything shares one purple, one typeface and one set of components, so the extension, the dashboard and the website feel like one product.

Brand identity and a marketing style guide
Onboarding, 15 screens and states
Chrome extension, 62 screens and states
Web dashboard, 58 screens
Landing and About pages

The Product

Three Places, One Shopper

Shopl lives where people shop. The extension waits in the browser toolbar on any store, the dashboard is home for everything bought, and the website explains the idea and gets the install.

137 screens

Designed across the extension, dashboard, onboarding and website

BrandOnboardingExtensionDashboardWebsite

1 cart

For every store, grouped by store with its own item count

1 checkout

Wallet, address and billing filled in, for everything in the cart

The Work

Five Pieces, One Product

Each piece had one job in a shopper’s day, from first hearing about Shopl to tracking a parcel. Each job became a chapter you’ll see below.

Brand

Its jobLook safe enough to hold a card.

Chapter 01 · Brand

Onboarding

Its jobSet up once, so checkout never asks again.

Chapter 02 · Onboarding

Extension

Its jobSave from any store without leaving it.

Chapter 03 · Extension

Dashboard

Its jobEvery order, deal and collection in one home.

Chapter 04 · Dashboard

Website

Its jobExplain the idea in one line and get the install.

Chapter 05 · Website

User Flow

Any Store, One Checkout

The heart of Shopl is the cart. A shopper makes two real choices, what to buy and how to pay. Everything else, from grouping by store to filling in forms, Shopl handles.

Shopper does

01Shop like normalAny store, in any tab

02Save what they likeTo the cart or a collectionDecision

03Open the cartFrom the toolbar

04Pay onceWallet or saved cardDecision

05Track itFrom the popup or dashboard

Shopl does

01Waits in the toolbarPinned, one click away

02Keeps it in one placeWhatever the store

03Groups it by storeItems, quantities, totals

04Fills in the detailsSaved address and payment

05Brings orders homeStatus from every store

Same step, both sides: what the shopper does and what Shopl does. Real screens from the extension.

Design Decisions

From First Draft To Final

The Figma file still holds our first version of Shopl. Putting it next to the final shows the calls that shaped the product.

Decision 01 · Popup size

A popup with room to breathe

The first popup was a tall, narrow 350 pixels, and images, prices and buttons fought for space. We widened it to 500 by 600: room for a proper grid and a fixed tab bar, while it still sits over any store without hiding it.

Version 1 of the popup home, 350 pixels wide

Decision 02 · The cart

One cart, sorted by store

Version one listed every product in one long list, so it was hard to see what came from where. The final cart groups items under each store with an item count, keeps quantity and remove on every row, and lets any product move to a collection.

Decision 03 · Checkout

Pay without leaving the store

Checkout opens as a panel over the page you are on. Payment method, shipping and billing are three dropdowns filled from onboarding, so paying never means a new tab or a new form.

The Shopl checkout panel open over a store page

Decision 04 · Colour

From navy to Shopl Purple

An early direction paired deep navy with yellow. It felt heavy next to bright product photos. We moved to one lighter purple for everything you act on, kept yellow as a small spark, and gave text to night black.

Chapter 01 / 05 · Brand

Identity · Style guide

A Brand You Can Pay With

Shopl had to feel friendly and safe at the same time. The mark is a shopping bag that doubles as a price tag, with a corner of colour. Satoshi in Bold and Medium carries every word, and four colours keep the product calm: purple where you act, night black for text, yellow for a spark and white for space.

Logo · Mark, wordmark, pill

Colour · Four, each with a job

Type · Satoshi, two weights

In use · Website and devices

Colours: Shopl Purple, Night Black, Yellowy and White: 4 colours
Satoshi in Bold for headings and Medium for everything else: 2 weights
Logo forms: the mark, the full wordmark and a pill for buttons and badges: 3 forms

Colour

Purple where you act, nowhere else

Shopl Purple marks the logo, buttons, links and icons. Night Black carries headings and text, Yellowy adds small sparks like badges and highlights, and white gives every product photo room.

Shopl Purple#7C44EA Night Black#0F1721 Yellowy#FFBA19 White#FFFFFF

What we made Logo and mark Wordmark and pill Colour palette Type: Satoshi Brand presentation Marketing style guide Device mockups

Chapter 02 / 05 · Onboarding

Set Up Once, Never Again

Shopl asks for everything once, at the start: email, a verification code, a shipping address and a card. Each step pairs a short form with a picture of what it unlocks, and every form has empty, filled and error states.

01 · Get started

02 · Verify email

03 · Shipping

04 · Billing

05 · Welcome

Steps: get started, verify, shipping, billing and welcome: 5 steps
Screens, including the filled and error state of every form: 15 screens
Time a shopper types their details. Every checkout after uses them: Once

Every state

Empty, filled and wrong, all designed

Forms are where trust is won or lost. Each one shows clear labels when empty, a calm confirmed look when filled, and a short message under the exact field that needs fixing.

Empty

Filled

Error

Every screen in onboarding Log in Get started Verify email Shipping Billing Add billing address Welcome Filled states Error states

Chapter 03 / 05 · Extension

Product design · Chrome extension

A Cart On Every Store

The extension is a 500 by 600 popup in the toolbar with four tabs: Home, Deals, Favourites and Cart. Save a product from the store you’re on, browse deals, sort finds into collections and check out, all without leaving the page.

Pixel popup: wide enough for a grid, small enough to keep the store in view: 500 × 600
Tabs: Home, Deals, Favourites and Cart, always one tap away: 4 tabs
Screens and states, from log in to an empty deals page: 62 screens

Collections

Save it now, decide later

Not everything is ready for the cart. Shoppers can save any product to a collection, move it between lists and browse collections trending among other shoppers and stores. Every action ends with a clear confirmation.

Move an item to another collection — Move

Every screen in the extension Log in Home Deals No deals Trending collections My collections New collection Edit and delete Move item Cart Checkout Add address Payment method

Chapter 04 / 05 · Dashboard

Product design · Web app

Every Order, One Home

The dashboard is where Shopl keeps everything after the cart: orders from every store with tracking, deals, collections, a wallet with cards and transactions, and settings for addresses and notifications.

Home · Orders, deals and collections

Scroll inside the window to see a whole order with tracking

Dashboard screens, with modals, dropdowns and empty states: 58 screens
Sections: Home, My Orders, Favorites, Deals, Cart, Wallet and Settings: 7 sections
Tracking view per order: a timeline, a map and every item in the parcel: 1 timeline

Chapter 05 / 05 · Website

Web design · Landing page

A Website That Gets The Install

The landing page says it in four words, Shop anywhere. Checkout here., shows the popup working on a store, and explains Shopl in three steps. An About page tells the story behind it. Every button leads to one action: Add to Chrome.

Scroll inside the window to read the landing page