AI-Assisted Product Design: Building a Production-Ready Website
AI-Assisted Product Design UX/UI Product Design

About

Maranon Education and Visa Services (MEVS) needed a modern, professional website to strengthen its digital presence and better communicate its educational and immigration consulting services. The project focused on creating a responsive, high-performance experience while leveraging an AI-assisted product design workflow to accelerate exploration, design, and implementation.

My Role

I led the project end-to-end, from discovery and UX definition to interface design, client validation, implementation, and deployment. Throughout the project, I combined traditional product design practices with AI-assisted workflows using Figma, V0, ChatGPT, Next.js, React, and VS Code to accelerate ideation, prototyping, and development while maintaining design quality and consistency.

Challenge

Design and deliver a modern, responsive website that provides an excellent experience across desktop, tablet, and mobile devices. The solution should be built on a modern technology stack to ensure performance, scalability, and a solid foundation for future evolution.

Workflow

  • Client workshop & project scoping;
  • Problem definition;
  • Benchmarking;
  • Information architecture & wireframes;
  • UX/UI Design;
  • Client validation & iterations;
  • AI-assisted exploration (ChatGPT + V0);
  • Interface generation with V0;
  • Next.js implementation & refinements;
  • QA & validation;
  • Deployment.

Final Refinements

During the final review, several improvements were implemented to enhance the overall experience, including navigation refinements, social media integration (WhatsApp), favicon customization, layout adjustments, and visual consistency across the website.

Outcomes

  • High Implementation Efficiency: Reduced the development cycle from weeks to only 8 hours of execution, achieving over 80% improvement in speed for delivering production-ready front-end;
  • End-to-End Acceleration: Optimized the design and technical implementation process through strategically AI-assisted workflows;
  • Delivery Quality: Delivered a fully functional, modern, accessible, and responsive final interface;
  • Scalability: Built a structured foundation and clean components to support future evolutions of the website ecosystem.

Web Site

Formulários

Landing Page

Technologies


Next.js, React, Tailwind CSS.

Tools


  • Figma
  • v0
  • ChatGPT
  • VS Code

Links


Link to Figma Prototype

Link to Live Project