Browser Extension UI / Auth popup UI / Extension Icon Design

Pending

Prize:

$10 USD

Entries Received:

26 days, 6 hours to award

I’m finalising a payment-SDK “drop-in” and now need the front-facing pieces that make it shine inside a browser extension. The work centres on three visuals: • A polished login popup that appears when users first link their wallet / account. • The main extension popup (opened from the toolbar icon) that echoes the payment badge look-and-feel. • A crisp toolbar icon that stands out at 16 × 16, 32 × 32 and 128 × 128. The extension must look identical across Chrome, Firefox and Edge, so your layouts have to respect each browser’s UI chrome while remaining consistent. Colour-wise I want you to draw directly from our existing payment badge palette; everything else should harmonise with those hues. Typography and spacing can follow common Material/Fluent patterns as long as the result stays lightweight and responsive. Deliverables in hand-off ready form: 1. High-fidelity Figma (or equivalent) files for the login popup, extension popup and icon set. 2. Exported SVG/PNG assets and a simple style guide (colour values, font sizes, spacing rules). 3. Any supporting notes that help my developers wire the screens into the SDK. Acceptance criteria: the popups render pixel-perfect at 100 % and 125 % zoom on all three target browsers, the icon passes Chrome Web Store legibility checks. If you’ve handled multi-browser extensions before and can turn around a clean, modern interface quickly, let’s talk. I have included 2 videos & the payment badge to design the elements around: (1) demonstrates the dummy ui for the payment sdk popup our developer is developing with and the fields needed (payment sdk iframe popup multi sized demo with fields) (2) demonstrates the browser extension and the fields needed in it (browser extension popup demo) Links to both videos: File 1: File Name: browser extension popup demo.mp4 Description: demo videos for iframe popup / browser extension design work File Size: 76.4 MB Download Link: https://www.sendspace.com/file/ni6wpl {The first 16 seconds of video) File 2: File Name: payment sdk iframe popup multi sizes demo with fields.mp4 File Size: 62.5 MB Download Link: https://www.sendspace.com/file/tc0k7p The payment sdk iframe popup wording after login currently says: "We text a secure payment link to your registered phone." It SHOULD read: "A Stealth payment request has been sent." VERY IMPORTANT: EVERYONE READ....This is the video which shows what popup states there are for each design... https://www.sendspace.com/file/sh8lzr The browser extension will need and additional screen that you can't see in the video. It is just a second screen after login to collect OTP code after login creds. You will need to present the popup UI in all (4) standard popup sizes as shown in the attached doc.

Skills Required

CSS

Figma

Graphic Design

HTML

Icon Design

JavaScript

SVG

UI / User Interface

User Experience Research

Web Design

Accepted File Formats

gif, jpeg, jpg, png

Clarification Board
No spam, self-promotion or advertisement is permitted.

Rahat R.

@rahat6650

4 days ago

Hello Sir, I’m unable to get in touch with you. I can create any type of design you need. If you’d like, you can have me complete your project. I’ll do my best to deliver high-quality work according to your requirements.

Contest Holder

6 days ago

VERY IMPORTANT: EVERYONE READ....This is the video which shows what popup states there are for each design... https://www.sendspace.com/file/sh8lzr

Contest Holder

6 days ago

Currently there is no requirement for the icon. One has been selected. Only the 2 popup designs (with elements for the states) is required as shown in the video.

Md Ansar A.

@Mdansaraligd

6 days ago

Hello Sir, please see my Entrie #38 and give your valuable feedback.

Maham L.

@maham1liaqat

6 days ago

Hi! I'm currently going through all the provided videos and documentation before preparing my submission. Just one quick question: is the listed contest prize the full budget for the project, or is the contest intended to select a designer for a larger follow-up project? Thanks!

Contest Holder

6 days ago

DO NOT SUBMIT UNTIL YOU HAVE WATCHED THE VIDEO SO YOU KNOW WHAT YOU NEED TO SUBMIT. Thank you.

Abdul M.

@abdulmuneeb2035

6 days ago

Check my idea sir #35

Contest Holder

6 days ago

If you have received a "2 star" rating for your entry it is probably because you just copied someone else's design and it will not be considered.

Contest Holder

6 days ago

VERY IMPORTANT: EVERYONE READ....This is the video which shows what popup states there are for each design... https://www.sendspace.com/file/sh8lzr

Contest Holder

7 days ago

For the browser extension popup, you also need the same base id/password combo but also, as mentioned in the description, you will need a 2nd screen that says: "OTP Code" with a field for entry.