E-commerce

E-commerce

My interactive prototype in Figma of a women’s beauty website, where users can explore products and complete a full purchase flow. The video showcases not only the interface, but also the attention to microinteractions and motion, demonstrating how UI design can translate into a clear, engaging, and production-ready user experience.

🔷 Figma: UI design, interactive prototyping, and microinteractions.

🔷 Motion design in Figma: animations and transitions to simulate real navigation experience.

🔷 Figma plugins (iconography, grids, and visual support).

🔷 Documentation tools: to ensure consistency across components and flows.

UI Process ->

Flow definition and information architecture

➡️ Navigation hierarchy, content organization, and key steps (e.g., catalog → product → checkout).

Wireframes and initial prototyping

➡️ Low-fidelity sketches to validate structure before moving into visual detail.

Visual design and component system

➡️ Building consistent UI with reusable components, tokens, and style guidelines.

Accessibility and usability

➡️ Applying WCAG principles (readability, contrast, typography sizes, touch targets).

Interactive prototyping

➡️ Integrating transitions, microinteractions, and motion design to simulate the real experience.

Documentation and handoff

➡️ Preparing clear guidelines and specifications for development, ensuring scalability and maintainability.