Project Overview

• Project Name: Personal Portfolio Website Redesign
• Role: UX Designer and Researcher, Developer
• Timeline: November 2024 – Present
• Website: https://alexchea.uno/
• GitHub Repository: icodealittle
• Tool Used: HTML, CSS, JavaScript, GSAP, Webpack, Hostinger

The Challenge

My portfolio website serves as a platform to showcase my technical projects, research studies, and professional background. However, I identified key areas for improvement:

• Navigation was functional but lacked clear feedback and responsiveness.
• The visual design felt cluttered, with inconsistent typography and low contrast.
• Content clarity was limited, with generic CTAs and sparse project details.
• Accessibility was not optimized, impacting usability for diverse users.

Objectives

• Simplify navigation to make the site intuitive and user-friendly.
• Create a visually cohesive design that highlights key content.
• Improve accessibility to ensure an inclusive experience.
• Enhance the communication of project details and personal information.

Research Process

Heuristic Evaluation

I conducted a heuristic evaluation to identify usability and design issues:

• Lack of active page indicators in navigation.
• Poor contrast between text and backgrounds.
• Limited accessibility features such as alt text and keyboard navigation.

GitHub Integration

I decided to link directly to my GitHub repository to ensure transparency and showcase continuous updates to my portfolio. This allows users to:

• View my commit history for real-time insights into updates and enhancements.
• Explore the technical underpinnings of my site and projects.
• Gain a deeper understanding of my development process and coding practices.

Design Solution

Direct GitHub Access

• A GitHub Link was prominently added to the "Contact" section and footer.
• Users are encouraged to check my GitHub profile to track the repository's commit history and technical updates.

Design Implement Examples

Before + After: Homepage

Before:

The homepage had generic CTAs and lacked visual cues for navigation.

After:

• Clearer CTA buttons with action-oriented language.
• Improved layout with better visual hierarchy.
• Enhanced navigation with active page highlights and smoother transitions.

Before + After: Portfolio

Before:

The portfolio section lacked descriptions for projects, making it less engaging.

After:

• Added concise project summaries for quick understanding.
• Refined typography for better readability and visual consistency.
• Optimized contrast and spacing to reduce clutter.

Before + After: About Me

Before:

The “About Me” section was text-heavy and visually crowded.

After:

• Improved text layout with more whitespace and clear subheadings.
• Added engaging storytelling to personalize the content.
• Updated typography for a more professional look.

Before + After: Contacts

Before:

The contact section was functional but lacked visual appeal.

After:

• Redesigned icons for modern aesthetics.
• Enhanced layout with better spacing and alignment.
• Added hover effects for improved interactivity.

Outcome and Impact

Before Redesign

• Users found it difficult to navigate between sections.
• Project details were not engaging or easy to grasp.
• Accessibility limitations excluded certain user groups.

After Redesign

• Navigation was simplified and intuitive, with clear visual cues.
• Visual consistency and increased contrast-enhanced the overall aesthetic.
• Project descriptions were engaging, improving user understanding and interest.
• Accessibility features made the site inclusive for diverse audiences.

Increased Transparency: Linking the GitHub repository gave users a clear view of ongoing updates and technical progress.

Engagement: Users who visited my GitHub reported a better understanding of my coding practices and problem-solving approach.

Streamlined Maintenance: Updating the repository allows for seamless tracking of enhancements without the need for a dedicated "Updates" section.