Web Portfolio

Creating a portfolio template in Webflow
UX & UI
Strategy
Development
View full presentation
View full presentation

Situation: I undertook a solo project to design a portfolio website template aimed at solving the pain points recruiters face when reviewing portfolios. My goal was to build the template myself using Webflow, which presented a unique opportunity to learn technical implementation while addressing real user challenges.

Task: In this project, I was responsible for every aspect: research, management, design, and implementation. Taking on all these roles gave me a deeper appreciation for the specialized work of colleagues in research, management, and development. The main objective was to create a portfolio template that a recruiter could easily navigate, ensuring they could quickly find the information they were searching for. A key challenge was working within my technical limitations during implementation, which forced me to carefully prioritize features.

Action: I followed the double diamond methodology to guide my process. First, I conducted user research to uncover recruiter pain points, including “being my own user.” I simulated the recruiter experience by finding a Product Designer job listing, reviewing 40 portfolios (including my own), and assessing whether they met the role’s requirements within a brief time. This exercise illuminated key pain points, like difficulty finding essential information.

Using this research, I defined the problem statement:

Create a website that a recruiter with no design knowledge could skim in under a minute to discover who I am, what I do, my work, my design process, my work experience, and how to contact me.


I began designing the website, focusing on simplicity, clarity, and responsiveness. The process resulted in three main sections:

The Landing Page, designed to introduce the designer and provide an overview of their work.

The About Page, focused on communicating the designer’s background and expertise.

The Case Study Page, structured to showcase projects in-depth, highlighting process and outcomes.

The greatest challenge emerged during implementation. My technical limitations with Webflow meant that some features were difficult to execute. For example, I initially designed a complex interactive element that wasn’t feasible to implement as envisioned. To overcome this, I reworked and simplified the designs, cutting or refining features to ensure they remained functional while still delivering value. This iterative process was a humbling yet valuable learning experience.

After completing the template, I rigorously tested it to ensure responsiveness and usability. Although some features were simplified, the final product aligned with the problem statement. Feedback from peers validated its utility and appeal, with several users expressing interest in adopting the template for their own portfolios.

Result: The project yielded a functional, responsive portfolio template that addressed recruiter pain points effectively. While several individuals expressed interest in using the template, I ultimately chose to use a professionally built template for my own portfolio. This decision was driven by the realization that the quality of implementation I could achieve on my own was limited by my technical knowledge, and recruiters value clear and accessible information over whether the website was personally coded.