Student Profile
Project Links
GitHub:
Website:
Project Overview
Objective:
Develop a responsive, accessible profile page with an embedded form that allows students and faculty to recommend each other after campus projects, volunteer work, and event participation. It required a simple, adaptive layout to make it easy for users of all abilities to contribute.
My Role:
Managed the full lifecycle of the project, including front-end development, UX/UI design, content integration, and performance optimization.
Technology:
HTML, CSS, JavaScript, Bootstrap, Visual Studio Code, Figma, and GitHub
Concept to Completion
Design Process
Started with hand-drawn wireframes, then moved to low-fi and hi-fi prototypes. I then completed full development and validation of the page.
Challenges
Aligning responsive design across breakpoints, debugging the form, and optimizing for accessibility without sacrificing visual integrity.
Outcome
The project delivered a responsive, accessible, and cohesive website that effectively showcases user-centered design and front-end development skills.
Reflection
This project sharpened my problem-solving skills and reinforced user-centered design. Planning supported accessibility adjustments throughout development.
Sketch to Screen
This section shares the design journey, from initial paper wireframes, to polished hi-fi mockups and interactive prototypes, capturing the full evolution of the project.
Paper Wireframes
Low-Fidelity Prototype
Mock-Ups
Click to expand images
Hi-Fidelity Prototype
