Portfolio Redesign Case Study
Portfolio Redesign Case Study
Portfolio Redesign Case Study
Redesigning my portfolio to reflect my skills, process, and personality.
Redesigning my portfolio to reflect my skills, process, and personality.
Redesigning my portfolio to reflect my skills, process, and personality.
Role
Role
UI/UX Designer & Framer Developer
UI/UX Designer & Framer Developer
Tools
Tools
Framer, Figma, Formspree
Framer, Figma, Formspree
Duration
Duration
May-Jun 2026
May-Jun 2026
01. Overview
❝ I rebuilt my portfolio from scratch to turn it into a product that represents who I am and what I can do.❞
❝ I rebuilt my portfolio from scratch to turn it into a product that represents who I am and what I can do.❞
My previous portfolio relied on a template, lacked personality, and didn't showcase my experience in UI/UX design and Framer development.
I rebuilt the entire experience from the ground up in Framer, focusing on storytelling, interaction, and a design system that reflects my approach.
The result is a portfolio that communicates my skills clearly and delivers a more intentional experience for every visitor.
02. PROBLEM
❝ It looked like every other portfolio.❞
❝ It looked like every other portfolio.❞
❝ It looked like every other portfolio.❞
The old site felt generic, followed a template structure, and failed to showcase my Framer skills. The visual hierarchy was weak and the content didn't reflect my actual level of experience.
The old site felt generic, followed a template structure, and failed to showcase my Framer skills. The visual hierarchy was weak and the content didn't reflect my actual level of experience.
03. GOALS
01
Strong Personal Brand
Strong Personal Brand
Strong Personal Brand
Create a distinct visual identity that stands out and feels like me.
Create a distinct visual identity that stands out and feels like me.
02
Showcase Skills
Showcase Skills
Showcase Skills
Demonstrate both UI/UX design thinking and Framer development capabilities.
Demonstrate both UI/UX design thinking and Framer development capabilities.
03
Better User Experience
Better User Experience
Better User Experience
Improve hierarchy, flow, and interactions to guide visitors through my work.
Improve hierarchy, flow, and interactions to guide visitors through my work.
04
Scalable Foundation
Scalable Foundation
Scalable Foundation
Build a flexible system for future case studies, templates, and new content.
Build a flexible system for future case studies, templates, and new content.
04. WHAT THE DATA SAID BEFORE
33
33
Unique Visitors
Unique Visitors
88
88
Pageviews
Pageviews
46.8%
46.8%
Bounce Rate
Bounce Rate
1m 24s
1m 24s
Avg Session
Avg Session
INTERPRETATION :
INTERPRETATION :
High bounce rate and low session duration showed that visitors weren't staying long enough to explore. This data made it clear — the experience wasn't engaging, and the content hierarchy wasn't working.
High bounce rate and low session duration showed that visitors weren't staying long enough to explore. This data made it clear — the experience wasn't engaging, and the content hierarchy wasn't working.
05. DESIGN DECISIONS
01
01
Built a Consistent Design System
Built a Consistent Design System
Built a Consistent Design System
A dark theme with violet and teal accents, consistent spacing, typography scale, and component library to create a cohesive and premium experience.
A dark theme with violet and teal accents, consistent spacing, typography scale, and component library to create a cohesive and premium experience.
02
02
Reimagined the Projects Section
Reimagined the Projects Section
Reimagined the Projects Section
Vertical accordion layout with spring animations to make exploration interactive and information easier to digest. Respects users with their attention and prioritize their choice.
Vertical accordion layout with spring animations to make exploration interactive and information easier to digest. Respects users with their attention and prioritize their choice.
03
03
Contact as Part of the Experience
Contact as Part of the Experience
Contact as Part of the Experience
Glassmorphism for the contact section with a live Formspree form and a bold footer statement that leaves a strong final impression and helps users connect and dig deeper.
Glassmorphism for the contact section with a live Formspree form and a bold footer statement that leaves a strong final impression and helps users connect and dig deeper.
04
04
Typography & Motion as UX
Typography & Motion as UX
Typography & Motion as UX
DM Sans Serif Display for impact, DM Sans for clarity, DM Mono for details. Motion used intentionally to support feedback, hierarchy, and navigation.
DM Sans Serif Display for impact, DM Sans for clarity, DM Mono for details. Motion used intentionally to support feedback, hierarchy, and navigation.
06. BEFORE AND AFTER
01. Hero Section Redesign
01. Hero Section Redesign
01. Hero Section Redesign
BEFORE
AFTER
The original hero section introduced my role but failed to communicate my personality, design maturity, or unique value as a designer. While functional, it relied on a generic layout and visual elements that felt disconnected from the rest of the experience. The redesign focuses on stronger personal branding, clearer hierarchy, and a more intentional first impression.
Key Improvements
Replaced a template-like layout with a focused, personality-driven introduction.
Established a clearer visual hierarchy through typography, spacing, and content structure.
Introduced a cohesive design system using consistent colors, components, and styling.
Added credibility signals such as experience and supporting context above the fold.
Reduced visual clutter and improved content focus to guide visitors toward key actions.
Outcome
The redesigned hero transforms the homepage from a generic portfolio landing page into a clear personal brand statement, helping visitors quickly understand who I am, what I do, and why my work is worth exploring.
The original hero section introduced my role but failed to communicate my personality, design maturity, or unique value as a designer. While functional, it relied on a generic layout and visual elements that felt disconnected from the rest of the experience. The redesign focuses on stronger personal branding, clearer hierarchy, and a more intentional first impression.
Key Improvements
Replaced a template-like layout with a focused, personality-driven introduction.
Established a clearer visual hierarchy through typography, spacing, and content structure.
Introduced a cohesive design system using consistent colors, components, and styling.
Added credibility signals such as experience and supporting context above the fold.
Reduced visual clutter and improved content focus to guide visitors toward key actions.
Outcome
The redesigned hero transforms the homepage from a generic portfolio landing page into a clear personal brand statement, helping visitors quickly understand who I am, what I do, and why my work is worth exploring.
02. Design Process Redesign
02. Design Process Redesign
02. Design Process Redesign
BEFORE
AFTER
The original section presented my design approach through a carousel, forcing users to navigate between individual slides to understand the complete process. While functional, it introduced unnecessary interaction costs and made it difficult to grasp the workflow at a glance. The redesign transforms this experience into a clear, structured overview that communicates the entire process instantly.
Key Improvements
Replaced the carousel with a visible step-by-step framework, eliminating unnecessary clicks and navigation.
Improved information discoverability by displaying the complete design process in a single view.
Introduced stronger visual hierarchy through structured cards, icons, and numbered stages.
Created a clearer narrative flow from research and strategy to design and refinement.
Added subtle depth and visual distinction to make each stage feel like part of a connected system.
Outcome
The redesigned section shifts from interaction-heavy presentation to clarity-first communication. Visitors can now understand my complete design process within seconds, making the experience more intuitive while better showcasing how I approach problem-solving and product design.
The original section presented my design approach through a carousel, forcing users to navigate between individual slides to understand the complete process. While functional, it introduced unnecessary interaction costs and made it difficult to grasp the workflow at a glance. The redesign transforms this experience into a clear, structured overview that communicates the entire process instantly.
Key Improvements
Replaced the carousel with a visible step-by-step framework, eliminating unnecessary clicks and navigation.
Improved information discoverability by displaying the complete design process in a single view.
Introduced stronger visual hierarchy through structured cards, icons, and numbered stages.
Created a clearer narrative flow from research and strategy to design and refinement.
Added subtle depth and visual distinction to make each stage feel like part of a connected system.
Outcome
The redesigned section shifts from interaction-heavy presentation to clarity-first communication. Visitors can now understand my complete design process within seconds, making the experience more intuitive while better showcasing how I approach problem-solving and product design.
03. Work Section Redesign
03. Work Section Redesign
03. Work Section Redesign
BEFORE
AFTER
The original work section relied on traditional project cards that required users to scan large amounts of information before deciding what to explore. While informative, the layout felt visually heavy and made it difficult to quickly browse multiple projects. The redesign introduces a cleaner, accordion-based structure that prioritizes scannability while allowing deeper exploration on demand.
Key Improvements
Replaced content-heavy project cards with a compact accordion layout for faster browsing.
Improved information hierarchy by separating project titles, categories, and details into clear layers.
Reduced visual clutter and cognitive load through progressive disclosure.
Increased project density, allowing more work to be showcased within the same screen space.
Introduced a more structured and premium visual language aligned with the overall design system.
Outcome
The redesigned section shifts from displaying projects as individual cards to presenting them as a curated collection of work. Visitors can quickly scan available projects, identify relevant areas of interest, and choose what to explore further, creating a more efficient and intentional browsing experience.
The original work section relied on traditional project cards that required users to scan large amounts of information before deciding what to explore. While informative, the layout felt visually heavy and made it difficult to quickly browse multiple projects. The redesign introduces a cleaner, accordion-based structure that prioritizes scannability while allowing deeper exploration on demand.
Key Improvements
Replaced content-heavy project cards with a compact accordion layout for faster browsing.
Improved information hierarchy by separating project titles, categories, and details into clear layers.
Reduced visual clutter and cognitive load through progressive disclosure.
Increased project density, allowing more work to be showcased within the same screen space.
Introduced a more structured and premium visual language aligned with the overall design system.
Outcome
The redesigned section shifts from displaying projects as individual cards to presenting them as a curated collection of work. Visitors can quickly scan available projects, identify relevant areas of interest, and choose what to explore further, creating a more efficient and intentional browsing experience.
04. About Section Redesign
04. About Section Redesign
04. About Section Redesign
BEFORE
AFTER
The original About Me section focused heavily on long-form text, requiring visitors to read multiple paragraphs before understanding who I am and what I bring to the table. While informative, the content felt dense and lacked visual elements that could make the section more engaging. The redesign balances storytelling with visual identity, making the content easier to consume while creating a stronger personal connection.
Key Improvements
Reduced text-heavy content into shorter, more focused sections for improved readability.
Introduced a stronger visual presence through a personalized character illustration and profile card.
Improved content hierarchy using typography, spacing, and highlighted keywords.
Added social links and location information to increase credibility and accessibility.
Created a more balanced layout by combining personal storytelling with visual branding.
Outcome
The redesigned About Me section communicates the same information in a more approachable and engaging format. By reducing cognitive load and introducing stronger visual storytelling, the section helps visitors quickly understand who I am, what I do, and what makes my approach to design unique.
The original About Me section focused heavily on long-form text, requiring visitors to read multiple paragraphs before understanding who I am and what I bring to the table. While informative, the content felt dense and lacked visual elements that could make the section more engaging. The redesign balances storytelling with visual identity, making the content easier to consume while creating a stronger personal connection.
Key Improvements
Reduced text-heavy content into shorter, more focused sections for improved readability.
Introduced a stronger visual presence through a personalized character illustration and profile card.
Improved content hierarchy using typography, spacing, and highlighted keywords.
Added social links and location information to increase credibility and accessibility.
Created a more balanced layout by combining personal storytelling with visual branding.
Outcome
The redesigned About Me section communicates the same information in a more approachable and engaging format. By reducing cognitive load and introducing stronger visual storytelling, the section helps visitors quickly understand who I am, what I do, and what makes my approach to design unique.
05. Design Gallery Redesign
05. Design Gallery Redesign
05. Design Gallery Redesign
BEFORE
AFTER
The original gallery showcased a single design at a time through a traditional carousel, limiting how much work visitors could see without interacting with the section. While it highlighted individual projects, it failed to communicate the breadth of my design experience and required unnecessary navigation to explore additional work. The redesign transforms the gallery into a dynamic showcase that emphasizes both visual variety and interaction.
Key Improvements
Replaced the single-project carousel with a continuously moving gallery that showcases multiple projects simultaneously.
Introduced dual-direction scrolling tickers to create a more engaging and visually dynamic browsing experience.
Increased project visibility by displaying a broader range of work within the same screen space.
Added magnetic tilt interactions that respond to cursor movement, creating a more immersive and interactive experience.
Improved visual storytelling by presenting designs as a curated collection rather than isolated portfolio pieces.
Outcome
The redesigned gallery shifts from passive viewing to active exploration. Visitors can immediately see the diversity of projects, visual styles, and problem spaces I have worked on, while subtle interactions add depth and personality without compromising usability. The result is a more engaging section that better reflects both my design capabilities and front-end implementation skills.
The original gallery showcased a single design at a time through a traditional carousel, limiting how much work visitors could see without interacting with the section. While it highlighted individual projects, it failed to communicate the breadth of my design experience and required unnecessary navigation to explore additional work. The redesign transforms the gallery into a dynamic showcase that emphasizes both visual variety and interaction.
Key Improvements
Replaced the single-project carousel with a continuously moving gallery that showcases multiple projects simultaneously.
Introduced dual-direction scrolling tickers to create a more engaging and visually dynamic browsing experience.
Increased project visibility by displaying a broader range of work within the same screen space.
Added magnetic tilt interactions that respond to cursor movement, creating a more immersive and interactive experience.
Improved visual storytelling by presenting designs as a curated collection rather than isolated portfolio pieces.
Outcome
The redesigned gallery shifts from passive viewing to active exploration. Visitors can immediately see the diversity of projects, visual styles, and problem spaces I have worked on, while subtle interactions add depth and personality without compromising usability. The result is a more engaging section that better reflects both my design capabilities and front-end implementation skills.
06. Contact Section Redesign
06. Contact Section Redesign
06. Contact Section Redesign
BEFORE
AFTER
The original contact section provided multiple ways to reach out, but it required users to leave the website and switch between platforms to start a conversation. While functional, the experience felt disconnected from the rest of the portfolio and added unnecessary friction to the final conversion point. The redesign transforms the section into a dedicated contact experience with a built-in form, making it easier for visitors to reach out without leaving the site.
Key Improvements
Replaced multiple contact cards with a centralized contact form that supports direct communication.
Reduced friction by allowing visitors to submit inquiries without navigating away from the portfolio.
Created a stronger call-to-action focused on collaboration and project inquiries.
Improved visual hierarchy through a structured two-column layout and clear form progression.
Integrated contact information into the experience while maintaining focus on the primary conversion action.
Outcome
The redesigned contact section shifts from a collection of external contact options to a dedicated conversion-focused experience. By simplifying the communication process and reducing user effort, the section creates a more professional final touchpoint while increasing the likelihood of meaningful inquiries and collaborations.
The original contact section provided multiple ways to reach out, but it required users to leave the website and switch between platforms to start a conversation. While functional, the experience felt disconnected from the rest of the portfolio and added unnecessary friction to the final conversion point. The redesign transforms the section into a dedicated contact experience with a built-in form, making it easier for visitors to reach out without leaving the site.
Key Improvements
Replaced multiple contact cards with a centralized contact form that supports direct communication.
Reduced friction by allowing visitors to submit inquiries without navigating away from the portfolio.
Created a stronger call-to-action focused on collaboration and project inquiries.
Improved visual hierarchy through a structured two-column layout and clear form progression.
Integrated contact information into the experience while maintaining focus on the primary conversion action.
Outcome
The redesigned contact section shifts from a collection of external contact options to a dedicated conversion-focused experience. By simplifying the communication process and reducing user effort, the section creates a more professional final touchpoint while increasing the likelihood of meaningful inquiries and collaborations.
07. WHAT THE DATA SAID AFTER
17
17
Unique Visitors
Unique Visitors
167
167
Pageviews
Pageviews
13.3%
13.3%
Bounce Rate
Bounce Rate
16m 35s
16m 35s
Avg Session
Avg Session
INTERPRETATION :
INTERPRETATION :
Lower bounce rate and significantly higher session duration show that visitors are exploring the content deeply.
These numbers will continue to grow with more visibility and promotion.
Lower bounce rate and significantly higher session duration show that visitors are exploring the content deeply.
These numbers will continue to grow with more visibility and promotion.
08. WHAT I LEARNED
01
01
A portfolio is a product. It deserves the same design process as any client project.
A portfolio is a product. It deserves the same design process as any client project.
02
02
Visual polish matters, but clear hierarchy and storytelling have a bigger impact on engagement.
Visual polish matters, but clear hierarchy and storytelling have a bigger impact on engagement.
03
03
Building in Framer from scratch taught me far more than customizing existing templates ever could.
Building in Framer from scratch taught me far more than customizing existing templates ever could.
09. NEXT STEPS
Add Case Studies
Add Case Studies
Document process, decisions, and outcomes.
Document process, decisions, and outcomes from various projects.
Light Mode Variant
Light Mode Variant
Explore a light theme while maintaining the same identity.
Explore a light theme while maintaining the same identity.
Sell Templates
Sell Templates
Package sections into Framer templates and launch on Gumroad and Framer marketplace.
Package sections into Framer templates and launch on Gumroad and Framer marketplace.