ScamGuard AI
A mobile app that checks suspicious links before you open them, built in a one-month hackathon.
- Problem
- Scam links are built to look real, so most people can’t tell until they’ve already clicked.
- Solution
- One field to scan any link, and a verdict in plain words.
- Role
- UI designer (remote team)
- Tools
- Figma
- Timeline
- Sept 1 – 30, 2026 (1 month)
Kickoff
One month to design and ship a subscription app.
Designing at hackathon speed
ScamGuard AI was our entry to RevenueCat Shipaton, a hackathon for shipping apps with subscriptions. Developers built it in Flutter and Python, a graphic designer made the logo and brand, and I designed every screen.
I started by gathering my teammates’ ideas on what the app should include and noting them down. Working from those notes, I designed directly in high fidelity to keep pace with the build, then presented my designs to the team and the graphic designer for feedback before finalizing.
Design
Each screen answers one question: is this link safe?
Doubt can come from anywhere
A suspicious link might be in a text, an email or behind a QR code, so the scan screen takes any link, email URL or QR destination in a single field. No need to work out what kind of link it is first.
Underneath, What we check shows the six checks behind every verdict: SSL and HTTPS, AI detection, domain age, 40+ blacklists, URL structure and redirect chain.
A clear verdict
Results open with a plain-language verdict such as “You’re Safe to Proceed”, a risk score and the number of checks run. A mistyped or fake address gets its own answer, so every result makes the link’s safety clear.
- Safe result
- Link doesn’t exist
- Full report
Every scan, saved
History charts all your previous scans and keeps them organized, with filters for safe and risky links, so you can find and revisit any of them later.
Protection at a glance
The home screen shows how protected you are: a security score, threats blocked and safe sites, with recent scans below. One large Scan a Link Now button is always the next step.
Design elements
The building blocks of the interface, recreated from my final screens.
Colour
- Background#121417
- Surface#171920
- Primary#00C1D9
- Safe#00C18D
- Danger#F55C55
- Pro#E1AF4A
- Muted#58606D
Buttons
Status labels
Every status is written out, so colour is never the only signal.
Data
Plans
Navigation
Staying free
Anyone can check a link. Pro is for people who check a lot.
Protection first, upgrade second
Every account gets three scans a day, with a counter that keeps the limit visible. History shows three entries with an Unlock full history prompt, so people see what Pro adds before they’re asked to pay.
The Pro page compares monthly and yearly plans side by side, and checkout takes two simple steps.
Walkthrough
The whole app in thirty seconds.
The full flow
An animated walkthrough of the final screens, start to finish.
Learning outcomes
Design for the moment of doubt
People reach for a scam checker when they’re unsure and in a hurry, so every screen needed one obvious next step and nothing to decode.
Listen first, then design
Starting from the team’s ideas and checking back in before finalizing kept a fast timeline from leaving anyone’s input behind.
Upgrade prompts are design decisions
Where and how Pro appears shapes how trustworthy the whole app feels, not just the paywall.