Onboarding Cards

UI Elements

The cards a new member sees after signup. One step at a time, a store pair in place of a button on the alerts card, and an exit only after the first card.

Role
Front-end
Employer
Simpler Trading
Stack
React
Focus
Post-signup cards
Status
Rebuilt for this site

A new member of the session starts here.

Case study

Role: Front-end

Context: After someone joins or buys, a short set of cards points them at the schedule, alerts, the lists, and other media.

The decision

A new member should see one next step, not a dashboard full of links. The first card has nowhere to go but forward. Later cards can go back, skip, or close. The last card is the way out.

What I owned
  • The card list: an eyebrow, a headline, a figure, the copy, and one action.
  • The alerts card, which swaps that action for two store buttons.
  • The chrome: Back, Skip, and Close stay hidden on the first card. The last card replaces Next with Go to the dashboard.
Design system pieces

The live module uses the system this site ships from. The actions are the shared button. Type, accent, and the card surface come from the tokens. The preview uses a generic membership. Names, room links, and the original art stay off this page.

How someone else reuses it

A new membership passes a product name and a list of cards. A card is a headline, a sentence, and either one action or a pair of store buttons. The first-card lock and the last-card exit stay.

Shipped

OnboardingCards holds that list. Get started opens the first card. Choosing an action marks it on the card and does not leave the page. Skip, Close, and Go to the dashboard end the set. The same pattern of keeping a campaign attached to a path is the registration path.

Looking for this kind of work on your team?

I build production interfaces in React and Next.js, and the CRO on the pages people convert on. I can own the frontend. Let's talk.
© 2026 David N Allen. All rights reserved.
Share this page
Developed with React Developed with Next.js