Context: UI/UX was designed in Figma before writing frontend code. This page documents why that sequencing was chosen, what the frontend setup included, and the measurable/observable outcomes.

Why start with UI design first (Figma)

Design-first is a risk-reduction and alignment strategy. For the URL Shortener app, starting in Figma helped lock down the user journey and surface edge cases early.

Design Goals

• Simplicity
• Fast user flow
• Mobile responsiveness
• Modern appearance

Design Process

1. Wireframes created in Figma
2. UI components designed
3. Layout reviewed
4. Components implemented in React

Outcomes

• Clean user experience
• Easy navigation
• Fast URL shortening workflow
• Consistent design system

Notes / links

• Figma file: (paste link here)