Humanitae Website Expansion
Humanitae Website Expansion
Role: Design Lead, UX + UI Design
Role: Design Lead, UX + UI Design
Team: Lead, Designer
Team: Lead, Designer
Timing: 3 months | 2024
Timing: 3 months | 2024
OVERVIEW
OVERVIEW
OVERVIEW
Humanitae’s “Guide for Postsecondary Changemakers” is a website that supports institutional leaders in transforming higher education. While the original site focused on strategic guidance for senior leaders, mid-level leaders (MLLs) who bridge strategy and implementation felt the site lacked practical, actionable tools to support their role.
In 2024, I led the UX and UI design for a site expansion focused on transforming static PowerPoint concepts developed by MLLs into an engaging digital experience. My team delivered developer-ready designs, a unified design system, and a streamlined information architecture to improve usability and access. Launched in December 2024, the new toolkits empower MLLs to easily find, adapt, and apply practical resources in their day-to-day work.
DESIGN SOLUTION SNEAK PEAK
DESIGN SOLUTION SNEAK PEAK
DESIGN SOLUTION SNEAK PEAK
Main Features
Below is a sneak peak of the final design solution. Continue reading for details on the overall process.
A landing page for the tools library
A redesigned Supporting Your Journey page that brings the new tool library to the forefront. This updated experience will make it easier for users to explore and access practical tools aligned with each stage of the transformation journey. With a clearer structure and more intuitive navigation, the page will serve as a purposeful entry point for Mid-Level Leaders (MLLs) and partners looking to put transformation into action.
A visualization of the transformation process
A new visual framework that clearly maps each tool to a specific phase of the Postsecondary Institutional Transformation process. Replacing dense, text-heavy explanations, this graphic offers an intuitive, at-a-glance view of the full journey, from preparation through implementation, making it easier for users to see what support is available at every stage.
Offline access and customization
A new “Download Activity” feature offers direct access to a Google Drive folder filled with customizable templates—Google Docs, Sheets, and PDFs. Designed for flexibility, these resources can be easily downloaded, tailored to specific needs, and used offline to support a variety of workflows.
IMMERSION
IMMERSION
IMMERSION
Understanding Concepts Created by MLLs
My team was assigned to transform a PowerPoint-based toolkit co-developed by stakeholders and MLLs into interactive, web-based experiences for the Changemakers site. We started by thoroughly examining the content, identifying the key user needs, and reimagining each tool for digital use.
IDEATION
IDEATION
IDEATION
Making Space for the New Tools
We revisited the overall information architecture of the Changemakers site to ensure it clearly and intuitively supports the new toolkit. This process involved mapping content relationships, streamlining categories, and rethinking how users access the tools at various stages of their transformation journey. By focusing on these elements, we aimed to create a seamless and supportive pathway for MLLs as they engage with the resources available to them.
The Supporting Your Journey page seemed the most logical choice for integrating a landing space for the new tools. However, incorporating this would require a redesign, as the current resources must be replaced and reorganized to accommodate the new content seamlessly.
From PowerPoint Concepts to Digital Resources
PowerPoint concepts were translated into interactive digital tools through a structured design process—beginning with wireframes to define layout and flow, progressing to modular components for testing and refinement, and culminating in developer-ready designs.
TESTING
TESTING
TESTING
Getting Feedback from MLLs
To ensure the design met the needs of Mid-Level Leaders, as well as stakeholders from Moore Philanthropy, Humanitae, and the Gates Foundation, we conducted feedback sessions in Miro before moving into high-fidelity design. This collaborative process surfaced key insights, closed gaps early, and ensured the final toolkit experience was intuitive, aligned with expectations, and easy to navigate.
Through testing with Mid-Level Leaders, we learned that while interactivity wasn’t a top priority, the ability to customize tools was essential. Participants wanted to adapt the content to their unique institutional needs. In response, we designed downloadable, offline-editable templates that accompany each tool—making the experience both flexible and immediately usable.
Through testing with Mid-Level Leaders, we learned that while interactivity wasn’t a top priority, the ability to customize tools was essential. Participants wanted to adapt the content to their unique institutional needs. In response, we designed downloadable, offline-editable templates that accompany each tool—making the experience both flexible and immediately usable.
Through testing with Mid-Level Leaders, we learned that while interactivity wasn’t a top priority, the ability to customize tools was essential. Participants wanted to adapt the content to their unique institutional needs. In response, we designed downloadable, offline-editable templates that accompany each tool—making the experience both flexible and immediately usable.
“I wanted to share how proud I am of the tool(s) demo'd for us today. I worked on the Tangible and Intangible Impact guide with a few others, and at times worried that our ideas might get received as a bit too complex and unwieldy to be rendered into a legible tool for a wide audience of MLLs across the country. Boy was I wrong! The tool is shaping up very nicely -- I am incredibly proud of the work.”
Feedback from MLL - VP Student Affairs and Dean of Students
DESIGN
DESIGN
DESIGN
Design System for Cohesion and Efficiency
We developed a lightweight design system that enabled us to quickly create reusable components in close collaboration with Humanitae's developer. This system featured flexible layout patterns, a shared type scale, and a consistent approach to color and iconography, all tailored to align with the current site's tone and objectives. Since we were working within a pre-built WordPress setup, the design system helped us maintain a realistic perspective on what could be implemented, balancing our design intentions with technical constraints.
With the system in place, we advanced our low-fidelity wireframes into high-fidelity screens. This transition allowed us to apply consistent styles efficiently, refine layout and interaction details, and enhance the overall user experience. Moving to high fidelity also facilitated more transparent communication of our design intent to stakeholders and the developer during the handoff process.
With the system in place, we advanced our low-fidelity wireframes into high-fidelity screens. This transition allowed us to apply consistent styles efficiently, refine layout and interaction details, and enhance the overall user experience. Moving to high fidelity also facilitated more transparent communication of our design intent to stakeholders and the developer during the handoff process.
With the system in place, we advanced our low-fidelity wireframes into high-fidelity screens. This transition allowed us to apply consistent styles efficiently, refine layout and interaction details, and enhance the overall user experience. Moving to high fidelity also facilitated more transparent communication of our design intent to stakeholders and the developer during the handoff process.
FINAL DESIGNS
FINAL DESIGNS
FINAL DESIGNS
Supporting Your Journey
MLL Tools
My fellow designer and I shared responsibility for designing the six tools. While I oversaw the overall quality across all tools, I personally designed the following.
Data Use Toolkit
Project Charter Template
Identifying Impact & Value Guide
See the MLL tools in action!
See the MLL tools in action!
See the MLL tools in action!
Humanitae Website Expansion
Humanitae Website Expansion
Humanitae Website Expansion
Role: Lead, UX + UI Design
Role: Design Lead, UX + UI Design
Role: Design Lead, UX + UI Design
Team: Lead, Designer
Team: Lead, Designer
Team: Lead, Designer
Timing: 3 months | 2024
Timing: 3 months | 2024
Timing: 3 months | 2024
Humanitae, IP steward of the Guide for Postsecondary Changemakers website, supports postsecondary institutional transformation by curating tools, methods, and resources for intermediaries and institutions. As the site evolves to include new materials for Mid-Level Leader (MLL) initiatives, Humanitae engaged Artefact to enhance the platform’s UX by designing and integrating the MLL tools into the existing site.
Humanitae’s “Guide for Postsecondary Changemakers” is a website that supports institutional leaders in transforming higher education. While the original site focused on strategic guidance for senior leaders, mid-level leaders (MLLs) who bridge strategy and implementation felt the site lacked practical, actionable tools to support their role.
In 2024, I led the UX and UI design for a site expansion focused on transforming static PowerPoint concepts developed by MLLs into an engaging digital experience. My team delivered developer-ready designs, a unified design system, and a streamlined information architecture to improve usability and access. Launched in December 2024, the new toolkits empower MLLs to easily find, adapt, and apply practical resources in their day-to-day work.
Humanitae’s “Guide for Postsecondary Changemakers” is a website that supports institutional leaders in transforming higher education. While the original site focused on strategic guidance for senior leaders, mid-level leaders (MLLs) who bridge strategy and implementation felt the site lacked practical, actionable tools to support their role.
In 2024, I led the UX and UI design for a site expansion focused on transforming static PowerPoint concepts developed by MLLs into an engaging digital experience. My team delivered developer-ready designs, a unified design system, and a streamlined information architecture to improve usability and access. Launched in December 2024, the new toolkits empower MLLs to easily find, adapt, and apply practical resources in their day-to-day work.
Main Features
Main Features
Here is a sneak peak of the final design solution. Continue reading for details on the overall project process.
Below is a sneak peak of the final design solution. Continue reading for details on the overall process.
Below is a sneak peak of the final design solution. Continue reading for details on the overall process.
A landing page for the tools library
A landing page for the tools library
A redesigned Supporting Your Journey page that brings the new tool library to the forefront. This updated experience will make it easier for users to explore and access practical tools aligned with each stage of the transformation journey. With a clearer structure and more intuitive navigation, the page will serve as a purposeful entry point for Mid-Level Leaders and partners looking to put transformation into action.
A redesigned Supporting Your Journey page that brings the new tool library to the forefront. This updated experience will make it easier for users to explore and access practical tools aligned with each stage of the transformation journey. With a clearer structure and more intuitive navigation, the page will serve as a purposeful entry point for Mid-Level Leaders (MLLs) and partners looking to put transformation into action.
A redesigned Supporting Your Journey page that brings the new tool library to the forefront. This updated experience will make it easier for users to explore and access practical tools aligned with each stage of the transformation journey. With a clearer structure and more intuitive navigation, the page will serve as a purposeful entry point for Mid-Level Leaders (MLLs) and partners looking to put transformation into action.
A visualization of the transformation process
A visualization of the institutional transformation process
A new visual framework that clearly maps each tool to a specific phase of the Postsecondary Institutional Transformation process. Replacing dense, text-heavy explanations, this graphic offers an intuitive, at-a-glance view of the full journey—from preparation through implementation—making it easier for users to see where they are and what support is available at every stage.
A new visual framework that clearly maps each tool to a specific phase of the Postsecondary Institutional Transformation process. Replacing dense, text-heavy explanations, this graphic offers an intuitive, at-a-glance view of the full journey, from preparation through implementation, making it easier for users to see what support is available at every stage.
A new visual framework that clearly maps each tool to a specific phase of the Postsecondary Institutional Transformation process. Replacing dense, text-heavy explanations, this graphic offers an intuitive, at-a-glance view of the full journey, from preparation through implementation, making it easier for users to see what support is available at every stage.
Offline access and customization
Offline access and customization
A new “Download Activity” feature offers direct access to a Google Drive folder filled with customizable templates—Google Docs, Sheets, and PDFs. Designed for flexibility, these resources can be easily downloaded, tailored to specific needs, and used offline to support a variety of workflows.
A new “Download Activity” feature offers direct access to a Google Drive folder filled with customizable templates—Google Docs, Sheets, and PDFs. Designed for flexibility, these resources can be easily downloaded, tailored to specific needs, and used offline to support a variety of workflows.
Understanding Concepts Created by MLLs
Understanding Concepts Created by MLLs
Understanding Concepts Created
by MLLs
My team was tasked with transforming a PowerPoint-based toolkit—co-developed by stakeholders and Mid-Level Leaders—into interactive, web-based tools for the Changemakers website. We began by immersing ourselves in the content, identifying core user needs, and reimagining each tool for digital use.
My team was assigned to transform a PowerPoint-based toolkit co-developed by stakeholders and MLLs into interactive, web-based experiences for the Changemakers site. We started by thoroughly examining the content, identifying the key user needs, and reimagining each tool for digital use.
My team was assigned to transform a PowerPoint-based toolkit co-developed by stakeholders and MLLs into interactive, web-based experiences for the Changemakers site. We started by thoroughly examining the content, identifying the key user needs, and reimagining each tool for digital use.
Making space for the new tools
Making space for the new tools
Making Space for the New Tools
We revisited the overall information architecture of the entire Changemakers site to ensure it could clearly and intuitively support the new toolkit. It involved mapping content relationships, streamlining categories, and rethinking how users access the tools across different stages of their transformation journey.
We revisited the overall information architecture of the Changemakers site to ensure it clearly and intuitively supports the new toolkit. This process involved mapping content relationships, streamlining categories, and rethinking how users access the tools at various stages of their transformation journey. By focusing on these elements, we aimed to create a seamless and supportive pathway for MLLs as they engage with the resources available to them.
We revisited the overall information architecture of the Changemakers site to ensure it clearly and intuitively supports the new toolkit. This process involved mapping content relationships, streamlining categories, and rethinking how users access the tools at various stages of their transformation journey. By focusing on these elements, we aimed to create a seamless and supportive pathway for MLLs as they engage with the resources available to them.
The Supporting Your Journey page seemed the most logical choice for integrating a landing space for the new tools. However, incorporating this would require a redesign, as the current resources must be replaced and reorganized to accommodate the new content seamlessly.
The Supporting Your Journey page seemed the most logical choice for integrating a landing space for the new tools. However, incorporating this would require a redesign, as the current resources must be replaced and reorganized to accommodate the new content seamlessly.
The Supporting Your Journey page seemed the most logical choice for integrating a landing space for the new tools. However, incorporating this would require a redesign, as the current resources must be replaced and reorganized to accommodate the new content seamlessly.
From PowerPoint concepts to digital resources
From PowerPoint concepts to digital resources
From PowerPoint Concepts to Digital Resources
PowerPoint concepts were translated into interactive digital tools through a structured design process—beginning with wireframes to define layout and flow, progressing to modular components for testing and refinement, and culminating in high-fidelity designs ready for development.
PowerPoint concepts were translated into interactive digital tools through a structured design process—beginning with wireframes to define layout and flow, progressing to modular components for testing and refinement, and culminating in developer-ready designs.
PowerPoint concepts were translated into interactive digital tools through a structured design process—beginning with wireframes to define layout and flow, progressing to modular components for testing and refinement, and culminating in developer-ready designs.
Getting feedback from MLLs
Getting feedback from MLLs
Getting Feedback from MLLs
To ensure the design met the needs of Mid-Level Leaders, as well as stakeholders from Moore Philanthropy, Humanitae, and the Gates Foundation, we conducted feedback sessions before moving into high-fidelity design. This collaborative process surfaced key insights, closed gaps early, and ensured the final toolkit experience was intuitive, aligned with user expectations, and easy to navigate.
To ensure the design met the needs of Mid-Level Leaders and stakeholders from Moore Philanthropy, Humanitae, and the Gates Foundation, we conducted feedback sessions in Miro before moving into high-fidelity design. This collaborative process surfaced key insights, closed gaps early, and ensured the final toolkit experience was intuitive, aligned with expectations, and easy to navigate.
To ensure the design met the needs of Mid-Level Leaders and stakeholders from Moore Philanthropy, Humanitae, and the Gates Foundation, we conducted feedback sessions in Miro before moving into high-fidelity design. This collaborative process surfaced key insights, closed gaps early, and ensured the final toolkit experience was intuitive, aligned with expectations, and easy to navigate.
“I wanted to share how proud I am of the tool(s) demo'd for us today. I worked on the Tangible and Intangible Impact guide with a few others, and at times worried that our ideas might get received as a bit too complex and unwieldy to be rendered into a legible tool for a wide audience of MLLs across the country. Boy was I wrong! The tool is shaping up very nicely -- I am incredibly proud of the work.”
“I wanted to share how proud I am of the tool(s) demo'd for us today. I worked on the Tangible and Intangible Impact guide with a few others, and at times worried that our ideas might get received as a bit too complex and unwieldy to be rendered into a legible tool for a wide audience of MLLs across the country. Boy was I wrong! The tool is shaping up very nicely -- I am incredibly proud of the work.”
Feedback from MLL - VP Student Affairs and Dean of Students
Feedback from MLL - VP Student Affairs and Dean of Students
Design system for cohesion and efficiency
Design System for Cohesion and Efficiency
Design System for Cohesion and Efficiency
We developed a lightweight design system that facilitated the creation of reusable components in collaboration with the developer. This system enabled my fellow designer and me to construct layouts efficiently, ensuring consistency across similar pages while speeding up the design process. By leveraging these components, we streamlined our workflow and maintained a cohesive aesthetic throughout the project.
We developed a lightweight design system that enabled us to quickly create reusable components in close collaboration with Humanitae's developer. This system featured flexible layout patterns, a shared type scale, and a consistent approach to color and iconography, all tailored to align with the current site's tone and objectives. Since we were working within a pre-built WordPress setup, the design system helped us maintain a realistic perspective on what could be implemented, balancing our design intentions with technical constraints.
We developed a lightweight design system that enabled us to quickly create reusable components in close collaboration with Humanitae's developer. This system featured flexible layout patterns, a shared type scale, and a consistent approach to color and iconography, all tailored to align with the current site's tone and objectives. Since we were working within a pre-built WordPress setup, the design system helped us maintain a realistic perspective on what could be implemented, balancing our design intentions with technical constraints.
Supporting Your Journey
Supporting Your Journey
MLL Tools
MLL Tools
My fellow designer and I shared responsibility for designing the six tools. While I oversaw the overall quality across all tools, I personally designed the following.
My fellow designer and I shared responsibility for designing the six tools. While I oversaw the overall quality across all tools, I personally designed the following.
My fellow designer and I shared responsibility for designing the six tools. While I oversaw the overall quality across all tools, I personally designed the following.
Data Use Toolkit
Data Use Toolkit
Project Charter Template
Project Charter Template
Identifying Impact & Value Guide
Identifying Impact & Value Guide