Portfolio Study
Challenge: Create a portfolio website with HTML5, CSS3 and JavaScript and use UX methods to discover the target audience and which content to showcase. This project was part of the CareerFoundry course Frontend Development for Designers.
Process
Which Projects to show case?
The first part of this process was to find out which projects to display. As I was still building my portfolio, the choice was not too complicated. I collected many sticky notes and papers throughout the different projects, which helped me to explain the details and show snippets of the work progress. I decided on the following four projects:
Who are the users?
Finding out who I am making my portfolio for is as important as to deciding what it should feature. I decided on four different user personas, however they key point I learned was that this website needs to be accessible for the following mediums:
Tablet, iPad
Laptop, MacBook
Desktop computer.
“Don’t find customers for your products, find products for your customers.”
Structure of websites
I learned about the structure of websites and compared it with two search engines. This task helped to understand that a website could look similar on the outside, but can be structured different on the inside.
My website structure
The next step was to build my own website, define names of the different pages, create a navigation menu, icon and link between the pages. I learned to keep my HTML code clean and have the correct spaces and indentations.
The styling and animation
The CSS part for this site was a huge learning curve for me. I also learned about SVG files and made my own little animation for my website in the form of a landmark picture of Southampton.
To test or not to test, that is the question?
And the answer is clear, yes of course. User testing is very important, no matter how much thought process went into making and developing a website or application, when it is tested by users, there is always something that can be learned.
User criteria:
Age: ideally between 20 - 50
Technical Experience: low, can use a laptop or similar and is familiar with browsing the internet
Job: works in IT / Technology related company
Habits: uses the internet to read the news daily.
I ran six User tests and got great valuable feedback. Take away items for future iterations:
Name the section of the pictures for the project
Add direct link from the project picture to the project page and have a short description at hoover action
Include the HOME link in the menu bar
Make the text of the header picture readable
Include the Journey timeline in the About Me page
Conclusion
I was able to make all the changes found by the user testing and improve the usability of my website portfolio.
This was the final look at the end of the project.
Final website homepage layout