My Portfolio

Designing with Intent: How I Turned My Portfolio into a Behavioral UX Experience

Table of Content

Introduction

Objective

Design Process

User Personal

Design Principles Explained

A/B Testing Trade-offs

Feedback

Conclusion

#hastag

Human Behavior

UX/UI

Introduction

Most personal websites showcase what you’ve done. I wanted mine to show how I think. As someone pivoting into new domains, my experience may not directly align with the roles I’m applying for. So my site needed to do more than look good—it had to create trust, invite curiosity, and make recruiters see potential.

I built saminathan.framer.website as a minimalist, scroll-based experience—but everything from layout to microcopy was crafted through the lens of UX laws and human behavior principles.

Objective

Build a personal portfolio that goes beyond just listing roles, skills and tells a story that moves from personal to professional.

User Persona

“With so many resumes to shift through, I need a way to see at a glance who might truly fit our team.”

Maria represents the real audience behind most portfolio visits: time-pressed, tech-aware HR professionals who need both clarity and persuasion—fast.

Design Principle Explained

  • Priming with Value Up Front

    High-impact sections like “What I bring to the table” and “Worked with the best of the best” are placed early to establish credibility and frame everything that follows.

    Serial Position Effect + Social Proof
    People remember what they see first. I intentionally lead with recognitions, personality traits, and proof of potential.

    1

  • Building Familiarity Through Mental Models

    The latter half of the site transitions into a traditional resume-style format. It’s clean, structured, and predictable—something recruiters recognize instantly.

    Jakob’s Law
    People prefer systems that feel familiar. I mirrored LinkedIn-style layouts for fast parsing.

    2

  • Creating Exploration Paths Based on Attention Spans

    Each case study displays a reading time and is available as a short (~3–5 min) or long (~10 min) version. Recruiters can choose what fits their moment.

    Goal Gradient Effect + Uncertainty Aversion
    Knowing what to expect lowers friction. When users see a 3-minute project, they’re more likely to click.

    3

  • Simple Language That Respects User Attention

    Words like “Read full story” and “What I bring to the table” are intuitive and human—not corporate jargon. This makes the site inclusive and user-first.

    Von Restorff Effect + Curse of Knowledge Avoidance
    Clear, relatable labels stand out more and help users navigate with less mental effort.

    4

  • Letting Interaction Guide Depth

    Expandable cards keep the scroll experience lightweight. Nothing feels overwhelming, yet more detail is just one click away.

    Progressive Disclosure + Doherty Threshold
    Default to simplicity. Let curiosity drive deeper engagement without slowing down the page or disrupting flow.

    5

  • Dark Theme + Contrast for Focus

    A dark background reduces eye strain. Blue is reserved for CTAs or key highlights. The effect is focused, non-distracting, and calming.

    Aesthetic Usability Effect + Perceptual Selection
    When something looks good and purposeful, users trust it more. Contrast directs their eye to where it matters.

    6

  • Cross-Device Experience

    The site is fully responsive with thumb-friendly click zones and consistent grid behavior across screen sizes.

    Reducing Friction
    No resizing, no pinch-and-zoom, no weird transitions. Just clean interaction that respects how people actually browse.

    7

  • Respecting the Scroll, Not Breaking It

    When a user clicks into a detailed case study, it opens in a soft modal or new tab—never disrupting their scroll position.

    Law of Context
    Users should stay in the same mental context unless they choose to branch out.

    8

  • Consistent Layouts and Content Blocks

    Every content type—from projects to testimonials—follows the same visual logic. This rhythm reduces learning effort and builds trust.

    Law of Uniform Connectedness
    Predictability reduces mental fatigue. It also makes the portfolio feel cohesive and curated.

    9

  • Ending with Resume Facts to Ground It All

    The bottom half includes education, skills, and experience—giving traditionalists exactly what they came for.

    Narrative Transportation + Serial Position Effect
    First: emotional engagement. Last: clear data. Together, they close the loop on persuasion.

    10

A/B Testing Trade-offs

Single Scroll vs. Multi-Page
Early versions split “Beyond Resume” and “Resume” into different pages. But testers missed parts of the content. Single-scroll was clearer, faster, and retained users better.

Horizontal vs. Vertical Navigation
Case studies use horizontal scrolling to signal same-content-type. Vertical scroll is reserved for different content types. This mirrors app behavior and keeps sections clean.

Dark vs. Light Theme
The first version used a white background for minimalism. But users felt it was too empty. Switching to black helped reduce distraction and focus attention on the content.

What to Include or Leave Out
I listed everything I wanted to share, filtered it through a recruiter’s POV, and fine-tuned using AI for clarity and order. Every section exists for a reason.

Feedback

Early feedback from peers and mentors praised the site’s consistency, visual polish, and narrative flow. The hero section in particular—featuring dynamic colors over black—stood out as both engaging and elegant.

“It’s like a story. It feels alive.”

Conclusion

“This case study isn’t just about my website—it’s about how I solve problems, how I think in systems, and how I design for real people. If you’d like to explore how I bring this mindset into product or design roles, feel free to reach out.”