Portfolio Website
Project Overview
Role
Designer, researcher, and developer
Duration
2 months
Year
2025
Technologies
Proposal
Develop a custom website portfolio for personal use, used to showcase personal projects and skills. Create it using a detailed design process to turn a simple website into a comprehensive project.
Solution
A custom portfolio website built using React, Next.js, TailwindCSS, designed with Figma, and researched with UXtweak along with other methods. Acts as a standalone project in conjunction with the other projects it displays.
Process
The design and development process was broken down into discrete steps which produced multiple artifacts to inform and guide the final portfolio. The scope was defined, research methods were chosen, preliminary and final designs were made and tested, and the final product was developed and deployed.
Problem
Define the project scope and requirements
Research
Uncover appropriate potential solutions
Design
Design initial wireframes and prototype
Test
Test prototype with users and gather feedback
Develop
Create and deploy the final product
Problem
Define the project scope and requirements
Research
Uncover appropriate potential solutions
Design
Design initial wireframes and prototype
Test
Test prototype with users and gather feedback
Develop
Create and deploy the final product
Defining Project Goals
Defined a feasible scope for the project along with the necessary requirements and goals. This involves determining the depth of each stage of the design process and how each stage would be accomplished.
- •Define the project scope and specific requirements
- •Formulate initial design process and approach to achieve the defined goals
- •Define the appropriate technologies and tools for the project
Technologies and Tools
The technologies used to create the project.
Artifacts
- •Goal Assessment
- •Scope Definition
- •Technologies and Tools
Technologies and Tools
The technologies used to create the project.
Artifacts
- •Goal Assessment
- •Scope Definition
- •Technologies and Tools
Discovering Potential Solutions
The research process involved a multiple methods, including user competitive analysis, card sorts, and in-person interviews. The card sorts were conducted using UXTweak.
- •Competitive analysis to analyze other UI/UX designers approach to portfolio creation
- •Card sorts to determine appropriate junior portfolio website elements and their priorities
- •In-person interviews to discover how elements on portfolios are prioritized
- •Creation of sketches to determine initial possible layouts for different elements
Card Sorts
Research artifact to determine what elements should be on a junior UI/UX website portfolio using UXtweak.
Artifacts
- •Competitive Analysis
- •Card Sorts
- •In-person Interviews
- •Sketches
Card Sorts
Research artifact to determine what elements should be on a junior UI/UX website portfolio using UXtweak.
Artifacts
- •Competitive Analysis
- •Card Sorts
- •In-person Interviews
- •Sketches
Creating Initial Designs
The designs contained two major iterations for after the research and testing stages. Both designs were created in Figma, each including a design and a prototype.
- •Developed multiple iterations, including wireframes and final designs
- •Each iteration designed in Figma, with an interactive prototype to test with users
Wireframes
Consists of the basic layout of text and images, along with prototype interactions between and within pages.
Artifacts
- •Sketches
- •Wireframes
Wireframes
Consists of the basic layout of text and images, along with prototype interactions between and within pages.
Artifacts
- •Sketches
- •Wireframes
Testing the Prototype
Validated the current Figma prototype with user interviews which were based on specific usability goals.
- •Defined specific usability goals to act as heuristics for the user testing
- •Conducted unstructured interviews to gather specific feedback on the prototype
Unstructured Interview
Interview process consists of a task flow and a series of questions.
Artifacts
- •Usability Goals
- •Unstructured Interview
Unstructured Interview
Interview process consists of a task flow and a series of questions.
Artifacts
- •Usability Goals
- •Unstructured Interview
Developing the Final Website
Finalized the design in Figma with applied feedback from the testing stage as well as developed and published the website in React.
- •Created the final design and prototype in Figma with applied feedback
- •Developed the website in React, Next.js, and TailwindCSS
Final Design
Created a final design and prototype in Figma.
Artifacts
- •Final Design
- •Development
Final Design
Created a final design and prototype in Figma.
Artifacts
- •Final Design
- •Development
Let's discuss how I can bring your ideas to life.