Mucinex Blog

Mucinex Blog

Mucinex Blog

Redesign of the Mucinex blog, increasing time spent
on site QoQ +3.02%.

Redesign of the Mucinex blog, increasing time spent
on site QoQ +3.02%.

Redesign of the Mucinex blog, increasing time spent
on site QoQ +3.02%.

About Mucinex

Mucinex.com is the US homepage of Mucinex OTC cold & flu medication.

ROLE

User Interface, Identity

TIMELINE

JAN 2023 – MAR 2023

CLIENT

Mucinex

& Reckitt

About Mucinex

Mucinex.com is the US homepage of Mucinex OTC cold & flu medication.

ROLE

User Interface, Identity

TIMELINE

JAN 2023 – MAR 2023

CLIENT

Mucinex

& Reckitt

About Mucinex

Mucinex.com is the US homepage of Mucinex OTC cold & flu medication.

ROLE

User Interface, Identity

TIMELINE

JAN 2023 – MAR 2023

CLIENT

Mucinex

& Reckitt

Challenge

Mucinex.com is the US homepage of Mucinex OTC cold & flu medication. 

In 2023, the brand sought to update their blog due to two findings:


1) Mucinex blog pages were amongst the highest Google-indexed pages on the site.


2) Users who entered the site through blog articles spent more time on the site and were more likely to navigate to product pages and click on the "Find a Retailer" CTA.

Usability Audit

INFORMATION ARCHITECTURE

• Existing blog had little-to-no information hierarchy.
• Blog homepage just consisted of links to four different blogs, each with a different set of articles.


NAVIGATION

• The tag system implemented was inconsistent in both informational and visual hierarchy.
• Some tags would link you to a totally different blog on click.
• Article listings were difficult to differentiate and impossible to sort.


LAYOUT & CTA OPTIMIZATION

• Articles were difficult to read and not optimized for any visual media.
• No opportunities for product links or CTAs, leaving valuable conversions on the table.
• No opportunities for article sharing, especially to social media.

INFORMATION ARCHITECTURE

• Existing blog had little-to-no information hierarchy.
• Blog homepage just consisted of links to four different blogs, each with a different set of articles.


NAVIGATION

• The tag system implemented was inconsistent in both informational and visual hierarchy.
• Some tags would link you to a totally different blog on click.
• Article listings were difficult to differentiate and impossible to sort.


LAYOUT & CTA OPTIMIZATION

• Articles were difficult to read and not optimized for any visual media.
• No opportunities for product links or CTAs, leaving valuable conversions on the table.
• No opportunities for article sharing, especially to social media.

INFORMATION ARCHITECTURE

• Existing blog had little-to-no information hierarchy.
• Blog homepage just consisted of links to four different blogs, each with a different set of articles.


NAVIGATION

• The tag system implemented was inconsistent in both informational and visual hierarchy.
• Some tags would link you to a totally different blog on click.
• Article listings were difficult to differentiate and impossible to sort.


LAYOUT & CTA OPTIMIZATION

• Articles were difficult to read and not optimized for any visual media.
• No opportunities for product links or CTAs, leaving valuable conversions on the table.
• No opportunities for article sharing, especially to social media.

Design System

I created a lean design system consisting of several key components including:

• symptom tags

• symptom checkbox filters

• tab navigation


Navigation

• The tag system implemented was inconsistent in both informational and visual hierarchy.


• Some tags would link you to a totally different blog on click.


• Article listings were difficult to differentiate and impossible to sort.

Blog Home

• Four individual blogs have been condensed into three unique, tabbed sections.


• Article tags are now just symptoms, lending structure to the once chaotic tagging system.


• Article thumbnails clearly show helpful metadata, including data posted, author, as well as relevant tags.


• Users are looking for answers on how to manage illness, so a search field is in an obvious, easy-to-find location.

Article

• Navigation is immediately improved through wayfinding breadcrumbs.


• Articles now have space for additional meta information via a left-hand rail. Rail info includes context clues like author, date, and tags.


• Conversions are drastically aided by the inclusion of shoppable product links in the side rail as well as social media share links.


• Time on site is improved by including links out to similar articles at the bottom of the page.

Mobile

BLOG HOME MOBILE


• A simple, stacked layout that keeps the information hierarchy of the desktop version.


• Tabs are converted to links that dynamically refresh the content area as opposed to linking to an entirely new page.


• Left-hand rail sub-nav is converted into a fly-out on mobile.


ARTICLE MOBILE


• Product links have been moved to the bottom of the page for mobile due to space concerns as mobile already features sticky primary navigation.


• Social links were moved from the bottom of the page in the initial wires to the top of the page after production testing.


• Overall mobile legibility is drastically improved by attention to typography and spacing.

BLOG HOME MOBILE


• A simple, stacked layout that keeps the information hierarchy of the desktop version.


• Tabs are converted to links that dynamically refresh the content area as opposed to linking to an entirely new page.


• Left-hand rail sub-nav is converted into a fly-out on mobile.


ARTICLE MOBILE


• Product links have been moved to the bottom of the page for mobile due to space concerns as mobile already features sticky primary navigation.


• Social links were moved from the bottom of the page in the initial wires to the top of the page after production testing.


• Overall mobile legibility is drastically improved by attention to typography and spacing.

BLOG HOME MOBILE


• A simple, stacked layout that keeps the information hierarchy of the desktop version.


• Tabs are converted to links that dynamically refresh the content area as opposed to linking to an entirely new page.


• Left-hand rail sub-nav is converted into a fly-out on mobile.


ARTICLE MOBILE


• Product links have been moved to the bottom of the page for mobile due to space concerns as mobile already features sticky primary navigation.


• Social links were moved from the bottom of the page in the initial wires to the top of the page after production testing.


• Overall mobile legibility is drastically improved by attention to typography and spacing.

Outcome

In the quarter following the launch of the updated blog...

+8.98%

Increase in time spent
on site QoQ

+3.02%

+3.02%

Increased traffic to 3rd party e-comm retailers (Amazon, Walmart, Target, etc.)  that can be attributed to blog traffic.