Pulse Design System | Medlify | Lui Spadarotto

Introduction

At Medlify, a white-label SaaS DTC virtual health platform, I led the creation of the Pulse Design System in close collaboration with the Product Manager and cross-functional teams. This process involved defining user-centered design strategies, managing workflows, and aligning design initiatives with business objectives.

I directed the development of reusable, modular components that adhered to Atomic Design principles, ensuring they were adaptable across multiple healthcare products. By documenting the system, we established a centralized hub for all design resources, enabling seamless collaboration between design and development teams.

Action-Oriented Process

Research and Strategy

The design system began with stakeholder interviews and user research to uncover inconsistencies and inefficiencies in existing workflows. A clear roadmap was developed to align the system's goals with Medlify's business objectives, ensuring the design process met the needs of users and stakeholders alike.

Atomic Design Framework

Using Atomic Design principles, I created a modular system of reusable components, from basic UI elements like buttons and typography to complex dashboards and navigation systems.

Accessibility Integration

Accessibility was central to the system's development. Each component adhered to WCAG 2.1 AA or AAA standards, focusing on contrast ratios, keyboard navigation, and semantic HTML.

Documentation and Collaboration

To optimize workflows, we centralized all assets in a dynamic repository. Featuring usage guidelines, design tokens, and real-time updates, ensuring smooth collaboration and accurate implementation between teams.

White-label solution

Some details have been altered or fictionalized to protect client confidentiality.

Tomás Correia Amaro

Worked with Lui @ Medlify

Lui is the most resourceful and technically advanced Lead Product Designer ever. Her understanding of the SDLC and logical thinking expose her engineering background. These skills are essential but rare at a time when the roles in software development are expected to collaborate and communicate in very similar language.

I wish I could work with Lui all my career, but I'm sure she will fly to heights bigger than myself one day.

Pulse Design System documentation

This preview showcases selected sections of the Pulse Design System documentation, highlighting core elements like color tokens, spacing, and button styles. Due to NDA restrictions, only a subset of the comprehensive guidelines is displayed.

Success Metrics & Outcomes

57%

Efficiency Boost

Reduced average design time from 21 hours to 9 hours per project.

Consistency

Minimized design-related errors by 60%, improving product quality.

Scalability

Enabled consistent designs across 4+ healthcare products while supporting rapid feature development.

Accessibility

Ensured WCAG 2.1 AA or AAA compliance, improving usability for all users.

Medlify Website Refresh

Video Description: This video showcases a proposed design for the Medlify website, featuring the new branding. The updated branding is applied throughout the site, highlighting Medlify's customizable virtual health solutions with a clean, modern, and user-friendly interface.

Timeline Consideration

Although the rebranding initiative received approval, it has not been prioritized for rollout. This decision seems to reflect a focus on other strategic priorities from the stakeholders, rather than an immediate recognition of the rebrand's potential value.

Work impact

The Pulse Design System revolutionized Medlify's design workflows by establishing a scalable and consistent framework across its products. By reducing design time by 57% and minimizing errors by 60%, it allowed teams to focus on innovation and high-quality outputs. Its modular components enabled the seamless rollout of features for 4+ products, and supported a platform used by 1.3 million users annually.

The system's accessibility-first approach improved inclusivity, while centralized documentation streamlined collaboration between design and development teams.

Medlify

Revolutionizing virtual healthcare through scalable design