CASE STUDY

Redesign of Corporate Site Hero Section

Redesigned the corporate site hero section for a cleaner, more focused look, improving update ease and fixing layout and spacing issues.

Challenge

The hero section faced multiple design and technical issues: an absolute-positioned header made spacing difficult; the CMS lacked controls for foreground color contrast; the logo risked accessibility failures; enforced minimum height caused wasted space; background images were oversized and pixelated, hurting visual consistency and performance; and flexible column layouts often led to unbalanced designs.

Previous design

Approach

Identify core issues with existing hero

Floating header causing awkward hero spacing

  • Lack of CMS controls for adjusting color contrast

  • Poor contrast risking logo visibility and accessibility

  • Fixed minimum height wasting space

  • Oversized background images slowing page load

  • Unbalanced multi-column layouts

Set design goals

  • Improve spacing and alignment consistency

  • Ensure flexible, accessible color and contrast choices

  • Reduce visual clutter and unnecessary white space

  • Enhance image quality and optimize performance

  • Create a balanced, modular layout adaptable across hero types

Redesign and simplify

  • The header is integrated, not floating, making spacing more predictable

  • Foreground text and buttons stand out clearly against the background

  • Hero images are sharper, properly scaled, and load faster

  • The layout feels more focused and balanced, with fewer competing elements

  • CTA buttons and visual cues are clearer, improving usability

Outcome

The new hero design feels cleaner, clearer, and more inviting. By fixing the layout and contrast issues, we made sure the message and visuals stand out without distractions. The team now has more flexibility in the CMS to adjust content and colors as needed, and the images load faster without losing quality. Overall, the updated hero creates a much better first impression — it’s easier for users to engage with, and it better supports the goals of the site.