Portfolio Website
As I’m shifting careers from Customer Support at tech companies to UX Design, I developed a portfolio website using HTML, CSS, and JavaScript. I created this site to demonstrate my skills using HTML, CSS, and JavaScript in a design capacity.
Background
In my time as a high-level support specialist, I was always aware of the world of coding. I even knew a little HTML, CSS, XML, & SQL - just enough to diagnose issues and communicate them to developers.
After finishing my CareerFoundry UX Design certification course, I wanted to expand upon my knowledge, so I chose to take the frontend development course for designers. The course was very challenging due to the amount of information taught, but I enjoyed learning and feel a lot more comfortable in the world of developers and code.
Timeline
November 2020 - March 2021
Problem
I had grand ideas with no idea how difficult they would be to execute. I bit off more than I could chew and bogged myself down. After realizing this, I decided to focus on learning the languages.
Goals
To create a user-friendly site to showcase the coding skillset I had learned while getting my UX certification. My other goal was to learn enough to be able to work well with developers in future roles.
Process & Insights
Insights
My mentor had me validating and formatting my code online for every assignment; this was great because it got me into the habit of validating every so often
Thinking back, I do wish I’d made a different kind of website to show off on my existing portfolio, however, it can still serve the same purpose in demonstrating my learned coding skills
Solution
User Testing
Think: You’re a recruiter and your client is looking for a UX Designer for their startup social media application. Another recruiter in your office sent you a link to this site and said they thought this person might be a good fit.
Scenario 1: You’ve clicked on the portfolio link your coworker sent you and are on the designer's homepage.
Scenario 2: Your coworker mentioned that they heard this designer had worked on social media app for finding tattoos and artists, so you find that project and click on it to learn more.
Scenario 3: You scroll through the case study some and think that your client would like this designer but want to find out more about them first. Where would you go to learn more about the designer (background, photo, etc.)?
Scenario 4: It seems like the designer would be a good fit, so now you want to download their resume. Once you’ve downloaded it, you go back to the website so you can reach out to the designer from the website. How would you go about doing that?
Open Questions
What was your first impression of the website?
2. Was there anything that stood out to you, good or bad?
3. Does it seem like there is anything missing from the website?
4. Does the navigation make sense for the tasks?
Usability Issues
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before product can be released
There were no major issues with functionality or layout, so any changes I made were aesthetic. Overall, my main goal was to create a site from scratch using the coding skills I had learned. This frontend course inspired me to customize the portfolio I had already made through Squarespace.