Account Dashboard Redesign
Bringing account information, preferences, and shopping activity into one organized view.
I redesigned Sommsation’s account experience around a modular dashboard, giving customers an overview of their information and access to key account actions. Over two weeks, I developed responsive designs in Figma and explored an AI-assisted workflow to translate them into a working UI prototype.
SOMMSATION · RESPONSIVE UI
Project Overview
-
Role: UI Designer
-
Duration: 2 weeks
-
Scope: Account dashboard and responsive UI
-
Tools: Figma, Cursor, Claude Code
An account overview with clear next steps
The existing profile page centered on editable personal information. The redesign brought account details together with orders, saved wines, payment methods, and preferences.
I organized these areas into cards with descriptive headings, relevant summaries, and clear entry points. A consistent hierarchy connected the different account tasks across desktop and mobile.
Original profile page
Redesigned account dashboard
A modular layout across screen sizes
Cards gave each account area a consistent structure while accommodating different content, from contact details to recent orders and saved wines.
On desktop, the dashboard used a multi-column layout alongside account navigation. On mobile, the cards stacked into a single column, with navigation consolidated above the content.
Related information grouped into cards
Shared structure adapted to mobile
From design to a working prototype
Rather than producing a static design alone, I used a workflow incorporating:
1. Figma MCP
-
Built production-ready components with consistent naming, auto layout, variants, and tokens.
-
Ensured all states (hover, active, error) were documented.
-
Organized a component system that mapped directly to code structure
(e.g., <ProfileCard />, <EditableField />, <ActionButton />).
This step ensured design consistency and reduced ambiguity in conversion.
​
2. Cursor with Claude Code for Functional Output
With the Figma MCP structure in place:
-
I exported design tokens, layout specs, and component definitions.
-
Used Cursor powered by Claude Code to generate:
-
React component scaffolding
-
Styling bound to design tokens
-
Interaction logic wiring (e.g., form validation, toggles)
-
This allowed building a working UI where the design was directly translated into code rather than manually reinterpreted.
Outcome
The project produced a responsive account dashboard design and a working UI prototype. The dashboard brought account information and shopping activity into a consistent card-based layout.
Reflection
This project connected UI design with implementation through an AI-assisted workflow. It reinforced the value of defining clear component structures and reviewing the generated interface against the intended design.