ASIN Vault
Amazon seller analytics Chrome extension — brand identity, design system, 14 screens, and complete HTML/CSS/JS frontend — designed and built solo for a London client. Published commercially to the Chrome Web Store.
My Role
Solo UX Designer + Frontend Engineer
Duration
2 months
Year
2024
Tools
Figma · HTML5 · CSS3 · JavaScript
Project Brief
Design and build a commercial Chrome extension for Amazon FBA/FBM sellers — brand identity (3 logo variants), design system, 14 UI screens, and coded HTML/CSS/JS frontend packaged for Chrome Web Store distribution.
Amazon seller analytics Chrome extension — brand identity, design system, 14 screens, and complete HTML/CSS/JS frontend — designed and built solo for a London client. Published commercially to the Chrome Web Store.
The Problem
Amazon sellers can't see what matters — without leaving Amazon. Buy Box status, stock alerts, and profitability data were always three apps away.
Amazon FBA/FBM sellers monitoring multi-ASIN lines faced fragmented data: Buy Box ownership in Seller Central, stock in inventory tools, profit in spreadsheets. The vision: a browser-layer companion surfacing critical signals while the seller is already in Seller Central.
No browser-native analytics layer
Sellers had to leave Amazon Seller Central to check profitability, stock alerts, and Buy Box status — breaking their operational flow.
Multi-marketplace data was scattered
UK, US, Germany, and France marketplaces each required separate tool logins. No unified multi-marketplace view existed in the browser.
No activation/licensing system
A commercial SaaS extension requires access gating — activation codes, licensing, and subscription flow — not handled by default in Chrome extensions.
UX Audit
What was broken before we redesigned
A heuristic evaluation of the existing system identified these critical issues before any design decisions were made.
Helium 10/Jungle Scout require app switch
Existing tools need sellers to exit Amazon entirely to get analytics — the opposite of a browser companion.
Market GapNo multi-marketplace unified view
UK, US, DE, FR Amazon marketplaces require separate monitoring — no cross-marketplace dashboard in the browser.
Feature GapNo SaaS access model for extensions
Chrome extensions don't have built-in billing — activation codes and licensing required custom design.
Product DesignOur approach: Browser companion — not another SaaS tab
Built ASIN Vault as a lightweight browser-layer tool: connects to Amazon SP-API, tracks Buy Box ownership and stock thresholds across UK/US/DE/FR, calculates FBA vs FBM profitability, and surfaces alerts without leaving Seller Central. Brand identity (3 logo variants), design system, 14 screens, complete HTML/CSS/JS build packaged for Chrome Web Store.
Process & Approach
How I approached the challenge
Market Research
Benchmarked Helium 10, Jungle Scout, FBA Multitool, and Keepa. Identified browser-native analytics as the key differentiator — lightweight companion vs full SaaS dashboard.
Brand Identity
3 logo variants (primary, icon-only, reversed). Dark blue + gold color system. Typography for a B2B Amazon seller tool — professional, analytical aesthetic.
Design System + 14 Screens
7 Figma component pages: UI Guidelines, Form Components, Buttons, Cards, Complex Components. 14 product screens: Dashboard, ASIN Tracker, Profit Calculator, Stock Alerts, SP-API Connection, Activation.
HTML/CSS/JS Build + Packaging
Full frontend: HTML, CSS, JavaScript. Chrome manifest configuration, popup architecture, local storage for settings. Packaged and verified for Chrome Web Store submission.
Design Principles
Browser companion, not another SaaS tab
A Chrome extension popup is 400px wide. Every design decision is load-bearing.
Data density in popup constraints
Fixed viewport constraints made every pixel load-bearing. ASIN data cards, stock alerts, and profit figures competed for the same space — no decorative room.
Activation as product UX
The activation/onboarding screen is the first impression of a paid product — it has to communicate value before asking for credentials.
Multi-marketplace by default
UK, US, DE, FR — not buried in settings, but a first-class navigation dimension. International sellers are the core user, not an edge case.
A Chrome extension popup is 400px wide. Every design decision is load-bearing.
Why This Was Hard
Complexity signals
What set this project apart from standard product design work — the technical, systemic, and domain-specific challenges that demanded real depth.
Amazon domain expertise required
Buy Box mechanics, FBA vs FBM profit calculation, ASIN structure, SP-API connection — a complex e-commerce domain with specific data models and seller mental models.
Chrome extension architecture
Manifest configuration, popup vs background script architecture, Chrome storage API, extension packaging — platform-specific engineering knowledge required.
Activation/licensing system design
A commercial SaaS extension requires activation codes and access gating — custom UX design for a problem that standard app patterns don't address.
4-marketplace SP-API architecture
UK, US, Germany, France — four Amazon marketplaces with separate API connections, separate ASIN catalogues, combined dashboard views.
Brand identity. Design system. 14 screens. Chrome extension. HTML/CSS/JS build. Published commercially. Solo. 2 months.
Feature Highlights
Extension capabilities
Buy Box Tracking
Real-time Buy Box ownership monitoring per ASIN — price, seller, eligibility status, and win/loss trend.
Core FeatureFBA vs FBM Profit Calculator
Per-ASIN profitability comparing FBA fees vs FBM logistics — net margin, ROI, and breakeven price per unit.
AnalyticsStock Threshold Alerts
Configurable stock warning thresholds — alerts before inventory runs out, with reorder point calculations.
Operational ToolActivation / Licensing
Commercial access gate via activation code — first-impression UX for a paid product communicating value before authentication.
Commercial UXDesign System
Tokens, typography & components
A shared token-based system built to ensure consistency across every screen and state.
Color Tokens
Type Scale
Components
User Flow
Amazon seller workflow
Activation
License code
SP-API Setup
4 marketplaces
Buy Box
Real-time status
Stock Alerts
Threshold warnings
Profit Calc
FBA vs FBM
Tech Stack
Tools & technologies
Design
Frontend
HTML5
CSS3
JavaScriptMy Contribution
End-to-end ownership
01
Solo UX Designer + Frontend Engineer
Brand identity (3 logo variants), design system (7 Figma component pages), 14 product screens, complete HTML/CSS/JS Chrome extension build — packaged for Chrome Web Store.
Impact & Performance
Project at a glance
14
UI screens
3
Logo variants
4
Amazon marketplaces
100%
Design + Dev owned
Timeline
Dec 2023 – Jan 2024
Research + Brand + Design System
Competitive analysis. 3 logo variants. 7-page component system in Figma.
14 Screens + Chrome Extension Build
14 product screens. Full HTML/CSS/JS build, Chrome manifest, packaged for Web Store. Client delivery.
Outcomes
The impact we shipped
Measured results from usability testing, stakeholder reviews, and post-launch adoption tracking.
14
UI screens
3
Logo variants
4
Marketplaces
Chrome Web Store
Distribution
"Delivered complete commercial Chrome extension: brand identity, design system, 14 UI screens, and HTML/CSS/JS frontend. Client (AbstractTek Ltd, London) published to Chrome Web Store commercially post-delivery."
Learnings & Reflection
What I'd do differently
01
Chrome extension constraints are a design system problem
Fixed popup viewport and manifest restrictions made every design decision load-bearing. Constraints at this level require systems thinking, not screen-by-screen decisions.
Interested in working together?
Let's talk about your project or open role.
Live Prototype