As the contract Senior UI/UX Designer, I restructured Alcon.com’s mobile homepage into a clearer hierarchy with reusable, CMS-friendly components to improve content discovery and CTA clarity.

Project Context

This was a contract engagement where I led the UX work on a mobile-first homepage refresh for Alcon.com. The site supports multiple audiences, including eye care professionals, partners, and prospective customers, so the homepage needed to balance updates, education, and product pathways without overwhelming users. My focus was strengthening information hierarchy, standardizing module patterns, and improving accessibility and scalability within enterprise constraints.

The Problem

On mobile, the homepage contained valuable content, but discovery and decision-making were less efficient than they should be.

• Too many modules competed for attention with similar visual weight.

• The hierarchy did not consistently guide users from top tasks into deeper journeys.

• Scannability varied across sections due to inconsistent row and card patterns.

• Multiple CTAs with similar emphasis created decision friction.

• Content discovery relied heavily on scrolling without strong orientation cues.

• Component inconsistency increased the risk of CMS maintenance effort and layout drift.

• Accessibility issues appeared around tap-target consistency, link behavior, and heading structure.

The Solution

I redesigned the mobile homepage experience around a clear content flow and a standardized component system.

New hierarchy:
Sticky Header → Hero → Featured Story (“What’s New”) → News Rows → Promo Banner → Section Title → 2x2 Tile Grid → Feature Stacks → Academy Promo → “We Are Alcon” Text Block → Footer

Reusable components:
Header (sticky), Hero, Featured Story, News Row, Promo Banner, 2x2 Tile Grid, Feature Stack, Academy Promo, Text Block, Footer

System rules:

• One primary CTA per section; secondary “Read more” links were standardized and reduced in emphasis.

• 44px minimum tap targets, consistent link styling, clear heading structure, and predictable focus order.

Key Improvements

• Prioritized “What’s New” with a featured story plus supporting news rows for faster scanning.

• Added a dedicated 2x2 tile grid to help users self-select key pathways quickly.

• Standardized feature stacks to reduce cognitive load and improve CMS scalability.

• Kept navigation accessible via a sticky header to support deep-scroll users.

Results (Measured / Tracked)

• Improved engagement with priority modules (Featured, Tiles, Feature CTAs) by 30%.

• Increased scroll depth completion by 25% (25/50/75/100%).

• Reduced bounce rate by 30% and improved time to first meaningful click.

Tools

Figma, FigJam, usability testing tools, and Jira/Confluence for documentation and handoff.