Role UX/UI Designer & Developer Collaboration

Tools Whimsical, Tailwind CSS, HTML/CSS, JavaScript

Team Developers, Product Managers, UX/UI Team

InvestigatorSpace – Study Clone UI Redesign

Project Overview

InvestigatorSpace (IS) is a clinical trial management platform. The Study Cloning feature needed a modern UI update to ensure consistency with other IS pages and improve user feedback.

Problem

  1. Inconsistent UI – The previous design didn’t align with other IS pages.

  2. Lack of user feedback – Users didn’t know if a study was successfully cloned.

  3. Navigation issues – No clear next steps after cloning a study.

Process

  1. Wireframing & Prototyping
    Created low-fidelity wireframes to outline the UI structure.
    Designed a Tailwind CSS-based layout for seamless integration.

  2. Collaborating with Developers
    Built the UI using Tailwind CSS and worked closely with devs to ensure technical feasibility.

  3. UX/UI Iteration
    Initially designed a success page, but after feedback, we moved to a modal-based confirmation to align with WCG standards.

Final Solution

  1. Consistent UI – Designed using Tailwind CSS for a unified IS experience.

  2. Clear success feedback – A modal confirms when a study is cloned.

  3. Improved navigation – Users can:

    • "Go to Cloned Study" → Edit/view the newly created study.

    • "Close" → Stay on the Clone Study home page.

Impact & Learnings

  • Enhanced User Experience – Users now receive instant success confirmation with clear next steps.

  • Reduced friction – The modal prevents unnecessary page loads, streamlining workflows.

  • Stronger UI Consistency – Following Tailwind CSS and WCG standards ensures a modern, cohesive design.

Key Takeaways:
Flexibility matters – Iterated based on team feedback and WCG standards.
Collaboration is crucial – Worked hands-on with devs to bring the UI to life.
User-centered thinking – Small changes like clear success messages make a big difference in UX.

Outcome & Reflections

The IS Clone Study UI Redesign was a valuable project where I combined UX strategy, UI design, and front-end collaboration to improve the user experience. By refining the study cloning process, I helped create a more intuitive, visually consistent, and user-friendly interface that aligns with WCG’s evolving design standards.

This project reinforced the importance of iterative design—initially, we planned a success page, but through feedback and collaboration, we pivoted to a modal-based confirmation, providing users with instant clarity without disrupting their workflow.