Welcome to my Portfolio
Welcome to my Portfolio
I’m a UX/UI and product designer with
I’m a Web UX/UI and product designer with
9+ years of experience
9+ years of experience
9+ years of experience
9+ years of experience
9+ years of experience
9+ years of experience
9+ years of experience
9+ years of experience
9+ years of experience
9+ years of experience
creating clean, intuitive, and impactful
digital experiences. I’ve worked with clients from local businesses and early-stage start-ups to global brands and large federal contracts. With a background in fine art, graphic design, animation, and visual curation, I focus on turning complex ideas into thoughtful, user-first solutions with soul.
creating clean, intuitive, and impactful digital experiences. I’ve worked with clients from local businesses and early-stage start-ups to global brands and large federal contracts. With a background in graphic design, animation, and visual curation, I focus on turning complex ideas into thoughtful, user-first solutions that look great and work even better.
Welcome to my Portfolio
I’m a UX/UI and product designer with over
9 years of experience
9 years of experience
9 years of experience
9 years of experience
9 years of experience
creating clean, intuitive,
and impactful digital experiences. I’ve worked with clients from local businesses and early-stage start-ups to global brands and large federal contracts. With a background in graphic design, animation, and visual curation, I focus on turning complex ideas into thoughtful, user-first solutions that look great and work even better.
Welcome to my Portfolio
I’m a UX/UI and product designer with over
9 years of experience
9 years of experience
9 years of experience
9 years of experience
9 years of experience
creating clean, intuitive,
and impactful digital experiences. I’ve worked with clients from local businesses and early-stage start-ups to global brands and large federal contracts. With a background in graphic design, animation, and visual curation, I focus on turning complex ideas into thoughtful, user-first solutions that look great and work even better.
Tools which I use on a daily basis.
Tools which I use on a daily basis.
Tools which I use on a daily basis.
Spline
Place to design and collaborate in 3D
Spline
Place to design and collaborate in 3D
Figma
Design tool for creating and collaborating
Fireflies AI
AI Notetaker for Meetings
Spline
Place to design and collaborate in 3D
Spline
Place to design and collaborate in 3D
Figma
Design tool for creating and collaborating
Fireflies AI
AI Notetaker for Meetings
Get a glance of the instiutions I've served
Get a glance of the instiutions I've served
start-up
company internal work
internal web design,
graphics, and print work for
NETE
graphics, and print work for
NETE
NIAID
NIAID
NIGMS
NIGMS
wide array of federal clintele, primarily within the National Institute of Health (NIH)
wide array of federal clintele, primarily within the National Institute of Health (NIH)
over
over
over
39
39
39
sub-contracted projects
sub-contracted projects
sub-contracted projects
27
Projects
several long-term
Design Director, 3Lateral
start-up
company internal work
internal web design,
graphics, and print work for
NETE
Freelance
Freelance
for local companies
including logo work,
large-scale decals, and print
wide array of federal clintele, primarily within the National Institute of Health (NIH)
over
39
sub-contracted projects
27
Projects
several long-term
Explore My Projects
Explore My Projects
Our works are a blend of innovative thinking and practical solutions, ensuring they are both unique and effective.
Complex Internal Applications for the National Institute of Allergy and Infectious Diseases (NIAID)
Winner of two NIH awards, I specialize in designing complex, data-intensive applications for the health sector - transforming outdated workflows into intuitive, scalable systems. From replacing sprawling Excel exchanges to overhauling and recategorizing legacy apps, I’ve led multi-year design sprints that evolve alongside ever-growing data demands. I’ve also contributed to building and expanding a robust design system with hundreds of reusable components. For an in-depth case study, contact caitwerle@gmail.com.
Adobe XD & Figma
Complex Filtering
Multiple User Roles
Complex Internal Applications for the National Institute of Allergy and Infectious Diseases (NIAID)
Winner of two NIH awards, I specialize in designing complex, data-intensive applications for the health sector - transforming outdated workflows into intuitive, scalable systems. From replacing sprawling Excel exchanges to overhauling and recategorizing legacy apps, I’ve led multi-year design sprints that evolve alongside ever-growing data demands. I’ve also contributed to building and expanding a robust design system with hundreds of reusable components. For an in-depth case study, contact caitwerle@gmail.com.
Adobe XD & Figma
Complex Filtering
Multiple User Roles
Oxford-Cambridge Scholars Program (OxCam)
Fully implemented website redesign for NIH's Oxford-Cambridge Scholars Program OXCAM. This site aids prospective students, current students, and principal investigators navigating biomedical research. This design required in-depth conversation with stakeholders, educators, and students alike to execute the necessary requirements.
Photoshop & Adobe XD
Web & Mobile
Cross-institutional
Oxford-Cambridge Scholars Program (OxCam)
Fully implemented website redesign for NIH's Oxford-Cambridge Scholars Program OXCAM. This site aids prospective students, current students, and principal investigators navigating biomedical research. This design required in-depth conversation with stakeholders, educators, and students alike to execute the necessary requirements.
Photoshop & Adobe XD
Web & Mobile
Cross-institutional
The Vaccine Adjuvant Compendium (VAC) NIAID NIH
Public-facing website debut design for the National Institute of Allergy and Infectious Diseases (NIAID)’s Vaccine Adjuvant Compendium (VAC) program. For this system, I generated user workflows and in-depth mockups for both public users and internal PI scientists.
Multiple User Roles
Photoshop & Adobe XD
Approval Process
The Vaccine Adjuvant Compendium (VAC) NIAID NIH
Public-facing website debut design for the National Institute of Allergy and Infectious Diseases (NIAID)’s Vaccine Adjuvant Compendium (VAC) program. For this system, I generated user workflows and in-depth mockups for both public users and internal PI scientists.
Multiple User Roles
Photoshop & Adobe XD
Approval Process
Full Website Redesign for the National Institute of General Medical Sciences (NIGMS) NIH
Approved full redesign of the NIH’s NIGMS external browser and mobile website. This presented redesign effort is in development and anonymized for the a of archival mockups. Included are the Home Page mockup, a Mobile example, an Internal Mockup, and an Internal Wireframe example, to better illustrate my process.
Figma & Adobe XD
Web & Mobile
High-Volume
Full Website Redesign for the National Institute of General Medical Sciences (NIGMS) NIH
Approved full redesign of the NIH’s NIGMS external browser and mobile website. This presented redesign effort is in development and anonymized for the a of archival mockups. Included are the Home Page mockup, a Mobile example, an Internal Mockup, and an Internal Wireframe example, to better illustrate my process.
Figma & Adobe XD
Web & Mobile
High-Volume
Full Website Redesign for the National Institute of General Medical Sciences (NIGMS) NIH
Approved full redesign of the NIH’s NIGMS external browser and mobile website. This presented redesign effort is in development and anonymized for the a of archival mockups. Included are the Home Page mockup, a Mobile example, an Internal Mockup, and an Internal Wireframe example, to better illustrate my process.
Figma & Adobe XD
Web & Mobile
High-Volume
Full Website Redesign for the National Institute of General Medical Sciences
(NIGMS) NIH
Approved full redesign of the NIH’s NIGMS external browser and mobile website. This presented redesign effort is in development and anonymized for the a of archival mockups. Included are the Home Page mockup, a Mobile example, an Internal Mockup, and an Internal Wireframe example, to better illustrate my process.
Figma & Adobe XD
Web & Mobile
High-Volume
The Vaccine Adjuvant Compendium (VAC) NIAID NIH
Public-facing website debut design for the National Institute of Allergy and Infectious Diseases (NIAID)’s Vaccine Adjuvant Compendium (VAC) program. For this system, I generated user workflows and in-depth mockups for both public users and internal PI scientists.
Multiple User Roles
Photoshop & Adobe XD
Approval Process
The Vaccine Adjuvant Compendium (VAC) NIAID NIH
Public-facing website debut design for the National Institute of Health (NIH), National Institute of Allergy and Infectious Diseases (NIAID)’s Vaccine Adjuvant Compendium (VAC) program. For this system, I generated user workflows and in-depth mockups for both public users and internal PI scientists. Public users will search and view at a read-only basis, while internal scientists will login to view, edit, add, approve, reject, and request changes to Adjuvant Vaccines.
PSD & Adobe XD
Multiple User Roles
Approval Process
Oxford-Cambridge Scholars Program (OxCam)
Fully implemented website redesign for NIH's Oxford-Cambridge Scholars Program OXCAM. This site aids prospective students, current students, and principal investigators navigating biomedical research. This design required in-depth conversation with stakeholders, educators, and students alike to execute the necessary requirements.
Photoshop & Adobe XD
Web & Mobile
Cross-institutional
Oxford-Cambridge Scholars Program (OxCam)
Fully implemented website redesign for NIH's Oxford-Cambridge Scholars Program OXCAM. This site aids prospective students, current students, and principal investigators in their higher education journey navigating biomedical research. This design required in-depth conversation with stakeholders, educators, and students alike to execute the necessary requirements.
PSD & Adobe XD
Web & Mobile
Cross-institutional
Complex Internal Applications for the National Institute of Allergy and Infectious Diseases (NIAID)
Winner of two NIH awards, I specialize in designing complex, data-intensive applications for the health sector - transforming outdated workflows into intuitive, scalable systems. From replacing sprawling Excel exchanges to overhauling and recategorizing legacy apps, I’ve led multi-year design sprints that evolve alongside ever-growing data demands. I’ve also contributed to building and expanding a robust design system with hundreds of reusable components. For an in-depth case study, contact caitwerle@gmail.com.
Adobe XD & Figma
Complex Filtering
Multiple User Roles
Complex Internal Applications for the National Institute of Allergy and Infectious Diseases (NIAID)
Winner of two NIH awards, I specialized in designing complex, data-intensive applications for the health sector - transforming outdated workflows into intuitive, scalable systems. From replacing sprawling Excel exchanges to overhauling and recategorizing legacy apps, I’ve led multi-year design sprints that evolve alongside ever-growing data demands. I’ve also contributed to building and expanding a robust design system with hundreds of reusable components. For an in-depth case study, contact caitwerle@gmail.com.
Adobe XD & Figma
Complex Filtering
Multiple User Roles
Discover & Understand
I begin every project by getting to know the users, stakeholders, and product goals.
For new products, I conduct interviews, competitive analysis, and research to define user needs.
For redesigns, I dive into analytics, usability tests, and customer feedback to uncover what is and is not working.
Test What Already Exists
(for Redesigns)When improving an existing product, I validate assumptions through usability testing.
I observe how real users navigate the current experience and identify pain points.
These insights help prioritize improvements that matter most.
Map the Experience
With research in hand, I organize information and define flows.
I sketch out user journeys, task flows, and site architecture.
This sets the foundation for intuitive, goal-oriented design.
Wireframe & Ideate
I create low-fidelity wireframes to explore structure and function without distractions.
This stage is about aligning layout and logic with the user’s goals.
Wireframes help the team make fast, informed decisions early on.
Validate with Users
Before development begins, I test the prototype with users.
I gather feedback on usability, clarity, and flow.
For redesigns, I compare performance to the original to ensure we’re improving the experience.
Iterate & Refine
Based on feedback, I refine designs and re-test if needed.
I work closely with stakeholders to ensure the design meets both user and business needs.
This step repeats as many times as needed to get things right.
Support Launch & QA
I assist during implementation to ensure pixel-perfect results.
I review staging builds, test interactions, and flag any issues.
I also help verify accessibility and responsive behavior.
Measure & Learn
After launch, I keep learning from users.
I track metrics, review behavior data, and continue usability testing.
These findings guide future updates and long-term growth.
Discover & Understand
I begin every project by getting to know the users, stakeholders, and product goals.
For new products, I conduct interviews, competitive analysis, and research to define user needs.
For redesigns, I dive into analytics, usability tests, and customer feedback to uncover what is and is not working.
Test What Already Exists
(for Redesigns)When improving an existing product, I validate assumptions through usability testing.
I observe how real users navigate the current experience and identify pain points.
These insights help prioritize improvements that matter most.
Map the Experience
With research in hand, I organize information and define flows.
I sketch out user journeys, task flows, and site architecture.
This sets the foundation for intuitive, goal-oriented design.
Wireframe & Ideate
I create low-fidelity wireframes to explore structure and function without distractions.
This stage is about aligning layout and logic with the user’s goals.
Wireframes help the team make fast, informed decisions early on.
Validate with Users
Before development begins, I test the prototype with users.
I gather feedback on usability, clarity, and flow.
For redesigns, I compare performance to the original to ensure we’re improving the experience.
Iterate & Refine
Based on feedback, I refine designs and re-test if needed.
I work closely with stakeholders to ensure the design meets both user and business needs.
This step repeats as many times as needed to get things right.
Support Launch & QA
I assist during implementation to ensure pixel-perfect results.
I review staging builds, test interactions, and flag any issues.
I also help verify accessibility and responsive behavior.
Measure & Learn
After launch, I keep learning from users.
I track metrics, review behavior data, and continue usability testing.
These findings guide future updates and long-term growth.
Discover & Understand
I begin every project by getting to know the users, stakeholders, and product goals.
For new products, I conduct interviews, competitive analysis, and research to define user needs.
For redesigns, I dive into analytics, usability tests, and customer feedback to uncover what is and is not working.
Test What Already Exists
(for Redesigns)When improving an existing product, I validate assumptions through usability testing.
I observe how real users navigate the current experience and identify pain points.
These insights help prioritize improvements that matter most.
Map the Experience
With research in hand, I organize information and define flows.
I sketch out user journeys, task flows, and site architecture.
This sets the foundation for intuitive, goal-oriented design.
Wireframe & Ideate
I create low-fidelity wireframes to explore structure and function without distractions.
This stage is about aligning layout and logic with the user’s goals.
Wireframes help the team make fast, informed decisions early on.
Validate with Users
Before development begins, I test the prototype with users.
I gather feedback on usability, clarity, and flow.
For redesigns, I compare performance to the original to ensure we’re improving the experience.
Iterate & Refine
Based on feedback, I refine designs and re-test if needed.
I work closely with stakeholders to ensure the design meets both user and business needs.
This step repeats as many times as needed to get things right.
Support Launch & QA
I assist during implementation to ensure pixel-perfect results.
I review staging builds, test interactions, and flag any issues.
I also help verify accessibility and responsive behavior.
Measure & Learn
After launch, I keep learning from users.
I track metrics, review behavior data, and continue usability testing.
These findings guide future updates and long-term growth.
Discover & Understand
I begin every project by getting to know the users, stakeholders, and product goals.
For new products, I conduct interviews, competitive analysis, and research to define user needs.
For redesigns, I dive into analytics, usability tests, and customer feedback to uncover what is and is not working.
Test What Already Exists
(for Redesigns)When improving an existing product, I validate assumptions through usability testing.
I observe how real users navigate the current experience and identify pain points.
These insights help prioritize improvements that matter most.
Map the Experience
With research in hand, I organize information and define flows.
I sketch out user journeys, task flows, and site architecture.
This sets the foundation for intuitive, goal-oriented design.
Wireframe & Ideate
I create low-fidelity wireframes to explore structure and function without distractions.
This stage is about aligning layout and logic with the user’s goals.
Wireframes help the team make fast, informed decisions early on.
Validate with Users
Before development begins, I test the prototype with users.
I gather feedback on usability, clarity, and flow.
For redesigns, I compare performance to the original to ensure we’re improving the experience.
Iterate & Refine
Based on feedback, I refine designs and re-test if needed.
I work closely with stakeholders to ensure the design meets both user and business needs.
This step repeats as many times as needed to get things right.
Support Launch & QA
I assist during implementation to ensure pixel-perfect results.
I review staging builds, test interactions, and flag any issues.
I also help verify accessibility and responsive behavior.
Measure & Learn
After launch, I keep learning from users.
I track metrics, review behavior data, and continue usability testing.
These findings guide future updates and long-term growth.
Overall Process
Collaborative, research-driven UX/UI process - from gathering requirements and user insights to wire-framing, prototyping, and delivering accessible, intuitive designs.
Test What Already Exists (for Redesigns)
When improving an existing product, I validate assumptions through usability testing.
I observe how real users navigate the current experience and identify pain points.
These insights help prioritize improvements that matter most.
Map the Experience
With research in hand, I organize information and define flows.
I sketch out user journeys, task flows, and site architecture.
This sets the foundation for intuitive, goal-oriented design.
Wireframe & Ideate
I create low-fidelity wireframes to explore structure and function without distractions.
This stage is about aligning layout and logic with the user’s goals.
Wireframes help the team make fast, informed decisions early on.
Design & Prototype
Next, I transform wireframes into high-fidelity mockups that reflect the final visual direction.
I use design systems or create components tailored to the brand.
I build interactive prototypes to demonstrate functionality and transitions.
Validate with Users
Before development begins, I test the prototype with users.
I gather feedback on usability, clarity, and flow.
For redesigns, I compare performance to the original to ensure we’re improving the experience.
Iterate & Refine
Based on feedback, I refine designs and re-test if needed.
I work closely with stakeholders to ensure the design meets both user and business needs.
This step repeats as many times as needed to get things right.
Handoff to Development
Once approved, I prepare detailed handoff materials.
I annotate designs, organize assets, and ensure devs have everything they need.
I stay involved to answer questions and preserve design intent.
Support Launch & QA
I assist during implementation to ensure pixel-perfect results.
I review staging builds, test interactions, and flag any issues.
I also help verify accessibility and responsive behavior.
Measure & Learn
After launch, I keep learning from users.
I track metrics, review behavior data, and continue usability testing.
These findings guide future updates and long-term growth.
Test What Already Exists (for Redesigns)
When improving an existing product, I validate assumptions through usability testing.
I observe how real users navigate the current experience and identify pain points.
These insights help prioritize improvements that matter most.
Map the Experience
With research in hand, I organize information and define flows.
I sketch out user journeys, task flows, and site architecture.
This sets the foundation for intuitive, goal-oriented design.
Wireframe & Ideate
I create low-fidelity wireframes to explore structure and function without distractions.
This stage is about aligning layout and logic with the user’s goals.
Wireframes help the team make fast, informed decisions early on.
Design & Prototype
Next, I transform wireframes into high-fidelity mockups that reflect the final visual direction.
I use design systems or create components tailored to the brand.
I build interactive prototypes to demonstrate functionality and transitions.
Validate with Users
Before development begins, I test the prototype with users.
I gather feedback on usability, clarity, and flow.
For redesigns, I compare performance to the original to ensure we’re improving the experience.
Iterate & Refine
Based on feedback, I refine designs and re-test if needed.
I work closely with stakeholders to ensure the design meets both user and business needs.
This step repeats as many times as needed to get things right.
Handoff to Development
Once approved, I prepare detailed handoff materials.
I annotate designs, organize assets, and ensure devs have everything they need.
I stay involved to answer questions and preserve design intent.
Support Launch & QA
I assist during implementation to ensure pixel-perfect results.
I review staging builds, test interactions, and flag any issues.
I also help verify accessibility and responsive behavior.
Measure & Learn
After launch, I keep learning from users.
I track metrics, review behavior data, and continue usability testing.
These findings guide future updates and long-term growth.
Test What Already Exists (for Redesigns)
When improving an existing product, I validate assumptions through usability testing.
I observe how real users navigate the current experience and identify pain points.
These insights help prioritize improvements that matter most.
Map the Experience
With research in hand, I organize information and define flows.
I sketch out user journeys, task flows, and site architecture.
This sets the foundation for intuitive, goal-oriented design.
Wireframe & Ideate
I create low-fidelity wireframes to explore structure and function without distractions.
This stage is about aligning layout and logic with the user’s goals.
Wireframes help the team make fast, informed decisions early on.
Design & Prototype
Next, I transform wireframes into high-fidelity mockups that reflect the final visual direction.
I use design systems or create components tailored to the brand.
I build interactive prototypes to demonstrate functionality and transitions.
Validate with Users
Before development begins, I test the prototype with users.
I gather feedback on usability, clarity, and flow.
For redesigns, I compare performance to the original to ensure we’re improving the experience.
Iterate & Refine
Based on feedback, I refine designs and re-test if needed.
I work closely with stakeholders to ensure the design meets both user and business needs.
This step repeats as many times as needed to get things right.
Handoff to Development
Once approved, I prepare detailed handoff materials.
I annotate designs, organize assets, and ensure devs have everything they need.
I stay involved to answer questions and preserve design intent.
Support Launch & QA
I assist during implementation to ensure pixel-perfect results.
I review staging builds, test interactions, and flag any issues.
I also help verify accessibility and responsive behavior.
Measure & Learn
After launch, I keep learning from users.
I track metrics, review behavior data, and continue usability testing.
These findings guide future updates and long-term growth.
Test What Already Exists (for Redesigns)
When improving an existing product, I validate assumptions through usability testing.
I observe how real users navigate the current experience and identify pain points.
These insights help prioritize improvements that matter most.
Map the Experience
With research in hand, I organize information and define flows.
I sketch out user journeys, task flows, and site architecture.
This sets the foundation for intuitive, goal-oriented design.
Wireframe & Ideate
I create low-fidelity wireframes to explore structure and function without distractions.
This stage is about aligning layout and logic with the user’s goals.
Wireframes help the team make fast, informed decisions early on.
Design & Prototype
Next, I transform wireframes into high-fidelity mockups that reflect the final visual direction.
I use design systems or create components tailored to the brand.
I build interactive prototypes to demonstrate functionality and transitions.
Validate with Users
Before development begins, I test the prototype with users.
I gather feedback on usability, clarity, and flow.
For redesigns, I compare performance to the original to ensure we’re improving the experience.
Iterate & Refine
Based on feedback, I refine designs and re-test if needed.
I work closely with stakeholders to ensure the design meets both user and business needs.
This step repeats as many times as needed to get things right.
Handoff to Development
Once approved, I prepare detailed handoff materials.
I annotate designs, organize assets, and ensure devs have everything they need.
I stay involved to answer questions and preserve design intent.
Support Launch & QA
I assist during implementation to ensure pixel-perfect results.
I review staging builds, test interactions, and flag any issues.
I also help verify accessibility and responsive behavior.
Measure & Learn
After launch, I keep learning from users.
I track metrics, review behavior data, and continue usability testing.
These findings guide future updates and long-term growth.
Built on Framer. Heavily manipulated and personalized with unique graphics. Base inspired by original template from Goran Babarogic.
Built on Framer. Heavily manipulated and personalized with unique graphics. Base inspired by original template from Goran Babarogic.
Built on Framer. Heavily manipulated and personalized with unique graphics. Base inspired by original template from Goran Babarogic.
Built on Framer. Heavily manipulated and personalized with unique graphics. Base inspired by original template from Goran Babarogic.