Skip to content
ELVIS FERNANDES

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
01 · CHALLENGE

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.
02 · GOALS

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.

  1. 01Build a portfolio that feels like a product, not a slideshow.
  2. 02Tell one continuous story from positioning through Selected Work to contact.
  3. 03Reduce visual noise so hierarchy and content carry the first impression.
  4. 04Connect UX and engineering in the same narrative — design decisions that survive code.
  5. 05Make navigation effortless for long case studies and short visits alike.
  6. 06Keep the site evolvable during an active job search without losing consistency.
03 · PRINCIPLES

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.

04 · ITERATION

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.

  1. 01

    Research

    Reviewed portfolios I respected, hiring-manager reading patterns, and where my previous site failed to communicate seniority.

  2. 02

    Content planning

    Defined what each project needed to prove and what could stay out of the first viewport.

  3. 03

    Information architecture

    Ordered homepage movements and Selected Work so flagship product stories lead without burying process and practice.

  4. 04

    Writing

    Rewrote positioning, case-study openings, and action labels until they said something specific.

  5. 05

    Layout exploration

    Tested hierarchy, density, and editorial grids directly in code against real content length.

  6. 06

    Navigation refinements

    Tightened chapter navigation, in-page anchors, and resource links so long studies stay oriented.

  7. 07

    Responsive adjustments

    Collapsed multi-column spreads, CTAs, and metadata so mobile kept the same story without overflow.

  8. 08

    Accessibility review

    Checked heading order, focus, contrast, link language, and reduced-motion behavior as part of ordinary QA.

  9. 09

    Peer portfolio review

    Shared builds with former colleagues and experienced UX designers; captured critique without formal usability tests.

  10. 10

    Iteration

    Applied feedback to order, spacing, themes, storytelling, and case-study structure — then reviewed again.

  11. 11

    Launch and continue

    Shipped a living site and kept deploying as projects, copy, and systems matured.

05 · AI WORKFLOW

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.
06 · FEEDBACK

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.

  1. Design
  2. Review
  3. Feedback
  4. Revision
  5. Prototype
  6. Repeat

Self-review, peer critique, and real-world revisions — not a one-time handoff.

07 · DECISIONS & LESSONS

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.

  1. 01Writing is harder than UI.
  2. 02Removing content improves clarity.
  3. 03Iteration beats perfection.
  4. 04AI accelerates but does not replace judgment.
  5. 05Real feedback changes products.
  6. 06Building the portfolio reminded me what users experience.
08 · WHAT'S NEXT

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.