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
Visual Overhaul (Modernizing the Look & Feel)
To align the website with a more contemporary and engaging visual identity, we refined colors, typography, and imagery. We specifically incorporated the campaign’s color palette, ensuring brand consistency while enhancing readability and accessibility. The updated typography was carefully chosen to improve legibility across all devices. A key element of humanization was incorporating imagery that resonates with the audience. A great example is Fernanda Lima, a well-known figure associated with the MSD brand. By integrating her presence in a more strategic way, we created a stronger emotional connection with users, making the experience feel more personal and relatable.
Better Information Hierarchy (Clearer & More Accessible Content)
We restructured the content to make navigation more intuitive and information easier to scan. For example, the homepage previously required excessive scrolling to access key information. Now, with concise sections and better organization, users can quickly find what they need. One of the major improvements was prioritizing critical content above the fold, reducing cognitive load and making the experience smoother.
Enhanced User Flow (Streamlined Navigation & CTAs)
User journey analysis revealed pain points in navigation. To improve this, we: ✔ Simplified the menu structure for a more intuitive experience ✔ Optimized CTAs by making them more visible and action-oriented ✔ Introduced quick-access buttons to reduce the number of clicks needed to reach key pages These changes significantly improved usability, making it easier for users to interact with the site and find relevant information effortlessly.
Increased Engagement (Microinteractions & Dynamic Content)
We implemented subtle microinteractions, such as button animations and hover feedback, to enhance user engagement and responsiveness. These interactions make the experience feel more dynamic and enjoyable, guiding users naturally through the interface. Additionally, we redesigned content presentation by incorporating interactive elements and visually engaging layouts, encouraging users to explore deeper into the site rather than just skimming the surface.
Before and After Layout
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.