Crohn's & Colitis Foundation
Product Management Tool
An internal website for tracking and managing the product lifecycle for external clients, ensuring an intuitive interface through stakeholder collaboration and iterative design.
Overview
When I first joined the Crohn’s & Colitis Foundation as their UX designer, I walked into a world of organized chaos.
Their internal teams managed dozens of client projects—but everything, from tracking progress to logging updates, was done manually. Spreadsheets piled up, emails went unanswered, and the workflow, while familiar, felt like a chaotic mess.
​
The proposal was clear: create a tool that streamlined their workflow without disrupting the familiarity that kept everything running. It had to be intuitive, efficient, and easy to adopt—a solution that would meet their needs without overwhelming them.
My Role
UX Designer
Timeline
Jun 2023 - Feb 2024
Tools
Figma, Miro, Microsoft Sharepoint
The Challenge
While the Foundations' entirely manual project management system approach worked, it was prone to errors and delays, and lacked transparency.
​
The users needed a solution that felt like an old friend—familiar, reliable—but had the power to untangle the complexity of their work and improve efficiency. I wanted to create something that didn’t just solve their immediate pain points but made their day-to-day lives easier and more efficient. This need shaped the core challenge: How do I design an intuitive digital tool that respects familiar workflows while addressing inefficiencies?
"We need something that works like our current system—but faster, smarter, and easier to use," emphasized one user during an initial stakeholder interview.
Previously Established Manual Workflow
The Foundation’s users were comfortable with their manual workflow despite its limitations. As shown below, the process involved tracking projects through spreadsheets, logging updates manually, and sending emails to notify colleagues of completed milestones. While effective for smaller teams, scaling this system proved challenging as the organization grew.
​
I captured this process in a visual diagram (see below) to fully understand the intricacies of their workflow. Mapping their pain points allowed me to pinpoint specific opportunities where digital enhancements could make the biggest impact, such as automating notifications and visualizing project statuses.
The Manual Workflow
Human-Centered Design Approach
I began where every good story starts: with listening.
​
To truly understand the challenges the team faced, I conducted in-depth interviews with project managers, team leads, and other stakeholders. I wanted to see their world through their eyes, to map out the pain points that kept them up at night and the workarounds they’d come to rely on. As I dug deeper, a clear set of user needs emerged:
​
-
Clarity: A tool that allowed users to easily track project progress.
-
Transparency: A dashboard that displayed project statuses and requirements at a glance.
-
Efficiency: Automated notifications to eliminate repetitive manual tasks.
Turning Insights into Design Principles
Intuitiveness through familiarity
Incorporate elements from the existing workflow to ensure users could adopt the new system with minimal training.
Efficiency through Automation
Eliminate repetitive tasks by automating notifications and updates.
Visibility & Transparency
Provide real-time updates on project statuses and requirements.
Sustainable UX Design
Maintain simplicity, usability, navigability, and compress elements to reduce energy consumption.
UI Design
Homepage/Dashboard
Where users can easily view, track, manage, and edit all the data about their projects all on the same page in real-time.
Add New Project
Users can easily add new projects and all its details.
Approved Project Status
.png)
A Kanban board method to track projects, where users can view what stage the project is at and also easily move all the projects around to different stages.
Design Iterations
Based on the user needs, I had to iterate on the design solutions multiple times. Below are three iterations, with the first two being faulty and not aligning with the stakeholder's goals. The third iteration was the one that satisfied the stakeholder's request.
1st Iteration:
Description: Picture above is the first and most simple design solution I derived. This screen depicts how a user can request or edit a project and input the details required in that project (i.e. researcher name, biosamples required in the project, etc).
​
Pro: Simplistic and minimalist design where a user can easily submit a request for a new project. It has a low learnability curve and is a highly sustainable design.
​Con: It does not provide a way for users to easily track or manage ongoing projects in real-time and doesn't look aesthetically pleasing to the eye.
2nd Iteration:
Description: Pictured above is the user-friendly system for tracking and managing ongoing projects. The dashboard provides a real-time overview of new, under consideration, and approved projects with their details and priority levels. Users can click on project names for more information.
Pro: Users can effortlessly view and add projects with a simple click.
Con: The interface may feel cluttered and some terminology may be unfamiliar to users.
The third iteration is the design that the stakeholders loved the most and choose to put into production.
3rd Iteration:
