Humanitae Website Expansion
Role: Lead, UX + UI Design
Team: Lead, Designer
Timing: 3 months | 2024
OVERVIEW
OVERVIEW
OVERVIEW
Humanitae’s “Guide for Postsecondary Changemakers” is a digital platform designed to equip institutional leaders with tools for transforming higher education. In 2024, I led the UX and UI design for the expansion, which focused on resources for Mid-Level Leaders (MLLs). The project involved rethinking the site’s organization to integrate a new suite of MLL-developed tools from PowerPoint concepts into an intuitive digital experience.
My team and I delivered high-fidelity designs, a cohesive design system, and a reimagined site information architecture to improve the user experience and ensure seamless access to these new resources. Launched in December 2024, the updated platform enables MLLs to easily find, customize, and apply relevant resources in their 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, which had been co-developed by stakeholders and MLLs, into interactive, web-based tools for the Changemakers website. 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 high-fidelity designs ready for development.
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 the platform's limitations.
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
Home Page
The home page was refreshed with small but impactful updates—improved spacing for easier reading, streamlined text for faster scanning, and new messaging to better highlight what users can discover on the Supporting Your Journey page.
Supporting Your Journey
MLL Tools
Data Use Toolkit
Project Charter Template
Identifying Impact & Value Guide
See the MLL tools in action!
Humanitae Website Expansion
Humanitae Website Expansion
Humanitae Website Expansion
Role: Lead, UX + UI Design
Role: Lead, UX + UI Design
Role: 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 digital platform designed to equip institutional leaders with tools for transforming higher education. In 2024, I led the UX and UI design for the expansion, which focused on resources for Mid-Level Leaders (MLLs). The project involved rethinking the site’s organization to integrate a new suite of MLL-developed tools from PowerPoint concepts into an intuitive digital experience.
My team and I delivered high-fidelity designs, a cohesive design system, and a reimagined site information architecture to improve the user experience and ensure seamless access to these new resources. Launched in December 2024, the updated platform enables MLLs to easily find, customize, and apply relevant resources in their work.
Humanitae’s “Guide for Postsecondary Changemakers” is a digital platform designed to equip institutional leaders with tools for transforming higher education. In 2024, I led the UX and UI design for the expansion, which focused on resources for Mid-Level Leaders (MLLs). The project involved rethinking the site’s organization to integrate a new suite of MLL-developed tools from PowerPoint concepts into an intuitive digital experience.
My team and I delivered high-fidelity designs, a cohesive design system, and a reimagined site information architecture to improve the user experience and ensure seamless access to these new resources. Launched in December 2024, the updated platform enables MLLs to easily find, customize, and apply relevant resources in their 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, which had been co-developed by stakeholders and mid-level leaders, into interactive, web-based tools for the Changemakers website. 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, which had been co-developed by stakeholders and MLLs, into interactive, web-based tools for the Changemakers website. 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 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 high-fidelity designs ready for development.
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
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 built a lightweight design system that allowed for the rapid creation of reusable components in close collaboration with Humanitae's developer. This system included flexible layout patterns, a shared type scale, and a consistent approach to color and iconography, all tailored to reflect the current site's tone and goals. Establishing this foundation early on ensured consistency across similar screens and streamlined the transition from low-fidelity wireframes to developer-ready designs.
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 the platform's limitations.
Home Page
Home Page
The home page was refreshed with small but impactful updates—improved spacing for easier reading, streamlined text for faster scanning, and new messaging to better highlight what users can discover on the Supporting Your Journey page.
The home page was refreshed with small but impactful updates—improved spacing for easier reading, streamlined text for faster scanning, and new messaging to better highlight what users can discover on the Supporting Your Journey page.
The home page was refreshed with small but impactful updates—improved spacing for easier reading, streamlined text for faster scanning, and new messaging to better highlight what users can discover on the Supporting Your Journey page.
Supporting Your Journey
Supporting Your Journey
MLL Tools
MLL Tools
Data Use Toolkit
Data Use Toolkit
Project Charter Template
Project Charter Template
Identifying Impact & Value Guide
Identifying Impact & Value Guide
See the MLL tools in action!
See the MLL tools in action!