Portfolio Usability Checklist Before You Apply

You send your portfolio link, then open it on your phone to check one last thing. The menu takes two taps to appear. A project card looks clickable, but nothing happens. One case study says “coming soon.” Now you are refreshing the page instead of preparing for the application.

A strong case study cannot help if a hiring manager cannot reach it, read it, or understand what to click. Before you apply, test your portfolio like a busy stranger. You do not need a perfect website. You need a clear and reliable one.

Test every important click from the home page

Start with the first screen. Give yourself 30 seconds to find your best project, your role, your contact details, and a way to return home. If you already know the site, ask someone else to try it without help.

Use a simple click test

1. Open the home page in a private browser window.
2. Click the first project card, not the exact spot you designed it around.
3. Return home using the logo, the back button, and the menu.
4. Open every project from the work page.
5. Click every button, text link, image, arrow, and contact option.
6. Send yourself a test contact message, then check that the confirmation appears.

A card should behave like a card. If the title opens the project but the image does not, make the whole card clickable. Give it a clear label, such as “Read the payment app case study.”

Check links in a private window too. A link that works only because your browser remembers a previous page is not working for everyone. Watch for pages that show the wrong project, open a blank tab, or lead to a private file.

A stranger should be able to answer three questions quickly: What do you do? Which work should I see? How can I contact you?

Make navigation and scrolling predictable

People should not need to learn your website before they can view your work. Use familiar labels such as Work, About, Resume, and Contact. Keep the main menu in the same place on every page.

Then test how the page scrolls. Use a mouse wheel, a trackpad, the keyboard, and a phone screen. Look for sections that jump, lock the page, move sideways without warning, or scroll so slowly that the content feels stuck.

Fix scroll behavior that hides your work

• Remove a loading screen if it delays the first useful content. A short loading state may be necessary, but it should not ask people to wait for decoration.
• Avoid scroll animations that move project content away from the reader or force a special gesture.
• Make horizontal scrolling obvious with a visible row of cards, a scrollbar, or a clear instruction.
• Keep important project details above or near the main content. Do not hide the only case study link at the bottom of a long animation.
• Test the browser back button. It should return people to the page and position they expect.

Here is a useful before and after. Before: “Explore” sits under a moving image and opens only when the pointer lands on a small corner. After: the whole project card is clickable, the title says “Redesigning the clinic booking flow,” and the card shows a visible arrow.

Check the site on a small phone

A desktop layout can look polished while the mobile version feels unfinished. Use the smallest phone you can access, not only a large modern device. Narrow screens reveal crowded menus, oversized gaps, tiny text, and buttons that are difficult to tap.

Run this five-step mobile check

1. Open the site on a real phone over mobile data, not only in a desktop preview.
2. Tap the menu, every project card, the contact link, and the resume link.
3. Scroll from top to bottom without rotating the phone.
4. Check whether text, images, and buttons stay inside the screen.
5. Turn the phone sideways, then return to portrait view. Confirm the layout recovers.

If a card needs a precise tap, enlarge the clickable area. If a large empty space pushes your work far below the first screen, reduce it. White space can make a page easier to read, but empty space that delays the work is a usability problem.

Also check text contrast and image size. A hiring manager should not have to pinch and zoom to understand your strongest screen or chart. Let images open at a readable size, with a short description for context.

Remove unfinished interactions before you apply

An unfinished case study is different from an unfinished interaction. You can show a project with limited details. You should not leave a broken link, a missing image, or a page that says “coming soon” in your main navigation.

If a case study is not ready, hide it from the menu and project grid. Three clear projects are usually stronger than five projects that make visitors guess what is complete.

Use a shorter case study when the full version is not ready

You do not need every workshop note, early sketch, and revision. Start with the problem, your responsibility, the decision you made, and the result. If you do not have a measured result, say what changed in the design instead of inventing a number.

Sample case study summary: I redesigned the appointment flow for a small clinic. I mapped the main drop-off points and created a shorter form with clearer labels. My work covered the user flow, wireframes, and mobile screens. The team used the final screens as the starting point for development.

This sample gives a visitor a reason to keep reading without claiming results you cannot prove. Add only the artifacts that explain your decisions. Label personal work, client work, and team work clearly. A reader should know what you owned, what you shared, and what changed because of your work.

Ask one person to use the portfolio without help

A fresh test catches problems you will miss because you know where everything is. Ask a friend, former coworker, or mentor to complete three tasks while you watch silently.

• Find the project that best fits a product designer application.
• Open the case study and tell me what this person contributed.
• Find a way to contact the owner.

Do not explain the interface while they test it. Write down every hesitation, misclick, and question. If they ask, “Is this image clickable?” or “Where do I go next?” treat that as useful evidence, not a personal criticism.

Before sending applications, fix the problems that block access first. Prioritize broken links, unclear project cards, difficult scrolling, mobile failures, and missing contact details. Tweak colors and animations after those basics work.

Run one final application check

Open the exact link you plan to send. Check it on desktop and mobile one more time. Read the page titles, spelling, project names, and contact details. A single spelling mistake is easy to fix, but it can weaken confidence when it sits in a headline.

• The first screen explains your role in plain language.
• Your strongest relevant project is easy to find.
• Every visible link works.
• The menu, back button, and logo behave as expected.
• Scrolling does not trap, jump, or hide content.
• Cards and buttons are easy to tap on a phone.
• Unfinished projects are hidden or clearly marked outside the main path.
• Case studies show your contribution, decisions, and results.
• Images are readable without excessive zooming.
• Your email or contact method works.

Upleva Sites can turn your resume into a personal career website, with a free preview before you publish it on your own domain.

You do not need to wait for every case study to feel complete. Send the version that works, reads clearly, and helps the right person reach your best work without effort.