JI

My process

Curious about how I designed this portfolio site?

Here you can follow along with my design process for my personal portfolio.

Project overview

The product

A product design portfolio crafted to highlight my end-to-end design process, fluency with industry-standard tools, and thoughtful integration of AI to enhance user-centered solutions.

Project goal

Design and execute a self-initiated project that showcases my product design expertise, technical proficiency, and ability to apply design thinking from concept to implementation.

Understanding the user

A portfolio case study within a portfolio. Let’s get meta. Inception.

Kaitlyn Toby

Kaitlyn Toby

Hiring manager

“I’m mindful of how important first impressions are-this applies to both me and the applicant”

Interests & traits

Invested in keeping up with digital trends relating to HR and technology.

Enjoys culinary arts, exemplified by trying new recipes with family during weekends.

Passionate about community involvement through volunteering locally when possible.

Opportunities

An expertise preview demonstrating the candidate's proficiency

Include testimonials from colleagues or supervisors (with permission) that speak to your design abilities and contributions without breaching confidentiality.

How might we

To address the challenge of showcasing skills while respecting NDA constraints, I analyzed portfolios from industry professionals I admire. By identifying effective design strategies—such as storytelling techniques, anonymized case studies, and visual communication—I gathered insights on how to create a compelling and compliant portfolio. This research directly informed key decisions in my own portfolio design.

Solutions

Develop case studies that focus on the design process, methodologies, and outcomes without revealing sensitive information about clients or products.

Include testimonials from colleagues or supervisors (with permission) that speak to my design abilities and contributions.

Engage in self-initiated projects that reflect my interests and expertise, allowing you to demonstrate your design thinking and execution.

Use storytelling techniques to describe your role in team projects, focusing on your specific contributions rather than the overall project details.

Create a visual timeline of your career progression in design, highlighting key skills acquired and milestones achieved.

Competitive analysis

I gathered portfolio examples from industry professionals I admire and analyzed each one to identify effective design elements. This structured review informed and inspired key decisions in my own portfolio.

Design toolbox

Figma
Webflow
Notion
A11y
Wave evaluation tool

I primarily use Figma and FigJam for UX research and wireframing, where I create detailed annotations and clearly labeled interaction states to support a seamless handoff to developers. My design systems are built with implementation in mind, helping the team efficiently push sites live. Once designs are finalized, I translate them into Webflow to launch the site. To manage cross-functional deliverables—such as branding, copy documents, and interdepartmental assets—I build structured Notion Wikis. While storytelling is crucial, I believe clear and organized documentation is essential. Throughout the design process, I rigorously test wireframes using the A11y plugin, and after development, I ensure WCAG compliance with tools like the WAVE Evaluation Tool and DHS ANDI.

AI Integrations

Qoqo
khroma
uizard
figma
chat gpt

I leveraged several AI tools throughout the portfolio process: QoQo AI helped refine my persona and 'How Might We' statement, while Khroma guided the selection of my Malibu Barbie-inspired color palette. ChatGPT supported font pairing decisions and UX writing edits. For layout exploration, Uizard and Figma's First Draft feature provided valuable design prompts and structure.

Testing

heart

Usability study findings

Moderated user testing with 6 users ranging in age from 30-60 and technical proficiency from minimal to Product Designer

Round 1 findings

  • Users wanted to hear more about my responsibilities, especially if they involved managing other people
  • One user suggested highlighting my results/metrics/successes in digestible bold numbers
  • A little confused about how this differentiates from a resume

Round 2 findings

  • Users felt the information architecture could be rearranged to feature my credentials sooner
  • Users mentioned how they were expecting micro interactions when hovering over the decorative heart emojis

LoFi

During the LoFi process I check I’m always relating back to:

  • The product
  • The problem
  • The HWM
Low fidelity wireframe mock up

MidFi

MidFi designs are adjusted based off of user testing. Branding is applied to give an idea of the feel of the final site.

Middle fidelity wireframe mock up

HiFi

HiFi designs are adjusted based off of user testing. Branding is applied and copy is edited. The designs are refined and checked that they align with the original research.

High fidelity wireframe mock up

Accessibility Considerations

AAA compliant color contrast pairings

Using WAVE Evaluation tool to manually check for accessibility compliance

Using ANDI Evaluation tool to test for Section 508 compliance with my Trusted Tester Certificate (TT-2402-05544)

Trusted Tester

Lessons learned

Through user testing, I learned to really focus on the information architecture of the site.

Look into the Figma site templates and blocks before beginning a design.

Next steps

Ask for feedback from hiring managers to improve the site.

Impact

I’m tracking metrics to get an idea of the impact this site has. I’ll keep ya’ll posted.

I’m looking to share a usability score, time on task, and engagement analytics. I’m at “0” for now because I just published the site May 29, 2026.

JI

My process

Curious about how I designed this portfolio site?

Here you can follow along with my design process for my personal portfolio.

Project overview

The product

A product design portfolio crafted to highlight my end-to-end design process, fluency with industry-standard tools, and thoughtful integration of AI to enhance user-centered solutions.

Project goal

Design and execute a self-initiated project that showcases my product design expertise, technical proficiency, and ability to apply design thinking from concept to implementation.

Understanding the user

A portfolio case study within a portfolio. Let’s get meta. Inception.

Kaitlyn Toby

Kaitlyn Toby

Hiring manager

“I’m mindful of how important first impressions are-this applies to both me and the applicant”

Interests & traits

Invested in keeping up with digital trends relating to HR and technology.

Enjoys culinary arts, exemplified by trying new recipes with family during weekends.

Passionate about community involvement through volunteering locally when possible.

Opportunities

An expertise preview demonstrating the candidate's proficiency

Include testimonials from colleagues or supervisors (with permission) that speak to your design abilities and contributions without breaching confidentiality.

How might we

To address the challenge of showcasing skills while respecting NDA constraints, I analyzed portfolios from industry professionals I admire. By identifying effective design strategies—such as storytelling techniques, anonymized case studies, and visual communication—I gathered insights on how to create a compelling and compliant portfolio. This research directly informed key decisions in my own portfolio design.

Solutions

Develop case studies that focus on the design process, methodologies, and outcomes without revealing sensitive information about clients or products.

Include testimonials from colleagues or supervisors (with permission) that speak to my design abilities and contributions.

Engage in self-initiated projects that reflect my interests and expertise, allowing you to demonstrate your design thinking and execution.

Use storytelling techniques to describe your role in team projects, focusing on your specific contributions rather than the overall project details.

Create a visual timeline of your career progression in design, highlighting key skills acquired and milestones achieved.

Competitive analysis

I gathered portfolio examples from industry professionals I admire and analyzed each one to identify effective design elements. This structured review informed and inspired key decisions in my own portfolio.

Design toolbox

Figma
Webflow
Notion
A11y
Wave evaluation tool

I primarily use Figma and FigJam for UX research and wireframing, where I create detailed annotations and clearly labeled interaction states to support a seamless handoff to developers. My design systems are built with implementation in mind, helping the team efficiently push sites live. Once designs are finalized, I translate them into Webflow to launch the site. To manage cross-functional deliverables—such as branding, copy documents, and interdepartmental assets—I build structured Notion Wikis. While storytelling is crucial, I believe clear and organized documentation is essential. Throughout the design process, I rigorously test wireframes using the A11y plugin, and after development, I ensure WCAG compliance with tools like the WAVE Evaluation Tool and DHS ANDI.

AI Integrations

Qoqo
khroma
uizard
Fgima
chat gpt

I leveraged several AI tools throughout the portfolio process: QoQo AI helped refine my persona and 'How Might We' statement, while Khroma guided the selection of my Malibu Barbie-inspired color palette. ChatGPT supported font pairing decisions and UX writing edits. For layout exploration, Uizard and Figma's First Draft feature provided valuable design prompts and structure.

Testing

heart

Usability study findings

Moderated user testing with 6 users ranging in age from 30-60 and technical proficiency from minimal to Product Designer

Round 1 findings

  • Users wanted to hear more about my responsibilities, especially if they involved managing other people
  • One user suggested highlighting my results/metrics/successes in digestible bold numbers
  • A little confused about how this differentiates from a resume

Round 2 findings

  • Users felt the information architecture could be rearranged to feature my credentials sooner
  • Users mentioned how they were expecting micro interactions when hovering over the decorative heart emojis

LoFi

During the LoFi process I check I’m always relating back to:

  • The product
  • The problem
  • The HWM
Low fidelity wireframe mock up

MidFi

MidFi designs are adjusted based off of user testing. Branding is applied to give an idea of the feel of the final site.

Middle fidelity wireframe mock up

HiFi

HiFi designs are adjusted based off of user testing. Branding is applied and copy is edited. The designs are refined and checked that they align with the original research.

High fidelity wireframe mock up

Accessibility Considerations

AAA compliant color contrast pairings

Using WAVE Evaluation tool to manually check for accessibility compliance

Using ANDI Evaluation tool to test for Section 508 compliance with my Trusted Tester Certificate (TT-2402-05544)

Trusted Tester

Lessons learned

Through user testing, I learned to really focus on the information architecture of the site.

Look into the Figma site templates and blocks before beginning a design.

Next steps

Ask for feedback from hiring managers to improve the site.

Impact

I’m tracking metrics to get an idea of the impact this site has. I’ll keep ya’ll posted.

I’m looking to share a usability score, time on task, and engagement analytics. I’m at “0” for now because I just published the site May 29, 2026.

My process

Curious about how I designed this portfolio site?

Here you can follow along with my design process for my personal portfolio.

Project overview

The product

A product design portfolio crafted to highlight my end-to-end design process, fluency with industry-standard tools, and thoughtful integration of AI to enhance user-centered solutions.

Project goal

Design and execute a self-initiated project that showcases my product design expertise, technical proficiency, and ability to apply design thinking from concept to implementation.

Understanding the user

A portfolio case study within a portfolio. Let’s get meta. Inception.

Kaitlyn Toby

Kaitlyn Toby

Hiring manager

“I’m mindful of how important first impressions are-this applies to both me and the applicant”

Interests & traits

Invested in keeping up with digital trends relating to HR and technology.

Enjoys culinary arts, exemplified by trying new recipes with family during weekends.

Passionate about community involvement through volunteering locally when possible.

Opportunities

An expertise preview demonstrating the candidate's proficiency

Include testimonials from colleagues or supervisors (with permission) that speak to your design abilities and contributions without breaching confidentiality.

How might we

To address the challenge of showcasing skills while respecting NDA constraints, I analyzed portfolios from industry professionals I admire. By identifying effective design strategies—such as storytelling techniques, anonymized case studies, and visual communication—I gathered insights on how to create a compelling and compliant portfolio. This research directly informed key decisions in my own portfolio design.

Solutions

Develop case studies that focus on the design process, methodologies, and outcomes without revealing sensitive information about clients or products.

Include testimonials from colleagues or supervisors (with permission) that speak to my design abilities and contributions.

Engage in self-initiated projects that reflect my interests and expertise, allowing you to demonstrate your design thinking and execution.

Use storytelling techniques to describe your role in team projects, focusing on your specific contributions rather than the overall project details.

Create a visual timeline of your career progression in design, highlighting key skills acquired and milestones achieved.

Competitive analysis

I gathered portfolio examples from industry professionals I admire and analyzed each one to identify effective design elements. This structured review informed and inspired key decisions in my own portfolio.

Design toolbox

Figma
Webflow
Notion
A11y
Wave evaluation tool

I primarily use Figma and FigJam for UX research and wireframing, where I create detailed annotations and clearly labeled interaction states to support a seamless handoff to developers. My design systems are built with implementation in mind, helping the team efficiently push sites live. Once designs are finalized, I translate them into Webflow to launch the site. To manage cross-functional deliverables—such as branding, copy documents, and interdepartmental assets—I build structured Notion Wikis. While storytelling is crucial, I believe clear and organized documentation is essential. Throughout the design process, I rigorously test wireframes using the A11y plugin, and after development, I ensure WCAG compliance with tools like the WAVE Evaluation Tool and DHS ANDI.

AI Integrations

Qoqo
khroma
uizard
Figma
chat gpt

I leveraged several AI tools throughout the portfolio process: QoQo AI helped refine my persona and 'How Might We' statement, while Khroma guided the selection of my Malibu Barbie-inspired color palette. ChatGPT supported font pairing decisions and UX writing edits. For layout exploration, Uizard and Figma's First Draft feature provided valuable design prompts and structure.

Testing

Usability study findings

Moderated user testing with 6 users ranging in age from 30-60 and technical proficiency from minimal to Product Designer

Round 1 findings

  • Users wanted to hear more about my responsibilities, especially if they involved managing other people
  • One user suggested highlighting my results/metrics/successes in digestible bold numbers
  • A little confused about how this differentiates from a resume

Round 2 findings

  • Users felt the information architecture could be rearranged to feature my credentials sooner
  • Users mentioned how they were expecting micro interactions when hovering over the decorative heart emojis

LoFi

During the LoFi process I check I’m always relating back to:

  • The product
  • The problem
  • The HWM
Low fidelity wireframe mock up

MidFi

MidFi designs are adjusted based off of user testing. Branding is applied to give an idea of the feel of the final site.

Middle fidelity wireframe mock up

HiFi

HiFi designs are adjusted based off of user testing. Branding is applied and copy is edited. The designs are refined and checked that they align with the original research.

High fidelity wireframe mock up

Accessibility Considerations

AAA compliant color contrast pairings

Using WAVE Evaluation tool to manually check for accessibility compliance

Using ANDI Evaluation tool to test for Section 508 compliance with my Trusted Tester Certificate (TT-2402-05544)

Trusted Tester

Lessons learned

Through user testing, I learned to really focus on the information architecture of the site.

Look into the Figma site templates and blocks before beginning a design.

Next steps

Ask for feedback from hiring managers to improve the site.

Impact

I’m tracking metrics to get an idea of the impact this site has. I’ll keep ya’ll posted.

I’m looking to share a usability score, time on task, and engagement analytics. I’m at “0” for now because I just published the site May 29, 2026.