thelegacy

dapple

  • Ux/Ui
Client

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.

What we did

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.

Onboarding: Share in the success of your favorite celebrities
Onboarding: Collect to connect
Sign up with a phone number, Google, Facebook or Apple
First challenge: verify your identity to get your first card

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.

Discover: card grid with prices and filters
Influencer page with price chart and holdings
Card edition details with price and market statistics
Card pack details
Home with balance, points, watchlist and trending cards
Watchlist sorted by date added and price change
Daily roundup of card prices
Web: top rated influencers by market cap
Web: buying with an amount to invest and a max price
Web: account transactions

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.

Drops in phases 0, 1 and 2
Phase 0: dropping soon with a countdown
Phase 2: live auction, the bid in the bottom 25%
Congrats: the card is won

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.

Buy cards: number of cards and max price per card
Review your order
Order submitted

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.

Challenges in progress with streaks
A completed challenge and badges
Profile with level, points, wallet and cards
Collection of editions and sets

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.

Identity check: US citizen and social security number
Identity check: photo of the ID card
Identity check: selfie
Add funds
Successful top-up
Unsuccessful top-up
Billing address

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.

Web sign-up with the dapple wordmark
Web registration in steps
Web log in
Web phone verification
Web tutorial: how a limit order works
Web: review your order
Web: set the max price per unit
Web: order submitted
Web: add funds with a payment method
Web: funds added

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
Related cases
ARUS, Solid, bankex

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.