Oko
Building a UX portfolio website using HTML, CSS, and JavaScript.
Project Duration
2 Months
Role
UX Designer, UI Designer, Front End Developer
Category
HTML, CSS, JavaScript
Objective
I designed and coded a responsive UX portfolio website that highlights my end to end product design process while demonstrating fluency in HTML, CSS, and JavaScript. The project showcases my ability to move seamlessly from research and concept through full front end implementation.
Challenge
Tools
Adobe XD
Adobe Photoshop
Atom
GitHub
Zoom
W3C Validator
Process
Research & IA
Audited leading portfolio sites and defined content hierarchy and narrative flow.
Wireframes & Visual System
Produced mid-fidelity wireframes in Adobe XD, then established color palette, type scale, and reusable UI components.
Front-End Build
Wrote semantic HTML, modular CSS, and JavaScript, including a custom hamburger navigation and SVG animations.
Quality & Accessibility
Performed cross browser/device testing with BrowserStack, validated color contrast for WCAG 2.1 AA, and linted code with W3C tools.
User Validation
Conducted remote usability sessions with five participants, iterating on feedback to refine navigation and micro-interactions
User Interview Scripting
Three interview sessions, each lasting 15 to 20 minutes, were conducted via Zoom with a panel of three interviewers. The objective was to gain deeper insights into user approaches to learning a new subject and enhancing their vocabulary skills.
Solution
Adaptive Navigation
Sticky header and touch friendly menu optimized for mobile and tablet.
Subtle Motion
Lightweight CSS/JS animations for a polished feel without sacrificing performance.
Accessible Design
WCAG compliant color contrast and scalable typography.
Lean Codebase
Optimized images and efficient CSS/JS for fast load times.
Design Doc
Wireframes
Accessibility Check
I checked color accessibility for the text, buttons, background, and header for contrast ratio. All tests were passed for AA via accessible-colors.com
User Testing
Usability Report
Severity ratings were measured using Jakob Nielsen’s scale. Based on the feedback given via Zoom from 5 participants, 4 main iterations were made.
Incorporate clickable link for each project image.
Add social media icons on the top of navigation bar.
Place my email in the footer for viewers to easily reach me.
Change portfolio logo to something more unique.
Outcomes
Scalable Showcase
A flexible platform for showcasing case studies and ongoing experiments in motion and interaction design.
Design to Code Execution
Demonstrated ability to translate design intent into production quality code and anticipate technical constraints.
Collaborating with Devs
Strengthened communication with developers by working directly with the same tools and standards.
Final Project
Completed Site
Once iterations were completed, the HTML, CSS, JavaScript, and project images were pushed using GitHub.
Thank you for taking the time to view this case study. Please feel free to browse this project below.
