Porfolio Playground
A portfolio playground website designed with CSS, HTML, & JavaScript that shows responsive & accessible front-end web design knowledge & application.
Overview
During the 6-month Career Foundry UI course, I completed an 8-week front-end specialization to improve my skills in HTML, CSS, and JavaScript and enhance communication with developers. I replicated my Squarespace portfolio using code, targeting UX recruiters as key users, and utilized AI to define user stories and structure.
Using Visual Studio Code and GitHub, I built three HTML & CSS portfolio pages and implemented a JavaScript hamburger menu.
User testing showed a 100% task completion rate in 6 seconds, exceeding the 8-second goal.
I'm now confident in HTML and CSS, with a growing interest in JavaScript, and plan to further explore coding and advanced interactions.
-
Timeline: 8 weeks
Background: As a part of the Career Foundry UI course, I was offered a specialization course and chose this course.
Problem: With limited experience in coding, and an interaction design trajectory, I wanted a supported hands on learning experience that would help me get started.
Goals
Learn CSS , HTML & JavaScript coding skills
Empathize with the needs of developers in order to improve future communication.
Improve my current portfolio presentation user experience by duplicating the site with code and testing it.
Edit Squarespace site using CSS skills
-
Identifying UX job recruiters as main user of the portfolio site, I used the AI toolbox for Innovators & ChatGPT to define user stories & information architecture for organizing present and future case studies.
Layout inspiration research led to creative growth with the portfolio’s visual experience.
-
Working with Visual Studio Code and GitHub, I started with learning HTML, followed by CSS styling & animation to create three portfolio site pages based on the wireframes provided & my own.
High-fidelity planning in Figma included ambitious flippable project cards and index page selected work categories based on user stories.
Development of these features moved to future planning for the portfolio once HTML and CSS work requirements showed a time constraint, embracing the value of minimal viable product design.
Site Features:
Index, About & Project pages
Mobile hamburger menu
CSS Animation
Responsive Design
Accessibility Design
Research-User Stories
“As a recruiter I want to see a user-centric design approach with a strong understanding of user-centered design principles so that I know how they empathize with users and create experiences based on design knowledge.”
“‘As a recruiter I want to see a variety of projects from different industries and platforms to see applicant versatility in design skills.’”
Process-Wireframes
Process-CSS Animation
Results-Moderated User Testing
“Everything was where I expected it to be. I liked that it is a bit fun and I feel like your personal style comes through with this muted dusty rose and dark mustard- very clean and fun to have repeated motifs.”
6
seconds completion rate average for tasks.
70%
of users had positive intent with comments.
100%
Task completion.
“I really like the body font. It is very legible with an informal feel but not too informal. Nothing seemed to be missing. If recruiting for web development I would also like to see your Github code.”
Results-Mobile Iterations
Results-Desktop Iterations
Results & Reflection
User Testing Results led to a stronger user experience:
100% task completion
6 second completion rate - the goal was 8 seconds
Learned HTML & CSS and feel confident working with them.
Access to a working playground portfolio site to practice my coding.
Experience with JavaScript led to an interest in learning more.
Future:
I want to explore more CSS animations and learn how to amplify animations with in depth training with JavaScript.
I hope to also learn Processing for physical coding and eventually expand to Java and Python to work with more advanced interactions.