MSD's website redesign
UX/UI Design
2025
Overview
The Pode Acontecer website by MSD is an initiative to raise awareness about HPV prevention, offering clear, accessible, and engaging content for the general public. When I joined the project as a UX/UI Designer, the website already existed but required a full redesign to align with the new campaign's visual identity, colors, and messaging.
Redesign Objective
The main challenge was to transform an already structured page into a more engaging, informative, and visually cohesive experience while ensuring usability and responsiveness across all devices.
Analysis of the Previous Website
Usability: The previous Pode Acontecer website had usability challenges, including a lack of clear navigation, fragmented content structure, and difficulty in guiding users through key information about HPV prevention.
Visual Design: The old design did not align with the new campaign’s aesthetics, featuring an outdated color palette, imagery, and typography that did not effectively communicate the initiative’s message.
SEO and Performance: The previous version had performance issues, affecting load times and mobile responsiveness, which could lead to a higher bounce rate and lower engagement. Additionally, the lack of proper SEO optimization limited the site’s visibility in search engines.
Redesign Objectives
Before and After Layout
Key Changes in the Design
We revamped the Pode Acontecer website to enhance usability and align with the new campaign:
Visual Overhaul: Updated colors, typography, and imagery for a modern look.
Better Information Hierarchy: Clearer content structure for easy navigation.
Enhanced User Flow: Simplified navigation and stronger CTAs.
Mobile Optimization: Improved responsiveness for all devices.
Increased Engagement: Added microinteractions and better content presentation.
These changes made the site more intuitive, engaging, and visually cohesive, strengthening its impact on HPV awareness.
Style Guide
Typography & Brand Alignment
While the typography remained unchanged, ensuring consistency with MSD’s existing design system, the style guide was developed using the brand’s core colors rather than the campaign’s specific palette. To bridge this gap, the campaign colors were strategically applied to key elements, such as buttons, highlights, and background sections, creating a harmonious blend between brand identity and campaign messaging.
Expected Results
The redesign aimed to enhance user engagement, accessibility, and clarity, ensuring that more people could easily access and understand key information about HPV prevention. With a more intuitive interface, optimized navigation, and visually appealing design, the site is expected to increase user retention, improve content absorption, and strengthen MSD’s mission of awareness and education.
Conclusion
By aligning the website with the new campaign while maintaining brand consistency, we created a more engaging, accessible, and informative experience. The redesign not only improved usability and responsiveness but also reinforced MSD’s commitment to delivering clear and impactful health communication.