SoftMoc - Hero Banner

 

SoftMoc Hero Banner Design Study

 

Desktop mockup

 

Project Overview

For this design test, I developed 4 different homepage hero banner concepts for SoftMoc across both desktop and mobile layouts. Each concept was created with a different marketing objective in mind, including seasonal promotions, product launches, and brand storytelling for HOKA. Why HOKA? Keep scrolling :)

Before starting the design process, I studied SoftMoc’s current website banners, typography system, layout structure, spacing, and promotional approach. The goal was to ensure each banner felt aligned with the existing SoftMoc brand identity while still introducing a fresh and elevated visual direction suitable for a modern footwear e-commerce experience.

 

↘︎↘︎↘︎ Discover the Concept Behind the Hero Banner

  • Objective
    To create a clean promotional banner focused on urgency and product visibility for a limited-time sale campaign ending May 24.

    Design Direction
    The selected HOKA shoe model is positioned as the primary visual element using a straight-on front-facing composition. This angle immediately captures attention and highlights the structure and identity of the shoe.

    To support the visual without overwhelming it, I introduced subtle fabric texture details in the background. These textures reference the shoe materials while adding depth and dimension to the composition.

    Key Design Decisions

    • Front-facing shoe placement creates a strong retail-focused visual hierarchy

    • Minimal background distractions keep attention on the product

    • Soft texture layering adds sophistication without competing with the footwear

    • Clear sale messaging reinforces urgency and improves promotional clarity

  • Objective
    To create a visually energetic summer campaign introducing multiple HOKA categories and encouraging customers to explore movement-focused lifestyles during the summer season.

    Creative Concept
    Different HOKA shoe models are displayed on futuristic platform structures with neon green and light yellow lighting accents. The environment creates a high-tech and fresh summer atmosphere while visually separating the different product categories.

    “Find Your Summer Move”
    The headline was designed to emotionally connect with customers by encouraging activity, movement, and seasonal refreshment.

    “Built for every kind of movement”
    And the supporting sub-headline communicates HOKA’s versatility across: Running, Trail running, Recovery footwear, Sandals etc…

    Visual Strategy

    • Neon green and yellow tones create freshness and seasonal energy

    • Platform structures add depth and premium presentation

    • Lighting direction enhances the futuristic aesthetic

    • Multiple shoe models communicate category diversity

  • Objective
    To introduce the newest HOKA Skyward X 2 model with a premium and product-focused visual approach.

    Design Direction
    This banner uses a split-screen composition featuring two official HOKA campaign visuals:

    • Left side: close-up street portrait focusing on the shoe’s side profile and technical detailing

    • Right side: lower-angle styling shot featuring a different colorway

    The layout emphasizes the footwear itself without adding unnecessary graphic elements or visual distractions.

    “SHOW NOW“ CTA button has added in this banner for purpose

    Key Design Decisions

    • Split-screen composition creates balance and storytelling

    • Different viewpoints showcase versatility and design detail

    • Minimal layout increases focus on the product launch

    • Typography placement remains subtle to preserve visual sophistication. *I intentionally reduced decorative elements so the product photography could lead the entire experience:)

  • Objective
    To create a bold, highly visual banner focused on comfort and product impact.

    Creative Direction
    A single shoe model dominates over half of the banner using a large-scale side profile composition. The enlarged placement creates immediate visual impact and draws attention directly to the silhouette and cushioning design.

    Behind the shoe, I introduced flowing particle-inspired elements to create movement and fluidity throughout the composition.

    The overall color palette was developed based on the shoe itself:

    • Purple as the dominant base tone

    • Red gradient lighting accents for energy and depth

    This creates a harmonious color system that feels immersive and visually cohesive.

    To maintain consistency with the brand identity, I used:

    • Montserrat Regular

    • Montserrat Bold

    Visual Strategy

    • Oversized shoe composition maximizes attention

    • Particle motion graphics add flow and energy

    • Minimal headline keeps the design feel native to SoftMoc ecosystem while maintaining readability

    • Harmonized gradients strengthen product integration

 

Mobile mockup

 
 

Mobile Version

 

Final Design Approach & Conclusion

Throughout this project, my design approach focused on balancing strong brand consistency with commercial effectiveness, while maintaining a modern athletic aesthetic and clean e-commerce presentation. Rather than creating four visually identical banners, I intentionally explored four distinct campaign directions to showcase versatility in promotional storytelling, seasonal marketing, product-focused visuals, and lifestyle-driven branding. Each concept was designed with a clear purpose — not only to create visually engaging content, but also to reflect how customers interact with retail experiences and make purchase decisions online.

As a senior designer with both visual and UI/UX experience, I believe strong design goes beyond aesthetics. A successful e-commerce banner should communicate clearly, guide attention through thoughtful visual hierarchy, and create an emotional connection that supports both engagement and conversion. Every design decision in this project was made with customer behaviour, shopping psychology, and brand positioning in mind.

Why I Chose HOKA?
I chose HOKA for this project for a personal reason as well. Running has always been an important part of my lifestyle — I run twice a week and regularly go on long trail runs every weekend. Because of my passion for running, HOKA felt like a natural brand choice for me. It is a brand I genuinely connect with, both from a performance perspective and through personal experience, which allowed me to approach this project with a deeper understanding of the audience, product, and lifestyle behind the brand.

Thank you for taking the time to read through this project and explore my design thinking. I truly appreciate your time, and thank you again for reading:)