Case study · Fintech product design

Investing that feels like opening a pack.

Pullz is a practice investing app for teens and first-time investors. You build a pack of real stocks, funds and crypto, rip it open like trading cards, and learn what every card means. Fun enough to come back to, honest enough to trust.

RoleProduct design, UX writing, front end
AudienceTeens, plus adults new to investing
PlatformResponsive web app, phone to desktop
Built withReact, TypeScript, Vite. Simulated prices.
Where it started

A money dashboard that stopped right before the interesting part.

The first version, called Shoal, was a teen money dashboard: balance, spending by category, savings goals, and a privacy model where the teen decides what a parent can see. It tracked money well. But it stopped at the edge of the thing young people are most curious about and most nervous about: investing. It is now Pullz, named for the cards you pull from a pack.

The new version keeps everything that worked, rebuilt from scratch in clean source, and adds a place to start investing that is fun, safe to practice in, and teaches as you go.

Before
The original Shoal overview: balance, monthly spending and a spending chart
A spending dashboard.
After
The new Pullz home: total worth, a Binder of investment cards and a round-up pot
Spending, saving and investing in one place.
The brief

Make buying stocks, ETFs and crypto feel like pulling cards.

Bring investing in. Make it feel like opening a pack of trading cards. Keep it a little gamified, but still clearly a finance app. Teens come first, and it should work just as well for an adult who never learned the basics.

Cash AppFor clarity: one giant number, plain words, black and neon green, one obvious action per screen.
GameStopFor collector culture: daily drops, graded cards, the thrill of the reveal.
The tension

Keep the ritual. Take out the luck.

A pack where you pay and get a random stock is a loot box with real money, aimed at minors. Regulators have already pushed back on gamified trading, and several countries restrict loot boxes. That would have made Pullz fun and indefensible.

So the pack keeps everything that makes opening one exciting: the foil, the tear, the flip, the holo shine. It loses the one thing that makes it gambling. Five rules hold the line:

  1. 1You pick every card.Opening is the reveal, not the roll. The only random pull in the app is a daily lesson.
  2. 2Rarity means risk.Rarer is not better. Common is a broad fund. Ultra rare is crypto, and it comes with a warning.
  3. 3No points for trading.Buying and selling never earn points or confetti on their own. Lessons and quizzes do, and sets reward habits like holding a broad base or spreading across categories.
  4. 4Grades reward patience.A card's grade climbs the longer you hold it, the opposite of a trading app's incentives.
  5. 5A parent approves, the teen decides.Under 18, a parent okays each pack. The teen decides what shows up in the parent's Pullz view.
CommonBroad funds like VTI or VOO. Hundreds or thousands of companies, slow and steady.
UncommonThemed funds like tech or video games. Still a basket, but a narrower one.
RareOne single company. If it has a bad year, the whole card feels it.
Ultra rareCrypto. Can halve within months, which is why many beginners keep it small.
A sealed green foil pack with a dashed tear line
Drag across the foil to tear it, or tap the button.
Bitcoin revealed as an Ultra rare holo card with a risk warning
Every flip explains what you got and how risky it is.
Three revealed cards fanned out above set progress
Cards go to the Binder, and sets show what is missing.
The rip, rebuilt

Studied the rips teens actually watch. Kept what earns the payoff.

I studied how Pokémon TCG Pocket, EA FC walkouts, Marvel Snap and live breaks on Whatnot and TikTok build suspense, then rebuilt the opening around the moments that make a pull feel earned. Every beat had to work in a finance app too.

A real capture of the app, not a mockup.
  1. 1Tear along the line.The strip follows your finger along a perforation and gives at 70%, so it never needs a precise swipe. The foil crinkles as you move, synthesized live, no audio files.
  2. 2An honest light leak.The glow from the torn pack takes the colour of the best card inside. A tease, never a lie.
  3. 3Best card last.Cards rise as a stack, ordered from steadiest to riskiest. A Rare or Ultra rare glows through its back before the flip.
  4. 4Clues that teach.Before a big card flips, three beats land: its category, then the market or network it lives on, then the ticker typing in. The suspense is the lesson.
  5. 5Flick it away.Spring physics on everything a finger touches: tilt to catch the holo, throw a card aside to see the next. Skip appears after your first pack.
A card back glowing gold before it is flipped
The back hints at what is coming.
Clue chips reading Crypto and Risk 5 of 5 above a glowing card back, with the ticker typing in
Category, risk, then the ticker.
Bitcoin revealed as a full art gold Ultra rare card with a risk warning
The payoff, with the warning attached.

What I avoided: paid packs or odds of any kind, foil on every card (Commons stay matte so rarity means something), neon green flooding the screen, and emoji standing in for icons.

Printed, not generated

Detail density that reads as made by hand.

Every card carries real anatomy: a set mark, a collector number out of 014, a rarity symbol (circle, diamond, star, double star) and a series line. Each tier has its own finish. Commons are matte with a soft sheen. Uncommons are reverse holo, so the text panel shimmers and the art stays clean. Rares get rainbow holo with glints on the art. Ultra rares are full art in gold cosmos foil.

The art tells you what the card is before you read a word. Each one carries a drawn emblem of what it holds or makes: a city of companies for the whole market, a trophy for the 500 biggest, a chip for tech, a controller for games, a turbine that turns for clean energy, a sneaker for Nike, a coin for Bitcoin. No real logos, just the idea. The line underneath is the card's real simulated price for the last 60 days. Hold a card long enough and it earns a graded slab, with a label, a grade word, days held and a cert number. The grade measures patience, never profit.

A rare Nintendo card revealed on desktop with rainbow holo
A Rare reveal on desktop.
Three new cards fanned out with the Ultra rare in the centre
The best card takes the centre.
Glass and motion

Feels like it belongs on an iPhone.

The interface follows Apple's dark mode and glass materials: true black, grouped surfaces, blurred glass with a bright rim, and a floating capsule tab bar over a slow green to blue glow. Colour stays between green and blue, with neon saved for glows and the rarest cards. Red appears only when money is down, because a loss should never look like anything else.

Everything moves with intent. Pages settle in, lists cascade, balances count up, charts draw themselves, switches and segmented controls spring, sheets rise like iOS sheets, and every motion falls back to a simple fade when the device asks for reduced motion.

Desktop home in dark glass with a sidebar, balance, Binder, round-up pot and lessons
Glass panels over the ambient glow.
An iOS style glass sheet showing a graded slab
Sheets rise like iOS sheets.
Building a pack

A pack builder that coaches while you choose.

Pick three cards, choose $10, $25 or $50, and slide the split. A risk bar fills with each tier's colour, and plain coaching appears as you build: too much crypto, no steady base fund, or all three cards in one category. Starter packs give first-timers a sensible place to begin.

Spare change from debit card purchases rounds up into a pot. Once it reaches $10 you can build a pack from it, so investing happens without needing a decision every time.

Desktop pack builder with a catalog of cards and a pack summary
Desktop: catalog on the left, your pack and split on the right.
Phone pack builder with QQQ, Apple and Bitcoin, split sliders and a risk bar
Phone: the split, the risk bar and the coaching.
The Binder

Your portfolio, as a collection worth keeping.

Your portfolio lives in sleeved 3 by 3 binder pages that show the whole Series 1 set. Cards you own sit in their pockets; the rest are numbered ghost slots, so you can see what is missing and tap one to learn what it is before you ever buy it.

A practice time machine skips ahead a week, a month or three, so you can watch crypto swing far harder than a broad fund without risking anything. Sets like Diversified, Around the world and Long haul reward good habits instead of activity.

Desktop Binder with the time machine, risk mix, cards and sets
Value, risk mix, cards and sets in one view.
A card detail sheet showing worth, paid, gain and grade
Card details: worth, gain, grade and a plain explanation.
Learning loop

Short lessons, real numbers, no lecture.

Seven three to four minute lessons cover budgeting, what a stock is, ETFs and diversification, risk and crypto, compound growth, fees and hype, and first paycheck moves like the 401(k) match and the Roth IRA. Each ends in a quick quiz that explains the answer either way.

The Growth Machine makes compound growth something you can feel: slide the weekly amount and starting age, and see what waiting ten years costs. Turn on Real life and the line gets bumpy, losing years included. Explain mode underlines money words across the app; tap one for a plain definition.

A quiz question about which card has the highest risk, answered correctly
Quizzes explain the why, right or wrong.
The Growth Machine chart comparing starting now with starting ten years later
The cost of waiting, in dollars.
Two people, one app

Built for a 15 year old and a 45 year old.

Maya, 16 invests through a custodial account. Her mom approves each pack, and Maya chooses what shows up in her mom's Pullz view: balance and goals on, store names off. Jordan, 24, just started a first real job. No approvals, plus lessons on emergency funds, employer matches and retirement accounts.

The tone is playful but never childish, so an adult who never learned this stuff can use it without feeling talked down to. Every screen works from a 390 pixel phone to a wide desktop: bottom tabs on phones, a sidebar on desktop.

Desktop home with total worth, Binder, round-up pot, Daily Drop and lessons
Desktop home: worth, Binder, round-ups, the Daily Drop and the next lesson.
Shipped and checked

Every screen, every control, three screen sizes.

An automated run plays the whole app at phone, tablet and desktop sizes: onboarding, building and approving a pack, tearing it open by drag and by button, flipping every card, selling, skipping time, finishing a lesson, adding goals, sharing switches, both themes and both players. It fails on any console error, sideways scrolling, tap target under 40 pixels or text under 12 pixels.

241automated checks per run, all passing
3screen sizes: 390, 768 and 1440 pixels
1.56 MB → 0.35 MBJavaScript, rebuilt without a 3D engine; card art is SVG
0console errors, with reduced motion supported

Next: testing with real teens and parents, a brokerage partner for custodial accounts behind a thin adapter, and a parent side for approvals. A real custodial account gives the adult full statements, so the privacy switches would become a conversation tool rather than a lock.

Rip one open.

Sample money and simulated prices. Nothing to sign up for.