Case Study | Medable Design System

Unified Dashboard Design System

Medable

A Clinical Trials Platform

Client

Medable
Year

2020 - 2022
Role

Product Design Lead
Tools

Figma, Miro, StoryBook

Made with

Overview

Problem

The absence of a unified design across products results in a poor user experience, inconsistencies, and confusion due to software architecture problems, code bloat, and varying design frameworks. Obstacles like bugs and technical dependencies impede UX improvements and design scalability, causing outdated visuals and misalignment with industry trends. This situation frustrates users and developers, causing delays, extra meetings, and a lengthy compatibility assurance process.

Challenges

Challenges in implementing design system changes include securing buy-in from upper management and lateral teams, addressing concerns such as disrupting clinical trials and making major code changes, and overcoming reluctance to take risks. Fragmented approaches due to a lack of governance among tech and product teams, resource constraints, and limited team capacity.

Continue

Process

Design Strategy

Perform a UX heuristic evaluation on existing products to pinpoint shortcomings and areas for improvement within the current design system.
Engage with key stakeholders by identifying individuals and teams affected, and comprehending their concerns and priorities.
Create a compelling business case that outlines the benefits, demonstrates ROI, and uses data to showcase the impact of the new design system on essential KPIs.
Communicate advantages to stakeholders, highlighting quicker development for the tech team and enhanced usability for end-users.
Develop and present a proof of concept or prototype to help stakeholders visualize the benefits, followed by implementation, monitoring, and progress tracking.

Design System Scope

Scalability: The solution must be adaptable and scalable, allowing custom components integration and meeting users' evolving needs.
Accessibility: The solution should comply with accessibility standards for all users.
RTL Language Scalability: Seamless integration with Right-to-Left languages, like Arabic and Hebrew, is required.
Tactical to Strategic Scalability: The solution must transition smoothly from the old framework to the new, ensuring adaptability as project needs evolve.
Tactical to Strategic Scalability: The solution must transition smoothly from the old framework to the new, ensuring adaptability as project needs evolve.

Foundations

Design System

Using Tailwind CSS, the design system foundation capitalizes on its many advantages.
Implement a utility first approach in creating components.
Built-in responsive design features.
Alignment with web design trends and best practices.
Partner with Marketing Department who spearheaded the updated logo and color scheme creation, with purple as the central color.
Roboto, integrated with Tailwind CSS, is the consistent font across the system. Pre-built components from Tailwind CSS expedited development and maintained consistency.
Translate Figma Design System components into StoryBook, a specialized platform for managing design systems.

Proof of Concept

Revamp and reconstruct the digital consent tool (a Medable product) using new design system components.
Product prototype exhibited design framework's capabilities and potential.
Highlight design system features, such as Tailwind CSS components.
Show unified user experience across various products and platforms.
Refine design system using feedback, optimizing efficiency and user-friendliness.

StoryBook

Figma to Storybook: Simplifying Development

To facilitate a seamless integration of the new design system for software engineers, I translated the Figma files into Storybook components, creating a comprehensive library of ready-to-use building blocks. This approach ensures developers have a clear understanding of how to implement these components within actual web pages, streamlining the development process and promoting a unified consistency.