English

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.

Process

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.

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.

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.

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.

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.

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.

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.

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.

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

Involved Team

Roberta Raduan

Managing Director

An experienced leader in branding and digital transformation, with a sharp vision for innovation and user engagement.

Victor Hugo Odo

Delivery & Technology 

Director LATAM

Leader in technology with 18+ years of experience managing digital projects. 40+ awards (Cannes Lions, FWA). Judge at CSSDA & Webby.

Stefano Maglovsky

Lead Designer

Head UX/UI

An award-winning designer with nearly 30 years in design and advertising. His long-standing collaboration with Roberta ensures a seamless blend of strategy and creativity.

Yaskara Camila

Designer

UX/UI Specialist

A UX/UI expert combining technical precision and creativity to deliver high-performance digital solutions.

Stefano Mendes

Full Stack 

Developer

A Full Stack Developer with 15 years of experience in the market, specialized in WordPress and custom web solutions development.

William Ferreira

Front-End Developer

Motion

Front-End Developer with experience in websites, web animations, and social media animations.

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.

Involved Team

Roberta Raduan

Managing Director

An experienced leader in branding and digital transformation, with a sharp vision for innovation and user engagement.

Victor Hugo Odo

Delivery & Technology 

Director LATAM

Leader in technology with 18+ years of experience managing digital projects. 40+ awards (Cannes Lions, FWA). Judge at CSSDA & Webby.

Stefano Maglovsky

Lead Designer

Head UX/UI

An award-winning designer with nearly 30 years in design and advertising. His long-standing collaboration with Roberta ensures a seamless blend of strategy and creativity.

Yaskara Camila

Designer

UX/UI Specialist

A UX/UI expert combining technical precision and creativity to deliver high-performance digital solutions.

Stefano Mendes

Full Stack 

Developer

A Full Stack Developer with 15 years of experience in the market, specialized in WordPress and custom web solutions development.

William Ferreira

Front-End Developer

Motion

Front-End Developer with experience in websites, web animations, and social media animations.

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.

Yáskara Camila

12:36:39 PM

Yáskara Camila

12:36:39 PM

Yáskara Camila

12:36:39 PM

English
English
English
English