Pulse Design System

Introduction

Problem Statement

Medlify, a white-label SaaS DTC virtual health platform, faced challenges in maintaining design consistency, scalability, and efficiency across its diverse healthcare products. These issues resulted in inefficiencies, design errors, and inconsistent user experiences.

The goal was to create the Pulse Design System, a comprehensive framework designed not only to enable consistent, accessible, and scalable designs but also to simplify customization for each client's unique branding and needs, supporting Medlify's white-label approach.

*Some details have been altered or fictionalized due to NDA restrictions while preserving the core insights and design process.

Exposition

Role and Contributions

At Medlify, 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.

Step-by-Step Execution

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 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

Customized for every client

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.

Simplified guidelines for scalable design

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 And Outcomes

Everyone likes results

57%

Efficiency Boost

Reduced average design time by 57%, 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 AAA compliance, improving usability for all users.

A glimpse into Medlify Rebrand

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.

Conclusion

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.

Other Projects

Business-Critical Insights AI Platform | Talka

Most promising AI companies by CB Insights in 2022/2023.

View this project

Shell Box App | Shell Brazil

Available at 3,500 Shell gas stations and 500 Shell Select convenience stores across Brazil.

View this project

Gas station Dashboard | Shell Brazil

25% reduced time spent on routine tasks, streamlined workflows.

View this project

Vehicle Financing Platform | BV Bank

20% improved usability and engagement, higher conversion rates.

View this project