NoelUba.com
Developer Portfolio Website
(Under Development)
Role:Product Designer
Project Goal
The aim of this portfolio website is to provide a medium where employers can easily understand Noel's strengths as a software engineer and make informed decisions about his suitability for their organization.
Key Design Features
To reflect his personality, the client requested a simple, mature, and intuitive website interface that is user-friendly.
The website features a collection of Noel's most impressive projects, providing a comprehensive overview of his background and expertise in software engineering. The website is designed to be user-friendly, with easy navigation and a visually engaging layout that emphasizes the quality of Noel's work.
The portfolio design has the following sections to help the software engineer achieve his goal.
Navigation Menu: This section includes the engineer's logo, name, and navigation links to different pages. The navigation menu remains fixed at the top of the page in desktop view, making it easy for viewers to navigate. In mobile view, a hamburger menu is provided in an easily accessible position for ease of navigation throughout the portfolio website.
Mobile and Desktop Navigation Menu
Homepage/Landing Page: This is the first page a recruiter or viewer of the portfolio will see; it contains a hero section that introduces the software engineer and his different expertise clearly. It has two call-to-action buttons that a recruiter can use to easily navigate the portfolio. They can view the engineer's resume or quickly go to see his projects. It also contains his social media links, and GitHub profile so they can get more familiar with his skills.
About page: The purpose of this page is to showcase the client’s skills in his various stacks, the tools he uses, and familiar languages. The page also gets personal as the software engineer shares his hobbies, pastimes, and flair for technical writing. This directs viewers to the call to action to view his blog.
My Design Process
I followed a structured UX design process to ensure the final output was simple, functional, and aligned with the client’s goals. Here’s a breakdown:
Discovery Call
Understood the client’s vision for a portfolio website and gathered key requirements to guide research.Research & Moodboarding
Analyzed over 25 portfolio sites to identify best practices and common UX pitfalls like complex navigation and cluttered layouts.Paper Sketching
Created quick layout sketches informed by research and client needs to visualize structure and flow.Mid-Fidelity Wireframes
Translated sketches into wireframes using Figma, focusing on layout and information architecture before applying colors or visuals.Client Check-in #1
Shared wireframes early for feedback. This ensured the design aligned with the client’s personality and brand identity.Style Guide & Components
Designed a minimal yet vibrant UI using a blue gradient to reflect the client’s sophistication and love for challenges.High-Fidelity Design
Applied visual design, spacing, and responsiveness across desktop and mobile, maintaining clarity and consistency.Client Check-in #2
Presented the interactive prototype. Iterated based on feedback to fine-tune usability and interface details.Design Handoff
Delivered all design assets (typography, color, grid, icons) and detailed documentation for a smooth development handoff.
