top of page

Crohn's & Colitis Foundation

 Product Management Tool

A internal website used to manage projects, automate approval workflows, path project timelines, and track products.

  • Facebook
  • LinkedIn
  • Instagram

Overview

I had to design a website that could help internal users track and manage their projects. The website implemented a workflow that the users were already familiar with, making the website more intuitive and easy to navigate.

My Role

UX Designer

Timeline

Jun - Feb 2024

Tools

Figma, Miro, Microsoft Sharepoint

Proposal

Design an intuitive, user-friendly tool for internal users to monitor and manage workflow of projects.

Workflow of the
Projects

The users have already established a workflow for managing their projects, handling everything manually. For the management interface, they requested a website that aligns with this established flow, one they are already familiar with.

Screen Shot 2023-09-10 at 7.55.43 PM.png

Workflow

1

User Needs

2

UI Design

3

Design Iterations

User Needs

I conducted user interviews to gain insights into the existing workflow processes used by the stakeholders. This research guided me in designing a system that incorporates familiar elements from their current practices while also ensuring it effectively captures all the minute details.

Requirements

1. A tool that could allow users to easily track projects.

2. A tool where users could view the status of projects.

3. A tool where users could view the requirements of projects.

4. A tool that could send users automated messages after a stage has been completed. 

UI Design

Homepage

Screen Shot 2023-09-17 at 8.25.26 PM.png

Users can easily view, track, manage, and edit all the data about their projects all on the same page. 

Add New Project

Screen Shot 2023-09-17 at 8.27.28 PM.png

Users can easily add new projects and all its details.

Approved Project Status

Group 21 (1).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.

Suggestion 1:

Screen Shot 2023-09-17 at 6.07.15 PM.png

Description: 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. reseracher name, biosamples required in the project, etc). 

Pro: simplistic and minimalist design where a user can easily submit a request for a new project. Low learnability curve

Con: it does not provide a way for users to easily track or manage ongoing projects.

Suggestion 2:

Screen Shot 2023-09-17 at 6.07.53 PM.png

Description: a system where users can easily view, track, and manage ongoing projects. From the homescreen itself, users can view what projects are new, under consideration, or have been approved as well some details of the projects and the priority level of the project. The user can click on the project name to view further details. 

Pro: User can easily view all their projects and easily add another project by clicking on the appropriate button. 

Con: Too cluttered and overwhelming and the usage of some of the words does not align with what the users are familar with. 

Suggestion 3 is the design that the stakeholders loved the most and choose to put into production. 

Suggestion 3:

Screen Shot 2023-09-10 at 5.32_edited.jpg

Description: Similar to the previous suggestion, this system allows users to effortlessly access, monitor, and oversee their active projects. Additionally, users can readily check the priority level, project status, and the status of approved projects. Moreover, users have the convenience of editing these records directly on the home screen.

Contact

I'm always looking for new and exciting opportunities. Let's connect.

732-762-4669

bottom of page