Kristina Wong

Making This Website

User Research

User Interviews

Conducting user interviews allowed me to identify and understand the audience for my portfolio website. Web designers can only guess who their users are and what is expected from a website. In user interviews for my website, I asked questions about people's career backgrounds to help me understand what they would be interested in seeing on my site. I also asked them about their expectations from visiting a portfolio to ensure that the content on my site was useful to them.

Competitor Analysis

A competitor analysis involves conducting research on a competing product and learning what it does well and what it does not do well. The competitors I analyzed are portfolio websites created by a video game programmer, a graphic designer, and an interaction designer. I analyzed the programmer's portfolio because I am interested in working in the video games industry and wanted to see how a recent graduate presents his work. The graphic designer's portfolio interested me since she designed and coded a website that I particularly like, and I wanted to see the layout of her own website. I chose to analyze the user experience designer's website since he has a lot of industry experience and a portfolio that has won over many employers, making it an example of what a portfolio should be.

Feature Value Matrix

A feature value matrix lists features of a website, with ratings for their value to a business, the value to a user of the website, and the technical effort of adding the feature. In my matrix, I include features that allow users to contact me through my website because it is important for me to communicate with potential employers. Many features in the matrix have to do with obtaining information about me through my portfolio, since this is the criteria that employers will look for when hiring. I have also included features in the matrix for using my website, since this can ensure that visitors have a pleasant experience and can access information quickly.

Feature Prioritization

I prioritized features of my website based on how much they would help me connect with an employer. The most important feature is allowing users to communicate with me, so emailing me is a top feature. However, accessing my LinkedIn is low priority since I am not very active on it. It is also essential for users to know what my skills and career interests are so they can determine if I am a viable candidate for a job. Navigating the site successfully is key since a recruiter may only view my site for a few seconds.

User Testing

User Stories

Developing user stories allowed me to view my website from the perspective of a user. This made me consider the needs of users and how to design my website to meet these needs. I wrote the stories with the goals of employers and peers in mind, based on my experience from talking to employers and my own perspective as a student.

Cognitive Walkthrough

A cognitive walkthrough involves asking people to use a website and answer questions about it. This allows a web designer to determine how usable a website is and how it can be improved to appeal to users. I attempted to select questions for my walkthrough that would require people to offer criticism, since some people seem very reluctant to do so. In conducting cognitive walkthroughs for my website, I found that the people I conducted the walkthrough with have very different opinions on what makes a website visually appealing. However, there was general consensus among them for what content was needed for a portfolio. I had to consider all of their opinions while making the final decision as to what my website will look like.

User Test

I conducted task based tests for my website. One is a click test where users indicate how they would contact me through the website, and the other is a question test where users answer a question based on the content of the website. It is essential for these tasks to be easily completed because the purpose of my website is to inform employers about me and allow them to contact me. The test results indicate that these tasks were very doable. However, since a screenshot was used for the test instead of a live URL, some users clicked a link to navigate to my email rather than clicking on a link to email me.

View the first user test
View the second user test

Summary of Findings

After conducting user research and user testing, I concluded that my website is highly usable but not informative enough to employers. It is also too similar to my resume, which is where employers would find the URL of my website. The Activities section does not explain my role in the organizations I take part in, and the pictures in this section do not inform users about my activities.

Another issue was brought up in user testing is my website's design. On mobile, the content touches its containers. On desktop, content spills out of its containers when zoomed in to a certain extent. Two people I conducted cognitive walkthroughs with praised the simple, neat layout of the website, but one person thought it was too simple and unprofessional looking. I was surprised to find that the color scheme of the website was pleasing to my testers.

Incorporation of Findings

I plan on adding more information to my portfolio. The activities section needs to be more informative, so I can explain how I contribute to organizations I am involved in and what projects I have worked on. A header can be added above the screenshots in this section to explain the projects that they represent. These images should link to either final products of the projects or audio files that I made for them so that users can get a better idea of what I did and what these projects are. Also, considering that the URL for this website is on my resume, I think the skills section should be rewritten to not exactly mirror the skills section on my resume.

The design of my website has been corrected to be more responsive and have content neatly positioned in its containers. To make it look more professional, I can replace the portrait of myself with one appropriate for a businessperson. I have changed the appearance of the navigation links to have a sans-serif font and more space between each letter, which I hope makes the navigation bar appear more modern and appealing. I am keeping the organization of content into bordered sections since this categorizes content neatly.