A Portfolio That Works
This section pulls back the curtain. It captures the strategy behind my portfolio—how I treated it like a product, tested, refined it like a prototype, and built it to reflect not just what I do, but how I think and approach problems.
Starting with Intention
Before I designed a single frame, I treated this portfolio like any other product: with purpose, audience, and usability in mind. This wasn’t just about showing my work—it was about designing an experience that reflects how I work. This portfolio wasn’t just built to showcase projects—it was designed to solve a problem. That problem was:
Recruiters (primarily) need better access to UX business impact through a well-structured, story-driven portfolio that clearly showcases skills, process, and measurable results—enabling them to quickly assess alignment for a role.
With that in mind, every decision—from structure to storytelling—was made intentionally.
How It’s Structured (and Why)
Each section exists to answer a different question I wanted to address:
› About Me
Who am I, and why UX? A mix of storytelling and background that invites curiosity, shows personality, and frames my path from finance to design.
› Case Studies
Can I solve real problems? Each case is structured around impact, process, and storytelling—framed with context, UX depth, and results.
→ Design Process
How do I think and work? A zoomed-out view of my approach—from discovery to delivery.
∘ Explorative Work
What else am I thinking about? A creative sandbox for experiments, patterns, and personal growth.
∘ Fractional Work
Have I worked with real clients? A peek into client-based work (where shareable), with clear notes on freelance impact and process.
💬 What I Learned From Feedback
I didn’t just design this portfolio to look good—I designed it to work. But great UX doesn’t stop at launch. After sharing it with mentors, peers, and recruiters, I got valuable feedback that made it even stronger. Here’s what I learned—and what I improved:
→ Navigation Fatigue is Real:
While breaking up case studies into Featured, Fractional, and Exploratory helped me organize projects, having all of them in the top nav felt overwhelming. Based on feedback, I explored simplifying access (like dropdowns or grouped navigation).
→ Icons Carry Meaning—Even When You Don’t Intend Them To:
A caution icon I used for insights unintentionally signaled danger—even when the insight was positive. I’ve since updated these for better semantic alignment with the content.
→ Make Interactions Obvious:
One reviewer missed that a before-and-after image was a slider in the Toy case study. I’ve added microcopy and annotation to clarify interactions and ensure they invite engagement, not confusion.
→ Hierarchy and Alignment Matter:
Small visual tweaks—like image clarity, misaligned columns, and unreadable links—were more noticeable than expected. I’ve been refining those details, because presentation communicates polish.
→ Finished Work Matters—Especially to Busy Clients:
While the strategy and process were clear, reviewers noted that having more polished final screens, especially for high-impact wins like the AI-powered assistant, could help time-pressed clients get the full picture faster. I’m working on adding more visuals where it counts.
→ Accessibility and Responsiveness Are Ongoing:
From blurry profile images to content overlapping the nav bar, this feedback reminded me that polish includes performance. I’m continuing to QA on different devices and lighting conditions to improve accessibility and layout responsiveness.
→ People Notice the Details—So They Should Reflect You:
The feedback wasn’t just about structure—it was about how my content felt. They liked the tone, clarity, and ease of contacting me. That confirmed what I was going for: something helpful, open, and distinctly mine.
✅ What I Optimized For
→ Scanability with Substance
Each section was designed to be skimmable—clear headers, bold summaries, and visual rhythm. But beneath that surface is real depth for those who want to dig in.
→ Depth That Shows My Thinking
Every case study highlights strategy, UX process, and measurable outcomes. Feedback helped me lean into moments of clarity, user research, and storytelling even more.
→ Voice That Sounds Like Me
From microcopy to case study intros, I’ve aimed for a tone that’s polished but human—professional, not robotic. A few tweaks based on feedback helped me to stay warm and sharp.
→ Modularity for Growth
The portfolio is structured to grow with me. Case studies, experiments, and new offerings slot easily into the system, without needing a full redesign.
→ Responsiveness + Real-World Polish
It looks good across breakpoints—but more importantly, I’ve been refining details that show care: image sharpness, alignment, and microinteractions that add just enough delight.
→ Accessibility and Usability
From readable link styles to button clarity, I’ve made intentional updates to improve both access and flow—because good design works for everyone.
Portfolio-as-Product Journey Map
This wasn’t just about showcasing my work—it was about solving a UX problem. I approached the portfolio as a product and used the same process I apply to client work:
🔍 Discover
– Defined the problem: Recruiters (primarily) need quick access to UX business impact.
– Conducted research: Reviewed 10+ portfolios, interviewed hiring managers.
– Audited premium sites: Apple, Three, and more for structure and storytelling.
🎨 Design
– Mapped the IA: Structured for both scanability and depth.
– Wrote purposeful copy: No filler—each section aligns to role relevance.
– Prototyped in Framer: Reusable components, responsive layouts.
🚀 Build
– Developed in Framer using its visual-first tools—focused on structure, responsiveness, and smooth interactions.
– Tested & iterated: Feedback from mentors, peers, and recruiters.
– Branded it: Designed a logo and created a style system for consistency.
🦕 Wireframe: A scroll experience told through Arlo’s eyes.
I thought it would be fun to end this section with a sketch from The Dinosaur Farm case study.
This wireframe tells the story of one scroll interaction—from uncertainty to clarity, through the eyes of Arlo, our dino guide.
🚫 Before: A gray, crowded interface labeled "sea of toys." Arlo looks confused, surrounded by noise.
🌀 Transition: As the user scrolls, the interface begins to shift. Arlo starts to smile. The background fades. A moment of UX transformation.
🦕 Clarity: Full scroll reached. A glowing dinosaur appears—centered and celebrated. Arlo is focused, delighted, and engaged.
This sequence visualizes the impact of good UX: not just cleaner UI, but emotional clarity.
The user found what they were looking for.
So did Arlo.
