dapple
dapple, first drawn as Influencer Index, is a marketplace where fans collect, win in drops and trade numbered card editions of celebrities, under the line Share in the success of your favorite celebrities.
UX/UI for the mobile app and its web version: onboarding, discover and card pages, three-phase drops with a live auction, limit-order trading, challenges and the profile, identity checks and payments.
Fan marketplace for celebrity cards
dapple invites fans to share in the success of their favourite celebrities. Every influencer is issued as numbered card editions that users collect, win in drops and trade with each other, and the price of an edition moves with the market. The design files carry two names, Influencer Index on the early screens and dapple on the later ones. We designed the mobile app and its web version on one indigo and white system, from sign-up to payments.
Onboarding sells the idea in two slides: Collect to connect, with cards, challenges and reward cards to trade in the marketplace, and Become a true fan, with exclusive fan clubs. Sign-up takes a phone number with a verification code or a Google, Facebook or Apple account, and the first challenge is already waiting: get your first card by verifying your identity, now or later.
Discover, influencer pages and card editions
Discover lays the cards out in a grid with price and change, under Featured and Popular and filters by category and country. An influencer page opens on a full-height portrait, how many of their cards you own, a price chart from one hour to all time and your holdings. An edition page adds its own price, market statistics with capitalisation, buy and sell volume and the influencer's place in the index, and the trading history; sets show how many cards are left to complete them.
Home gathers the balance, collector points, the watchlist, transactions, a challenge banner, trending cards and live drops. The watchlist sorts by date added or price change, and a daily roundup lists each card with its edition, value and move. On the web, a ranking of top rated influencers orders them by market cap and number of holders.
Drops: new cards released in three phases
Drops are where new influencer cards are released, and to give everyone a chance each user can win only one card per drop. Phase 0 announces the release with a countdown and a reminder, in Phase 1 the first 500 bidders get a chance at one of three special cards, and Phase 2 is a live auction where a bid can be beaten.
During the auction a meter shows where the bid stands, from the top 25% through the middle to the bottom 50% and the danger zone, with a nudge to raise it and notifications before the user is outbid. A won card goes to the collection with collector points and progress to the next level; a lost one gets a try your luck again.
Buying and selling cards with limit orders
Buying and selling work as limit orders. The user sets the number of cards and the maximum price per card, with an optimal price suggested from the market a few percent above the latest one, checks the order against the wallet balance and submits it. The order stays valid for 24 hours and is executed only if it matches a seller's price; a pending order can be removed, and a short tutorial draws on a chart how a limit price gets executed.
Challenges, badges and the collector profile
Challenges keep collectors coming back: sets of editions to complete with a progress ring, login and daily trading streaks, badges that are trending among other users and rewards unlocked by level. The profile carries the collector's level, dapple points, the number of cards, the wallet balance with buttons to add and withdraw funds, total holdings, editions and sets, and a trophy card picked from the collection.
Identity checks and payments
Trading needs a verified identity, which financial regulation requires, and the app lets the user do it right after sign-up or before the first purchase. The check collects personal details and an address, confirms the email, asks whether the user is a US citizen, green card holder or visa holder along with the last four digits of a social security number, and takes a photo of an ID card, driving licence or passport and a selfie, with guidelines for each shot.
Money comes in by card or bank transfer with a billing address, and every top-up ends on a success or failure screen with the transaction details; withdrawals show a preview with arrival time and fee. Edge cases have their own states too: a wrong code, expired bank details, users under 18 and not enough money in the wallet.
The web version
The web version carries the same flows to the desktop: sign-up on a split screen with the dapple wordmark and the line Share in the success of your favorite celebrities, registration in steps, buying with a max price dialog, order review and confirmation, adding funds with a saved payment method and the account with its transactions.
Project facts
- Client
- dapple (working name Influencer Index), a marketplace for collecting and trading celebrity card editions
- Industry
- Fintech, digital collectibles, fan engagement
- Platform
- Mobile app (iPhone), web version (desktop)
- Services
- UX/UI design of the mobile app and its web version
- Deliverables
- Onboarding and sign-up; home, watchlist and daily roundup; discover, influencer, edition and card pack pages; drops in three phases with a live auction; buying and selling with limit orders; account and transactions; challenges, badges and the profile; identity verification; top-up, withdrawal and billing; the main flows on desktop; notes on states and edge cases
- More work in
- Mobile Applications, UX/UI Web Design
Questions about this project
What is dapple?
dapple is a marketplace where fans share in the success of their favourite celebrities: influencers are issued as numbered card editions that users collect, win in drops and trade with each other, and each edition has a market price. The early screens carry the working name Influencer Index.
What did thelegacy design for dapple?
The mobile app and its web version: onboarding and sign-up, discover and card pages, drops with a live auction, trading with limit orders, challenges and the collector profile, identity verification and payments, with states from loading to errors.
How do drops work in dapple?
New cards are released in drops, one card per user. Phase 0 announces the release with a countdown, in Phase 1 the first 500 bidders have a chance at one of three special cards, and Phase 2 is a live auction where a meter shows whether a bid is in the top 25%, in the middle or in the danger zone.
How does trading work in the dapple app?
Through limit orders: the user picks the number of cards and the maximum price per card, with a price suggested from the market, and the order stays valid for 24 hours and executes only if it matches a seller's price. Selling works the same way with a minimum price.
