Overview
A clinical trial analysis web page needed to be updated because of the lack of user experiences in some of its flows. The design files for this project were created in XD and for these updates the client needed the files to be build in Figma. Me and some other UX/UI desginers took this project and used a design thinking approach for it.
Role
UX/UI designer
Team
Melissa Barrientos
Mar Vargas
Anthony Morera
Elena Saborio
Rosmery Valle
Problem
The website needed a design update to fix usability and experience issues, while also migrating the outdated design files to a new tool that streamlined collaboration, development handoff, and design reviews.
Goal
Improve the UX/UI of the clinical trials platform by identifying usability issues, updating visual communication, and building a scalable design system that ensures consistency and supports future growth.
Deliverables
- Ux/Ui improvements
- Design system for the web page
- User testing analysis
Tools
- Figma
- Adobe Illustrator
- Adobe XD
Research & Insights
Due to data limitations, the research process was adapted to focus on qualitative analysis and expert review by 4 UX/UI designers with experience on the medical industry. We conducted an heuristic evaluation, analyzed existing user flows, and benchmarked comparable clinical trial platforms to identify patterns, usual iconography and terminology.
Findings
- Visual elements caused confusion
- Main menu overloaded options
- Poor color and hierarchy usage
- Redundant navigation in flow
- Weak visual content hierarchy
- High information density overload
- Misleading and confusing icons
«Understanding the core of the problem helped us shaped the solution.«
Definition & Strategy
Based on research findings, we redefined the core problem:
Users have difficulty locating and understanding medical trial information due to unclear navigation, inconsistent UI, and lack of visual structure.
The design strategy focused on:
- Clarifying architecture and flow to make exploration more intuitive.
- Unifying visual design through a scalable component system.
- Improving collaboration by organizing design files in Figma with clear hierarchy and reusable styles.
Ideation & Information Architecture
With wireframing we explore options to simplify navigation and reorganize key pages. The information architecture was redesigned to align with user intent: from “Where do I start?” to a more guided discovery flow.
- Introduced a simplified, persistent main menu.
- Assign color to differentiate ui elements from visual elements and to clarify the information.
- Visual hierarchization of important sections.
- Iconography replacement for better communication.
- Highlighted primary user actions (search, register, learn).
- Consolidated related pages into clearer categories.
UI Design & Systemization
The visual redesign aimed to bring clarity, trust, and structure. The new design was created with dark background to bring modernization, medical atmosphere and differentiation. We created a new design system in Figma, with color variables, typography scales, and reusable components aligned with accessibility and brand identity.
Focus areas:
- Improved contrast and readability.
- Visual patterns that support content scanning.
- File organization that allows easy updates and handoffs.
Tokens were created to maintain consistency across all components.
Prototype & Testing (Next Steps)
An interactive prototype was built in Figma to visualize new user flows and validate navigation clarity. Upcoming usability testing sessions will focus on:
Focus areas:
- Ease of finding trial information.
- Understanding of page hierarchy and terminology.
- Perceived trust and visual coherence.
