07 · PROCESS ESSAY · 8 MIN READ
Designing My Design Portfolio
Treating my own digital presence like a product: rebuilding the portfolio from scratch through information architecture, content strategy, direct-in-code design, critique, and iteration — not as a gallery of screenshots.
- ROLE
- Senior UX/UI Designer and Frontend Builder
- YEAR
- 2025–2026
- TEAM
- Independent portfolio redesign
- SURFACE
- Strategy, IA, content, UX/UI direction, implementation, iteration
- STATUS
- Living project · Continuously evolving
THE PROBLEM
Why build a portfolio from scratch?
The previous portfolio no longer represented the designer I had become. It could show finished screens, but it struggled to communicate stronger storytelling, clearer information architecture, enterprise positioning, systems thinking, and the ability to take work from idea into working interfaces.
Hiring managers do not only ask what I made. They ask how I think, how I structure complexity, and whether I can collaborate across product, design, and engineering. The rebuild started from that gap — not from a desire for a more decorative site.
The problem was representation, not decoration. The site needed to show how I approach products — not only how polished the final frames look.
DIRECTION
What success looked like.
I framed the redesign as a product brief with a short set of goals. Everything that followed — structure, writing, navigation, and implementation — had to earn its place against this list.
- 01Build a portfolio that feels like a product, not a slideshow.
- 02Tell one continuous story from positioning through Selected Work to contact.
- 03Reduce visual noise so hierarchy and content carry the first impression.
- 04Connect UX and engineering in the same narrative — design decisions that survive code.
- 05Make navigation effortless for long case studies and short visits alike.
- 06Keep the site evolvable during an active job search without losing consistency.
GUIDES
Design principles that stayed in the room.
These principles shaped what stayed, what was cut, and how each section was ordered. They are short on purpose — used as checks during critique rather than slogans on a slide.
Systems before screens
Structure, states, and reusable patterns come before individual compositions.
Story over decoration
Every section should advance the narrative. Atmosphere never replaces clarity.
Readable before impressive
Scanability for recruiters beats clever layout that slows comprehension.
Everything earns its place
If a block, image, or label does not help a decision, it does not ship.
Interaction supports understanding
Motion, themes, and galleries exist to orient — not to perform.
CENTERPIECE
How the work actually moved.
Most of the design happened in the browser, not in a finished Figma file handed off later. The sequence below is the real loop: content and structure first, then layout, then critique, then revision — repeated until the story held together.
01
Research
Reviewed portfolios I respected, hiring-manager reading patterns, and where my previous site failed to communicate seniority.
02
Content planning
Defined what each project needed to prove and what could stay out of the first viewport.
03
Information architecture
Ordered homepage movements and Selected Work so flagship product stories lead without burying process and practice.
04
Writing
Rewrote positioning, case-study openings, and action labels until they said something specific.
05
Layout exploration
Tested hierarchy, density, and editorial grids directly in code against real content length.
06
Navigation refinements
Tightened chapter navigation, in-page anchors, and resource links so long studies stay oriented.
07
Responsive adjustments
Collapsed multi-column spreads, CTAs, and metadata so mobile kept the same story without overflow.
08
Accessibility review
Checked heading order, focus, contrast, link language, and reduced-motion behavior as part of ordinary QA.
09
Peer portfolio review
Shared builds with former colleagues and experienced UX designers; captured critique without formal usability tests.
10
Iteration
Applied feedback to order, spacing, themes, storytelling, and case-study structure — then reviewed again.
11
Launch and continue
Shipped a living site and kept deploying as projects, copy, and systems matured.
TOOLS
AI accelerated execution. It did not replace thinking.
AI was part of the workflow the same way a sharp editor or a fast IDE is part of the workflow: useful for exploration and implementation speed, never the author of product decisions. I set the goals, rejected weak directions, reviewed every meaningful change, and owned the final design.
ChatGPT
Brainstorming, IA discussion, UX critique, copy refinement, case-study structure, and turning feedback into clearer implementation prompts.
Claude
Architecture questions, implementation planning, adversarial critique, and documentation when the structure needed another pass.
Cursor
React and CSS changes, component updates, debugging, responsive fixes, and applying approved revisions in the real codebase.
Figma Make
Used selectively for early visual exploration — never as the source of truth for the shipped experience.
AI accelerated exploration and implementation, but product thinking, critique, prioritization, and final decisions remained mine.
CRITIQUE
The portfolio evolved through repeated review.
Throughout development the site changed because of self-review, peer feedback from former colleagues and experienced UX designers, and an engineering mindset that asks whether something is clear, buildable, and honest. Formal usability testing was not part of this phase — the loop was iterative critique against how hiring managers actually read portfolios.
- Design
- Review
- Feedback
- Revision
- Prototype
- Repeat
Self-review, peer critique, and real-world revisions — not a one-time handoff.
TRADEOFFS
Key decisions, stated plainly.
Several shifts define the difference between the previous site and this one. They are product decisions, not visual preferences.
BEFORE
Traditional portfolio
AFTER
Editorial product experience
BEFORE
Project gallery
AFTER
Continuous storytelling
BEFORE
Static screenshot stacks
AFTER
Interactive prototypes and working links
BEFORE
Visual-first presentation
AFTER
Reasoning-first narrative
REFLECTION
What I learned while building it.
Writing is harder than UI — and more decisive for first impressions. Removing content improved clarity more often than adding it. Iteration beat waiting for a perfect Figma pass. AI accelerates the loop but does not replace judgment. Real feedback from people who hire and design changed the product more than solitary polish. Building my own portfolio was a reminder of what visitors experience when a site is dense, unclear, or self-indulgent.
- 01Writing is harder than UI.
- 02Removing content improves clarity.
- 03Iteration beats perfection.
- 04AI accelerates but does not replace judgment.
- 05Real feedback changes products.
- 06Building the portfolio reminded me what users experience.
LIVING PRODUCT
What I would improve next.
This remains a living project. Next work includes expanding case studies, continued responsive refinement, introducing a dedicated portfolio design system for the patterns that emerged in code, more deliberate motion, and additional enterprise work as it is ready to tell honestly.
The commitment is the same as the original brief: treat the portfolio as a product that can keep evolving without losing its story.