What challenge was I facing?
UX is crowded—especially for juniors. I needed a way to stand out without a stack of client work.
Contents
INTRODUCTION
Live Case Study
This is a live case study documenting how I designed and built this portfolio. You'll be able to interact with it directly and give real-time feedback, helping shape my growth while experiencing my UX thinking first-hand.
Discovery
Before We Start
The Extended Content toggle gives viewers control. Switch it on to reveal additional process notes with a smooth typing transition—no reloads, no interruptions.
User Feedback
This survey tests UX decisions and improves the experience. Questions are short, anonymous, and auto-submit as you scroll; a final open-ended prompt lets you add detail if you like.
PROBLEM
The Challenge
Identifying user needs, limitations, and opportunities.
Who is affected?
Junior designers transitioning from study into a competitive market.
Why is it a problem?
Portfolios can be overlooked. I needed to demonstrate real, engaging skills—fast.
What decision did this lead to?
Turn the portfolio into a live case study and embed surveys to collect feedback from hiring managers.
Backend & technical setup
With limited time and resources, I self-taught backend fundamentals to build and host the project end-to-end.
How did this affect my thinking?
I reframed the portfolio as a product: define user questions, respect their time, and apply practical UX throughout.
Concepts
The Approach
I started by asking: what should a UX portfolio actually do? Reviewing successful portfolios, I focused on presentation, structure, and what truly felt effective. The answer: the portfolio itself must model good UX—easy to navigate, respectful of time, and memorable.
Most portfolios don’t invite participation. I saw a gap: treat the portfolio as a living product that evolves through real user input—what you’re experiencing now.
Methods
Researched successful UX portfolios—what worked and what didn’t.
Ideated ways to make the experience more interactive.
Prototyped layout, flow, and features in Figma.
Launched a live testing space where hiring managers become part of the process.
Tools
Figma — UI design & prototyping
GSAP — animations & typing effects
VS Code — code editor
Illustrator — graphics & icons
HTML, CSS, JavaScript
Firebase CLI — hosting & deploy
Photoshop — image editing
Firebase — backend & surveys
Git / GitHub — version control
Staying User Focused
I kept hiring managers at the core: What answers do they need? How do I respect their time? How do I create something memorable? Key info is easy to find; case studies are concise by default with optional extended content; and a short embedded survey makes feedback effortless.
Design & Prototype
Framed the portfolio as a live case study with real feedback.
Identified the audience and built a feedback loop.
Researched competitors and mapped user journeys.
Defined user problems and goals.
Created content hierarchy with regular/extended modes.
Designed layouts and components in Figma.
Applied typography, spacing, colour, and grids.
Built an accessible interface in HTML/CSS/JS.
Implemented GSAP animations and interactions.
Video editing and rendering.
Clear headings, prompts, and labels.
Friendly tone balanced with professionalism.
Consistent voice across regular and extended content.
Embedded survey system to gather feedback.
Planned ongoing iterations from usage insights.
Managed timeline, workflows, and documentation independently.
Testing & Next Steps
REFLECTION
What’s Next
Improving through feedback.
This portfolio is a live case study and will continue to evolve. Every interaction and piece of feedback shapes the next iteration. My goal is to refine both the work and myself—listening, learning, and creating with purpose.
Final Display
OTHER PROJECTS
GET IN TOUCH