Design work isn’t only the final UI – it’s the framing, research inputs, synthesis, choices, and iterations behind it. But in many junior product design portfolios, that trail is hard to follow. The work may look polished, yet it’s often unclear which areas and methods the designer has actually practiced across projects. Without a structured way to connect methods and decisions to real examples, the story stays abstract and reviewers can’t assess depth with confidence.

«I wanted to make my experience traceable: not just what I built, but where I’ve applied specific methods in real projects.»

I set out to design a portfolio system that works for fast scanning and deeper evaluation. The solution needed to make my process evidence explicit, stay easy to update through a CMS, and meet a high quality bar across responsiveness, accessibility, SEO, and performance. Because this was a solo project, I defined an MVP first and expanded the system in iterations.

I set out to design a portfolio system that works for fast scanning and deeper evaluation. The solution needed to make my process evidence explicit, stay easy to update through a CMS, and meet a high quality bar across responsiveness, accessibility, SEO, and performance. Because this was a solo project, I defined an MVP first and expanded the system in iterations.

«How might I combine clear case studies with a structured overview that makes my experience across the design workflow visible and verifiable?»

Based on the research insights, I explored ways to make my experience visible across phases and methods – not just within individual case studies. I started with quick hand sketches to test different structures and interaction ideas, then moved into Figma to iterate on a few directions with clearer layout, hierarchy, and content framing. The goal in this phase was to find a concept that stays scannable at first glance, but allows deeper exploration of method evidence when needed.

Before committing to a final design, I first structured my portfolio projects as a dataset. I created a CSV where methods were listed chronologically by phase in the columns, and each row represented one of my potential portfolio projects. For every project, I marked which methods I had applied to build a clear overview of real application examples across my work. Using this dataset, I then built a simple interactive D3 code prototype to test whether the Workflow Atlas concept actually holds up with real data – not just as an abstract idea.

Once the concept worked with real data, I validated whether it was actually understandable to others. I ran a lightweight concept test with 5 people – 3 with a UX background and 2 without – to check if the Workflow Atlas model, navigation, and “Impressions” interaction were intuitive without additional explanation. The goal wasn’t to prove perfect usability at this stage, but to confirm comprehension, uncover confusion early, and identify what needed clearer structure before moving into the final design and implementation.

I designed a minimal, timeless interface so the portfolio never competes with the case study content. A strict grid, clear typographic roles, and a mostly grayscale palette create consistency across pages and CMS blocks. Colour is used only where it carries meaning. It codes the phases inside the Workflow Atlas, so visual accents stay functional rather than decorative.

I structured the portfolio so reviewers can understand my work quickly, then choose where to go deeper. The IA separates curated highlights from full archives, keeps UX work distinct from experiments, and uses a consistent case study template so projects are easy to compare. This structure also supports my CMS approach: content can grow without breaking navigation clarity.

I implemented the portfolio as a scalable system, not a set of static pages. The frontend is built with Next.js and Tailwind, while Sanity powers a structured content model for projects, the Workflow Atlas, and reusable case study blocks. This setup lets me add and update content fast, keep layouts consistent across breakpoints, and evolve the portfolio without redesigning or recoding each page.

The portfolio uses a modular CMS architecture based on structured content types. Core page types such as Home, About, and Project define the layout, while reusable content blocks enable flexible page composition. Workflow Atlas entities such as phases, methods, and impressions are modeled separately and linked to projects through relational data, allowing dynamic updates and reuse across the system.

The project resulted in a functional portfolio system combining structured case studies with an interactive overview of real design experience. The Workflow Atlas connects phases, methods, and project examples, making applied skills easier to explore and verify. A modular CMS and modern frontend stack ensure the site remains maintainable, scalable, and performant as new projects and content are added over time.

Designing and building this portfolio system was both a design and engineering challenge. The goal was not only to present projects, but to create a structure that makes design experience transparent and explorable. Working across concept design, interaction design, frontend implementation, and CMS modelling required thinking about the portfolio as a system rather than a set of pages. The process reinforced how closely design decisions, technical constraints, and information architecture are connected when building real digital products.