Account Dashboard UI in Figma

Quick answer

A my account dashboard is the logged-in home for orders, profile, addresses, payments, subscriptions, and support—usually a sidebar nav on desktop and a stacked menu on mobile. The dashboard landing shows a welcome line, recent order status, quick links to order history, and cards for addresses and payment methods. Keep one information architecture across B2C storefronts: Dashboard → Orders → Addresses → Payments → Subscriptions → Preferences. Start from the Figma guides hub and link adjacent account modules with consistent navigation patterns.

Who this is for

Product designers structuring post-purchase and retention flows.
Design system teams building reusable account shells for multiple brands.
Engineers routing authenticated pages, deep links, and empty states per section.

Account IA map

Section	Primary job	Key component
Dashboard	Orient + recent activity	`AccountHome`
Orders	History + detail + tracking	`OrderList`
Addresses	Ship/bill address book	`AddressBook`
Payments	Saved cards and wallets	`PaymentWallet`
Subscriptions	Manage recurring orders	`SubscriptionManager`
Wishlist	Saved items	`WishlistGrid`
Profile	Name, email, password, marketing prefs	`ProfileSettings`
Support	Help links, chat, returns	`SupportHub`

Verdict: ship Dashboard + Orders + Profile first; add Payments and Subscriptions when checkout supports saved instruments and recurring purchase.

AccountShell layout

Part	Desktop	Mobile
Nav	Left sidebar 240–280px	Top title + hamburger or stacked list
Content	Main column max ~800px	Full width padded 16px
Breadcrumb	Optional inside content	Back link per section
Page title	H1 in content area	Same
Actions	Top-right (e.g. “Sign out”)	In profile menu

AccountShell
├── Variant: layout=sidebar | stacked
├── Variant: section=dashboard | orders | addresses | payments | subscriptions | profile
└── Layers:
    ├── GlobalHeader (store chrome)
    ├── AccountLayout
    │   ├── AccountNav
    │   │   └── NavItem (repeat)
    │   └── AccountContent
    │       └── SectionFrame (swap per route)
    └── GlobalFooter

Reuse sidebar / drawer nav tokens for mobile section picker.

AccountHome dashboard widgets

Widget	Content	Link target
Welcome header	”Hi, {firstName}“	—
Recent order card	Last order #, status, ETA	Order detail
Order status strip	Processing → Shipped → Delivered	Tracking UI
Quick actions	Track package, Start return, Reorder	Returns / PLP
Address snippet	Default ship address	Address book
Payment snippet	•••• 4242 Visa	Payment methods
Loyalty snapshot	Points balance	Loyalty program
Support CTA	Contact / FAQ	Support hub

AccountHome
├── Variant: state=firstVisit | returning | emptyOrders
└── Layers:
    ├── WelcomeBlock
    ├── RecentOrderCard
    ├── QuickActionRow
    ├── InfoCardsGrid
    │   ├── AddressCard
    │   ├── PaymentCard
    │   └── LoyaltyCard (optional)
    └── SupportBanner

Use card components with consistent padding and elevation.

AccountNav items

Nav item	Icon	Active state
Dashboard	Home	Bold + accent bar
Orders	Package	Badge for open issues optional
Addresses	Map pin	—
Payment methods	Card	—
Subscriptions	Refresh	Dot if payment failed
Wishlist	Heart	Count optional
Profile & security	User	—
Sign out	Log out	Destructive text style

Highlight active section with left border or background fill—match tabs active treatment sitewide.

Section comparison

Section	Empty state	Primary CTA
Orders	”No orders yet” + shop link	Browse catalog
Addresses	”Add address” form entry	Add address
Payments	”No saved cards”	Add card at checkout
Subscriptions	Hidden nav item if N/A	Subscribe on PDP
Wishlist	Empty wishlist pattern	Discover products
Profile	Pre-filled from signup	Save changes

Never show blank tables—every section needs an designed empty frame.

Profile and security settings

Field group	Controls	Notes
Personal info	Name, phone	Optional phone for SMS tracking
Email	Read-only or change flow	Verify new email
Password	Change password modal	Link to reset flow
Marketing prefs	Toggle switches	SMS, email, personalized ads
Language / currency	Dropdowns	If storefront supports
Delete account	Danger zone	Confirm modal

Use forms patterns with inline validation and success toasts.

Mobile account patterns

Pattern	When	Notes
Hub list → detail	Most B2C apps	iOS Settings style
Bottom tab “Account”	App-like storefronts	Icon in main nav
Slide-over section nav	Many sub-pages	Drawer from dashboard
Accordion sections	Few items only	Weaker for 8+ sections

At 375px, show dashboard cards first; bury infrequent settings under Profile.

Cross-module linking

From dashboard	To module	UX
Recent order	Order detail + tracking	One tap
Start return	Returns wizard	Pre-fill order #
Reorder	Cart with line items	Confirm OOS handling
Manage subscription	Subscription detail	Skip/pause/cancel
Redeem rewards	Checkout or wallet	Show expiring points
Update payment	Failed sub retry	Banner on dashboard

Failed payment on subscription should surface a dashboard-level alert—not only email.

Handoff checklist

Item	Dev Mode annotation
Auth gate	Redirect guest to login with return URL
Deep links	`/account/orders/{id}` routable
Nav active state	Match current route
Data freshness	Dashboard poll or SSR on load
PII display	Mask email partially in shared screens
Sign out	Clear session + cart merge rules
Analytics	`account_dashboard_view`, `account_nav_click`, `reorder_click`
a11y	Landmark `nav` + `main`; skip link to content
Localization	Name order, date formats

Pair with Dev Mode checklist and team libraries for shared account components.

Common mistakes

Mistake	Why it hurts	Fix
Duplicating store header nav inside account	Two nav systems	Single global header
No dashboard landing	Users land on empty orders	Home snapshot with recent activity
Hiding returns behind support only	Higher support load	Quick action on dashboard
Stale order status	Worse than no dashboard	Sync with carrier webhooks
Mixing B2B roles in one IA	Wrong links for buyers vs admins	Separate shells if needed
Subscription nav when feature off	Confusion	Feature-flag nav items
Password change without confirmation	Security risk	Re-auth modal
Mobile: 8 sections as tiny tabs	Unusable	Hub list pattern

Recommended workflow

Inventory account features live in production (orders, subs, loyalty, B2B).
Build AccountShell with sidebar and stacked mobile variants.
Design AccountHome with recent order, quick actions, and info cards.
Wire nav to existing section frames (orders, addresses, payments, profile).
Add empty states per section with shop CTAs.
Spec auth, deep links, and alerts for failed payments and open returns.
Prototype mobile hub → order detail → tracking flow.
Cross-link order history, subscriptions, and loyalty from dashboard cards.

FAQ

Separate dashboard for wholesale vs retail?

If roles differ materially, use two account shells with shared components but different nav items. Do not show PO fields to retail shoppers.

Show full order history on dashboard?

Show one recent order plus “View all orders.” Full tables belong on the Orders page.

Guest order lookup vs account?

Offer track by email + order # for guests, but logged-in users should never need it—merge guest orders on account creation when possible.

Include wishlist in account nav?

Yes if wishlist is a retention feature; otherwise keep it header-only to reduce nav clutter.

Next steps

Design order history and order tracking UI in Figma — orders section detail
Design saved addresses and address book UI in Figma — address management
Design payment methods UI in Figma — saved cards and wallets
Design subscription and recurring purchase UI in Figma — manage subscriptions
Design loyalty programs and rewards UI in Figma — points on dashboard

Designing account dashboard and my account UI in Figma: navigation, orders, and settings handoff