A portfolio can look polished while forcing a new visitor to guess which project matters. This checklist tests a simple journey: choose a relevant project, understand your role, return to the list and contact you. It uses a fictional six-project portfolio, so it does not claim results from a live site.
Framer currently presents an editable website canvas, CMS and publishing workflow. That makes it a reasonable place to prototype a portfolio, but the tool cannot decide whether your labels make sense to a client. Framer product information
Contents — jump to a section
Prepare six projects and three visitor tasks
Give every project a plain title, project type, your role and one observable outcome. Avoid labels such as “Explore” or “Selected work” as the only clue. For a fictional product designer, the six projects might include a checkout redesign, an onboarding audit and a support-dashboard prototype.
Write three tasks before editing the page: “Find an ecommerce project,” “Confirm what the designer personally did,” and “Ask about a similar project.” Use Framer to prototype the portfolio, then test navigation and contact routes with the same six sample projects.
Run the navigation check
- Open the home page in a private window. Ask a tester to choose a relevant project without explaining the menu.
- Count deliberate choices, not scrolls. As an editorial target, the visitor should reach a suitable project after no more than two clear choices; this is a suggested test threshold, not a Framer guarantee.
- On the project page, check that the title, problem, your role and outcome agree with the project card.
- Use the visible back, next-project or work-index route. The browser Back button should not be the only escape.
- Follow the contact action from the project page. Confirm that its label matches the destination: email, form or booking page.
- Repeat on a narrow phone viewport and with a keyboard. Check the menu opens, focus remains visible and the contact action is not hidden behind an overlay.
Use Framer's help centre to locate current controls when the interface differs from your project. Account settings and templates can change the exact steps.
Visit Framer ↗Record a result you can act on
For the fictional checkout project, record: “Tester chose Product work, opened Checkout redesign, identified the designer's research and prototyping role, returned through All projects, then opened the email link.” If the tester opens three unrelated projects first, rename the category or add a one-line project description. Do not call a session successful because the page loaded.
Make a small table with task, route taken, wrong turns and final destination. Test with at least one person who did not build the site. This is a comprehension check, not proof that the portfolio increases enquiries.
Recover when the route fails
If categories overlap, replace them with client language such as “Online shops” or “Internal tools,” or show all six projects on one clear index. If a mobile menu fails, keep a plain Projects and Contact link visible until the interaction is repaired. If the form cannot be verified, publish a working email route rather than a success message you cannot confirm.
Review the contact destination after every template, domain or form change. The related Framer service-page content check helps verify that the page also explains the offer without invented promises.
Product and help entry points were inspected on 24 September 2026. This guide proposes a test; PickByTask did not build or measure the fictional portfolio.