← Back to Home
logo

UX/UI Design Portfolio

Redesigning a UX/UI design portfolio using Figma Make, Claude, ChatGPT, & HTML.

01

S — Situation

My portfolio website was being migrated to a new hosting environment, creating an opportunity to refresh a design that had remained largely unchanged for several years. In addition to modernizing the visual experience, I wanted to expand the portfolio with new case studies, improve how projects were presented, and better organize content to support my evolving focus on UX and product design work.

02

T — Task

As the UX Designer and developer for the project, I was responsible for redesigning and rebuilding my portfolio website while maintaining full control over the final implementation. My goals were to modernize the visual design, improve the presentation of case studies through a consistent STAR framework, expand the breadth of portfolio content, and create a flexible structure that would support future updates while protecting sensitive client work.

Original portfolio design
Original portfolio design
03

A — Action

  • Leveraged Figma Make to rapidly generate initial design concepts based on the content and structure of my existing portfolio.
  • Crafted and refined prompts to explore different layouts and approaches while maintaining alignment with my personal brand and professional goals.
Original Figma Make prompt
Original Figma Make prompt

  • Reviewed and adjusted generated designs to correct content structure, improve usability, and ensure the exported code would support my intended implementation.
  • Downloaded and integrated the generated code into a local development environment using MAMP.
  • Customized the visual design, content, and imagery to better showcase my work and professional experience.
  • Added new case studies and reorganized existing projects into a consistent STAR (Situation, Task, Action, Result) format to improve readability and storytelling.
  • Updated the site's HTML structure and navigation to support a cleaner information architecture and future scalability.
  • Implemented password protection for sensitive client projects to balance portfolio visibility with confidentiality requirements.
  • Conducted iterative testing and refinements to ensure a cohesive user experience across the site.
Final Figma Make design before export
Final Figma Make design before export
Final Figma Make design before export
Final Figma Make design before export
Final Figma Make design before export
Final Figma Make design before export
Final Figma Make design before export
Final Figma Make design before export
Final Figma Make design before export
Final Figma Make design before export
04

R — Result

  • Successfully launched a refreshed portfolio website with a more modern visual design and improved content organization.
  • Expanded the portfolio to showcase a broader range of UX and product design work, providing stronger support for job applications and client conversations.
  • Improved case study readability and consistency by standardizing project narratives using the STAR framework.
  • Reduced future maintenance effort through a more scalable site structure and cleaner code organization.
  • Demonstrated the practical use of AI-assisted design workflows by combining Figma Make's rapid prototyping capabilities with traditional UX design, front-end development, and content strategy expertise.
  • Created a portfolio experience that more effectively communicates both design thinking and technical implementation skills, resulting in increased confidence when presenting work to recruiters, hiring managers, and prospective clients.
Final mobile and desktop screens
Final Figma Make design before export