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
In two weeks I rebuilt my portfolio directly in Framer. I focused on making reusable layouts for case studies, simple navigation, and a CMS for quick updates. The aim was to make it easier for recruiters to skim my work and for me to maintain the site over time.
Project Scope
In two weeks I rebuilt my portfolio directly in Framer. I focused on making reusable layouts for case studies, simple navigation, and a CMS for quick updates. The aim was to make it easier for recruiters to skim my work and for me to maintain the site over time.
Project Scope
In two weeks I rebuilt my portfolio directly in Framer. I focused on making reusable layouts for case studies, simple navigation, and a CMS for quick updates. The aim was to make it easier for recruiters to skim my work and for me to maintain the site over time.
Project Scope
In two weeks I rebuilt my portfolio directly in Framer. I focused on making reusable layouts for case studies, simple navigation, and a CMS for quick updates. The aim was to make it easier for recruiters to skim my work and for me to maintain the site over time.
Project Scope
In two weeks I rebuilt my portfolio directly in Framer. I focused on making reusable layouts for case studies, simple navigation, and a CMS for quick updates. The aim was to make it easier for recruiters to skim my work and for me to maintain the site over time.
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
Impact & Results
Impact & Results
Impact & Results
Impact & Results
Impact & Results
◆
Case studies could be skimmed end-to-end in about 2 minutes during usability testing
◆
Helped me secure 3 interview invitations within the first month of launch
◆
New projects can now be added in less than 30 minutes
◆
Case studies could be skimmed end-to-end in about 2 minutes during usability testing
◆
Helped me secure 3 interview invitations within the first month of launch
◆
New projects can now be added in less than 30 minutes
◆
Case studies could be skimmed end-to-end in about 2 minutes during usability testing
◆
Helped me secure 3 interview invitations within the first month of launch
◆
New projects can now be added in less than 30 minutes
◆
Case studies could be skimmed end-to-end in about 2 minutes during usability testing
◆
Helped me secure 3 interview invitations within the first month of launch
◆
New projects can now be added in less than 30 minutes
◆
Case studies could be skimmed end-to-end in about 2 minutes during usability testing
◆
Helped me secure 3 interview invitations within the first month of launch
◆
New projects can now be added in less than 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 it directly in Framer with no wireframes, using it as a sandbox to learn the tool and improve my design skills.
2.
Tried different case study layouts and asked peers which were easiest to read.
3.
Researched what recruiters look for first so the page is easy to skim, then reordered sections to show outcomes earlier.
4.
Designed reusable components like case study blocks and dividers to keep things consistent.
5.
Set up a CMS and added a mock case study to confirm updates are quick.
1.
Built it directly in Framer with no wireframes, using it as a sandbox to learn the tool and improve my design skills.
2.
Tried different case study layouts and asked peers which were easiest to read.
3.
Researched what recruiters look for first so the page is easy to skim, then reordered sections to show outcomes earlier.
4.
Designed reusable components like case study blocks and dividers to keep things consistent.
5.
Set up a CMS and added a mock case study to confirm updates are quick.
1.
Built it directly in Framer with no wireframes, using it as a sandbox to learn the tool and improve my design skills.
2.
Tried different case study layouts and asked peers which were easiest to read.
3.
Researched what recruiters look for first so the page is easy to skim, then reordered sections to show outcomes earlier.
4.
Designed reusable components like case study blocks and dividers to keep things consistent.
5.
Set up a CMS and added a mock case study to confirm updates are quick.
1.
Built it directly in Framer with no wireframes, using it as a sandbox to learn the tool and improve my design skills.
2.
Tried different case study layouts and asked peers which were easiest to read.
3.
Researched what recruiters look for first so the page is easy to skim, then reordered sections to show outcomes earlier.
4.
Designed reusable components like case study blocks and dividers to keep things consistent.
5.
Set up a CMS and added a mock case study to confirm updates are quick.
1.
Built it directly in Framer with no wireframes, using it as a sandbox to learn the tool and improve my design skills.
2.
Tried different case study layouts and asked peers which were easiest to read.
3.
Researched what recruiters look for first so the page is easy to skim, then reordered sections to show outcomes earlier.
4.
Designed reusable components like case study blocks and dividers to keep things consistent.
5.
Set up a CMS and added a mock case study to confirm updates are quick.
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 portfolio site built in Framer
◆
Reusable layouts and components for fast updates
◆
Tailored for both clients and potential recruiters
Final Solution
◆
Responsive portfolio site built in Framer
◆
Reusable layouts and components for fast updates
◆
Tailored for both clients and potential recruiters
Final Solution
◆
Responsive portfolio site built in Framer
◆
Reusable layouts and components for fast updates
◆
Tailored for both clients and potential recruiters
Final Solution
◆
Responsive portfolio site built in Framer
◆
Reusable layouts and components for fast updates
◆
Tailored for both clients and potential recruiters
Final Solution
◆
Responsive portfolio site built in Framer
◆
Reusable layouts and components for fast updates
◆
Tailored for both clients and potential recruiters
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.