The Problem
My old portfolio was difficult to update and didn’t explain my projects clearly. Recruiters struggled to get a quick picture of my skills, while clients couldn’t easily see the process behind the visuals.
The Problem
My old portfolio was difficult to update and didn’t explain my projects clearly. Recruiters struggled to get a quick picture of my skills, while clients couldn’t easily see the process behind the visuals.
The Problem
My old portfolio was difficult to update and didn’t explain my projects clearly. Recruiters struggled to get a quick picture of my skills, while clients couldn’t easily see the process behind the visuals.
The Problem
My old portfolio was difficult to update and didn’t explain my projects clearly. Recruiters struggled to get a quick picture of my skills, while clients couldn’t easily see the process behind the visuals.
The Problem
My old portfolio was difficult to update and didn’t explain my projects clearly. Recruiters struggled to get a quick picture of my skills, while clients couldn’t easily see the process behind the visuals.
Project Scope
Ongoing background project designing and building a responsive portfolio in Framer. It needed clear case study structure, easy navigation, and a CMS so I could add projects quickly without redesigning pages.
Project Scope
Ongoing background project designing and building a responsive portfolio in Framer. It needed clear case study structure, easy navigation, and a CMS so I could add projects quickly without redesigning pages.
Project Scope
Ongoing background project designing and building a responsive portfolio in Framer. It needed clear case study structure, easy navigation, and a CMS so I could add projects quickly without redesigning pages.
Project Scope
Ongoing background project designing and building a responsive portfolio in Framer. It needed clear case study structure, easy navigation, and a CMS so I could add projects quickly without redesigning pages.
Project Scope
Ongoing background project designing and building a responsive portfolio in Framer. It needed clear case study structure, easy navigation, and a CMS so I could add projects quickly without redesigning pages.
Goals & Success Metrics
Goals & Success Metrics
Goals & Success Metrics
Goals & Success
Goals & Success Metrics
Goals
◆
Make projects scannable
◆
Keep navigation simple
◆
Enable quick updates
Goals
◆
Make projects scannable
◆
Keep navigation simple
◆
Enable quick updates
Goals
◆
Make projects scannable
◆
Keep navigation simple
◆
Enable quick updates
Goals
◆
Make projects scannable
◆
Keep navigation simple
◆
Enable quick updates
Goals
◆
Make projects scannable
◆
Keep navigation simple
◆
Enable quick updates
Success Metrics
◆
Recruiters skim case studies in ~2 minutes
◆
Portfolio helps land interviews
◆
New projects added in <30 minutes
Success Metrics
◆
Recruiters skim case studies in ~2 minutes
◆
Portfolio helps land interviews
◆
New projects added in <30 minutes
Success Metrics
◆
Recruiters skim case studies in ~2 minutes
◆
Portfolio helps land interviews
◆
New projects added in <30 minutes
Success Metrics
◆
Recruiters skim case studies in ~2 minutes
◆
Portfolio helps land interviews
◆
New projects added in <30 minutes
Success Metrics
◆
Recruiters skim case studies in ~2 minutes
◆
Portfolio helps land interviews
◆
New projects added in <30 minutes
Research
Research
Research
Research
Research
Goals
◆
Understand how recruiters and clients use portfolios
◆
Identify common best practices
◆
Test ease of navigation
Goals
◆
Understand how recruiters and clients use portfolios
◆
Identify common best practices
◆
Test ease of navigation
Goals
◆
Understand how recruiters and clients use portfolios
◆
Identify common best practices
◆
Test ease of navigation
Goals
◆
Understand how recruiters and clients use portfolios
◆
Identify common best practices
◆
Test ease of navigation
Goals
◆
Understand how recruiters and clients use portfolios
◆
Identify common best practices
◆
Test ease of navigation
Methods
◆
Reviewed other portfolio sites
◆
Shared drafts with peers
◆
Gathered recruiter feedback
Methods
◆
Reviewed other portfolio sites
◆
Shared drafts with peers
◆
Gathered recruiter feedback
Methods
◆
Reviewed other portfolio sites
◆
Shared drafts with peers
◆
Gathered recruiter feedback
Methods
◆
Reviewed other portfolio sites
◆
Shared drafts with peers
◆
Gathered recruiter feedback
Methods
◆
Reviewed other portfolio sites
◆
Shared drafts with peers
◆
Gathered recruiter feedback
Insights
◆
Recruiters skim content quickly → need summaries
◆
Clients want process depth + visuals
◆
Navigation must be straightforward
Insights
◆
Recruiters skim content quickly → need summaries
◆
Clients want process depth + visuals
◆
Navigation must be straightforward
Insights
◆
Recruiters skim content quickly → need summaries
◆
Clients want process depth + visuals
◆
Navigation must be straightforward
Insights
◆
Recruiters skim content quickly → need summaries
◆
Clients want process depth + visuals
◆
Navigation must be straightforward
Insights
◆
Recruiters skim content quickly → need summaries
◆
Clients want process depth + visuals
◆
Navigation must be straightforward
Users & Pain Points
Users & Pain Points
Users & Pain Points
Users & Pain Points
Users & Pain Points
Recruiters
◆
Skim quickly
◆
Want outcomes up front
◆
Dislike overly long pages
Recruiters
◆
Skim quickly
◆
Want outcomes up front
◆
Dislike overly long pages
Recruiters
◆
Skim quickly
◆
Want outcomes up front
◆
Dislike overly long pages
Recruiters
◆
Skim quickly
◆
Want outcomes up front
◆
Dislike overly long pages
Recruiters
◆
Skim quickly
◆
Want outcomes up front
◆
Dislike overly long pages
Clients
◆
Value process and visuals
◆
Need relevant work examples
◆
Expect a professional but simple layout
Clients
◆
Value process and visuals
◆
Need relevant work examples
◆
Expect a professional but simple layout
Clients
◆
Value process and visuals
◆
Need relevant work examples
◆
Expect a professional but simple layout
Clients
◆
Value process and visuals
◆
Need relevant work examples
◆
Expect a professional but simple layout
Clients
◆
Value process and visuals
◆
Need relevant work examples
◆
Expect a professional but simple layout
Process
Process
Process
Process
Process
1.
Built directly in Framer, skipping wireframes.
2.
Tested different layouts + nav patterns.
3.
Simplified after recruiter feedback.
4.
Created reusable case study sections.
1.
Built directly in Framer, skipping wireframes.
2.
Tested different layouts + nav patterns.
3.
Simplified after recruiter feedback.
4.
Created reusable case study sections.
1.
Built directly in Framer, skipping wireframes.
2.
Tested different layouts + nav patterns.
3.
Simplified after recruiter feedback.
4.
Created reusable case study sections.
1.
Built directly in Framer, skipping wireframes.
2.
Tested different layouts + nav patterns.
3.
Simplified after recruiter feedback.
4.
Created reusable case study sections.
1.
Built directly in Framer, skipping wireframes.
2.
Tested different layouts + nav patterns.
3.
Simplified after recruiter feedback.
4.
Created reusable case study sections.
Branding
◆
Logo — A raven silhouette with a single pixel above its head, representing creativity guided by precision. Works at small and large scales.
◆
Colour Scheme — Inspired by the raven: deep purples and blues for atmosphere, with yellow accents to draw attention to important actions and links.
◆
Background — Flowing gradient background symbolising creative energy, contrasted with clean, pixel-perfect layouts.
Branding
◆
Logo — A raven silhouette with a single pixel above its head, representing creativity guided by precision. Works at small and large scales.
◆
Colour Scheme — Inspired by the raven: deep purples and blues for atmosphere, with yellow accents to draw attention to important actions and links.
◆
Background — Flowing gradient background symbolising creative energy, contrasted with clean, pixel-perfect layouts.
Branding
◆
Logo — A raven silhouette with a single pixel above its head, representing creativity guided by precision. Works at small and large scales.
◆
Colour Scheme — Inspired by the raven: deep purples and blues for atmosphere, with yellow accents to draw attention to important actions and links.
◆
Background — Flowing gradient background symbolising creative energy, contrasted with clean, pixel-perfect layouts.
Branding
◆
Logo — A raven silhouette with a single pixel above its head, representing creativity guided by precision. Works at small and large scales.
◆
Colour Scheme — Inspired by the raven: deep purples and blues for atmosphere, with yellow accents to draw attention to important actions and links.
◆
Background — Flowing gradient background symbolising creative energy, contrasted with clean, pixel-perfect layouts.
Branding
◆
Logo — A raven silhouette with a single pixel above its head, representing creativity guided by precision. Works at small and large scales.
◆
Colour Scheme — Inspired by the raven: deep purples and blues for atmosphere, with yellow accents to draw attention to important actions and links.
◆
Background — Flowing gradient background symbolising creative energy, contrasted with clean, pixel-perfect layouts.
Final Solution
◆
Responsive site with scannable case studies
◆
Balanced layouts for recruiters and clients
◆
CMS for fast project updates
Final Solution
◆
Responsive site with scannable case studies
◆
Balanced layouts for recruiters and clients
◆
CMS for fast project updates
Final Solution
◆
Responsive site with scannable case studies
◆
Balanced layouts for recruiters and clients
◆
CMS for fast project updates
Final Solution
◆
Responsive site with scannable case studies
◆
Balanced layouts for recruiters and clients
◆
CMS for fast project updates
Final Solution
◆
Responsive site with scannable case studies
◆
Balanced layouts for recruiters and clients
◆
CMS for fast project updates
Impact & Results
Impact & Results
Impact & Results
Impact & Results
Impact & Results
◆
Recruiters skimmed case studies in ~2 minutes
◆
Helped me secure 3 interviews in the first month
◆
New projects added in <30 minutes
◆
Recruiters skimmed case studies in ~2 minutes
◆
Helped me secure 3 interviews in the first month
◆
New projects added in <30 minutes
◆
Recruiters skimmed case studies in ~2 minutes
◆
Helped me secure 3 interviews in the first month
◆
New projects added in <30 minutes
◆
Recruiters skimmed case studies in ~2 minutes
◆
Helped me secure 3 interviews in the first month
◆
New projects added in <30 minutes
◆
Recruiters skimmed case studies in ~2 minutes
◆
Helped me secure 3 interviews in the first month
◆
New projects added in <30 minutes
Reflection
Designing for myself was harder than any client project — I second-guessed layouts, colours, and copy constantly. Getting feedback from recruiters helped me simplify and put outcomes higher up, which made the site stronger. I also realised how much time a CMS saves when updating content; it turned something I used to dread into a quick routine. In the future, I’d like to improve it with subtle motion and more storytelling elements to keep the work engaging without overcomplicating it.
Reflection
Designing for myself was harder than any client project — I second-guessed layouts, colours, and copy constantly. Getting feedback from recruiters helped me simplify and put outcomes higher up, which made the site stronger. I also realised how much time a CMS saves when updating content; it turned something I used to dread into a quick routine. In the future, I’d like to improve it with subtle motion and more storytelling elements to keep the work engaging without overcomplicating it.
Reflection
Designing for myself was harder than any client project — I second-guessed layouts, colours, and copy constantly. Getting feedback from recruiters helped me simplify and put outcomes higher up, which made the site stronger. I also realised how much time a CMS saves when updating content; it turned something I used to dread into a quick routine. In the future, I’d like to improve it with subtle motion and more storytelling elements to keep the work engaging without overcomplicating it.
Reflection
Designing for myself was harder than any client project — I second-guessed layouts, colours, and copy constantly. Getting feedback from recruiters helped me simplify and put outcomes higher up, which made the site stronger. I also realised how much time a CMS saves when updating content; it turned something I used to dread into a quick routine. In the future, I’d like to improve it with subtle motion and more storytelling elements to keep the work engaging without overcomplicating it.
Reflection
Designing for myself was harder than any client project — I second-guessed layouts, colours, and copy constantly. Getting feedback from recruiters helped me simplify and put outcomes higher up, which made the site stronger. I also realised how much time a CMS saves when updating content; it turned something I used to dread into a quick routine. In the future, I’d like to improve it with subtle motion and more storytelling elements to keep the work engaging without overcomplicating it.
Like What You See?
Enjoyed this case study? If you’d like to talk about your product, let’s chat.
Like What You See?
Enjoyed this case study? If you’d like to talk about your product, let’s chat.
Like What You See?
Enjoyed this case study? If you’d like to talk about your product, let’s chat.
Like What You See?
Enjoyed this case study? If you’d like to talk about your product, let’s chat.
Like What You See?
Enjoyed this case study? If you’d like to talk about your product, let’s chat.