SOMMSATION
Product & UI Design for a Consumer Web Platform
Designing scalable, brand-aligned UI within real product constraints.
Overview
For the Sommsation platform, I redesigned the Account Profile page to improve clarity, usability, and scalability of key user settings while aligning with brand aesthetics and business goals. Beyond the visual design in Figma, I took the design through to a working prototype/functional output using Figma MCP and Cursor powered by Claude Code.
Project Duration
2 weeks
Role
Professional Team Project:
UI Designer
Context & Problem
The existing Profile page had several usability pain points:
-
Users struggled to locate and update account settings efficiently.
-
Layout lacked hierarchy, making it hard to scan preferences and actions.
-
Inconsistent component behavior across breakpoints reduced clarity on mobile.
As the UI designer at Sommsation, my objectives were to:
-
Create a cleaner, modular layout that’s intuitive on desktop and mobile.
-
Increase task success (e.g. updating email, changing password) with clearer affordances.
-
Enable a design-to-function workflow that could be translated directly into a working version.
Design Goals
Goal:
-
Clarity in information hierarchy
Impact:
-
Users can scan personal info and settings quickly
​
Goal:
-
Modular components
Impact:
-
Easy to reuse across settings pages
​
Goal:
-
Responsive behavior
Impact:
-
Great mobile and desktop experience
​
Goal:
-
Design-to-functional workflow
Impact:
-
Reduce handoff friction between design and implementation
Figma Design — Key Solutions
What I designed:
-
A two-column structure where primary user info is on the left and action areas
(settings, preferences) on the right. -
Introduced card-based grouping for different setting clusters
(e.g., Account Info, Security, Notifications). -
Updated UI language and spacing to improve scan-ability.
-
Designed responsive variants for tablet and mobile.
Technical Workflow — Figma MCP + Cursor (Claude Code)
Rather than producing a static design alone, I used a workflow incorporating:
1. Figma MCP (Modular Component Patterns)
-
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 & Impact
Before → After
-
​Clearer structure and visual hierarchy
-
Reusable, token-based components
-
Faster designer-to-developer handoff with minimal misalignment
-
Functional build that supports real user settings updates
Key Wins
-
Reduced design iteration time thanks to component consistency
-
Code generation accelerated prototype → production delivery
-
Scalable pattern library for future Sommsation pages
Design Takeaways
-
Designing with modularity first accelerates execution downstream.
-
Using AI-assisted generation tools like Cursor & Claude can elevate velocity without sacrificing quality.
-
Close alignment of design and code taxonomy avoids mismatches in handoff.