Hero Carousel Visuals

The Integrate homepage hero carousel was a pivotal project aimed at creating a visually captivating and functional centerpiece for their web presence. Without the luxury of extensive user research or testing, I leaned on industry best practices, competitor analysis, and rapid iterations to deliver a design that balanced brand storytelling with user engagement. The result was a dynamic and visually engaging interface that resonated with users and amplified key messaging. This project honed my ability to design effectively within constraints while maintaining a user-first mindset.

Overview

Challenge

The Hero Carousel redesign for Integrate’s homepage introduced a feature that had not previously existed on the site—a dynamic and visually engaging carousel. The concept was developed to elevate brand messaging, showcase Integrate’s core solutions, and create a more interactive experience for visitors.

Challenge

The primary challenge was creating a visually compelling carousel that effectively communicated Integrate’s core solutions to diverse audiences while optimizing for responsiveness and performance.

Approach

Challenge

Approach

The approach involved analyzing competitor designs, gathering input from cross-functional teams, and iterating through wireframes and prototypes. Using Adobe XD, I created responsive layouts and tested multiple versions internally for usability.

Methods

Stakeholder Collaboration:

Engaged cross-functional teams, including marketing, product management, and executives, to align on objectives for the carousel design. Facilitated workshops and design reviews to ensure the solution met both business goals and user needs.

Prototyping:

Created high-fidelity prototypes in Adobe XD to visualize the carousel functionality and layout. Iterated on designs to explore animations, transitions, and overall user flow, providing stakeholders with a tangible representation of the final product.

Feedback Cycles:

Conducted multiple rounds of internal feedback sessions to refine the design. Incorporated suggestions from key stakeholders and team members to ensure the carousel aligned with both branding guidelines and user expectations.

Analytics Review:

Collaborated with the marketing and analytics teams to analyze user engagement data from the live version of the homepage. Assessed metrics such as click-through rates and time on page to measure the carousel's effectiveness and identify areas for future improvement.

Solution

Slide 1 | Precision Campaign

For this slide, I leveraged an existing visual from the Precision Campaign and enhanced it to establish a compelling hero presence. The focus was on refining the campaign's visuals by applying bold imagery and strategic color enhancements to draw attention. Additional design elements, such as subtle overlays and gradients, were integrated to add depth and sophistication while maintaining consistency with the brand identity.

Slide 2 | Mobile Connect

This slide prominently showcases Mobile Connect through superimposed product screenshots displayed on mobile devices, highlighting its functionality and relevance. To provide context and evoke a professional atmosphere, I included a video background featuring networking professionals. To maintain focus on the central message and visuals, I drastically subdued the video by overlaying it with a black gradient. This design choice pushes the background into the distance, allowing the mobile devices and copy to stand out with greater clarity and impact.

Slide 3 | Data Guardian

This slide emphasizes the importance of quality data and compliance through dynamic and symbolic visuals. A looping video of abstract shimmering blue electrons, animating in a particle wave motion, represents the seamless flow of digital connectivity and robust data integrity. Overlaid on this backdrop is a static shield icon with a check mark at its center, symbolizing protection and trust. The composition balances movement and stability, reinforcing the message of reliability and excellence.

Slide 4 | Integrate's Marketplace

The hero imagery for Integrate's Marketplace transforms static visuals into an engaging, interactive experience. Building on the Marketplace's established campaign artwork, featuring static bubbles, the creative studios team brainstormed ways to bring these elements to life. The result? A dynamic Cursor Trail Animation effect that activates as users interact with the page. This animation breathes energy into the design, creating the illusion of bubbles moving fluidly with the user's cursor. This feature not only enhances visual appeal but also mirrors the adaptability and fluidity of Integrate's Marketplace solutions, offering a seamless and interactive user experience.

Results

Increased Engagement: The introduction of the Hero Carousel led to a notable increase in user interaction with the homepage. Visitors were drawn to the visually dynamic design and interactive elements, resulting in higher click-through rates on each slide.
Enhanced Messaging Clarity: Each slide of the carousel effectively communicated Integrate’s core solutions, providing users with a clear understanding of the company’s offerings at a glance. The visually cohesive design ensured key messages stood out.
Improved User Retention: The engaging visuals and interactive elements helped reduce bounce rates, as users spent more time exploring the carousel and subsequent pages on the website.
Brand Elevation: The innovative design, coupled with modern animation techniques, showcased Integrate as a forward-thinking industry leader, strengthening brand perception and reinforcing trust among existing and prospective clients.
Cross-Functional Success: The collaboration between the creative studio and development teams brought the carousel to life, demonstrating the power of cross-functional teamwork in delivering a seamless and impactful digital experience.

Reflection

Learnings and Insights

Introducing the Hero Carousel to Integrate’s homepage for the first time presented a unique opportunity to reshape how the brand showcases its core solutions. Collaborating closely with stakeholders, we identified the need for a visually dynamic feature to highlight Integrate’s offerings, inspired by competitor research. While the process was iterative, it was clear that engaging visuals combined with intuitive storytelling could leave a lasting impression on users.

One key takeaway was the importance of balancing visual hierarchy within the carousel. Each slide had to present its solution as the focal point while ensuring a cohesive narrative across all slides. Subtle animations, such as the particle wave on the Quality & Compliance slide and the cursor trail animation for the Marketplace, played a crucial role in making the experience feel engaging without overwhelming the user.

Challenges

The development timeline posed challenges, as we worked to align creative execution with technical constraints. For example, introducing motion elements like video overlays and interactive cursor animations required close collaboration with developers to maintain performance standards. Additionally, ensuring the visual and functional aspects of the carousel resonated with both end-users and stakeholders required multiple feedback cycles and iterations.

Outcomes

While specific metrics weren’t shared, initial feedback from stakeholders and internal teams indicated that the Hero Carousel successfully established Integrate's homepage as a more engaging entry point. The new design not only elevated the brand’s digital presence but also planted the seeds for future interactive design enhancements across other digital platforms.

This project reinforced the value of cross-functional collaboration and creative problem-solving in delivering user-centered design solutions. As a first-of-its-kind feature for the homepage, the Hero Carousel stands as a testament to the impact of design in shaping meaningful user experiences.

End of Season Results

The Hero Carousel was implemented during the 2023–2024 period and served as a key feature on Integrate’s homepage, offering a fresh way to highlight the company’s solutions. While specific performance metrics were not provided, the launch was well-received internally and set a new standard for presenting Integrate’s core offerings.

The carousel acted as a stepping stone for introducing dynamic and interactive elements to the homepage, demonstrating the value of thoughtful storytelling paired with visually engaging design. It also encouraged further experimentation with motion graphics and interactivity, reinforcing the importance of collaboration between design and development teams.

Since my tenure at Integrate, the Hero Carousel has been sunset as part of a broader redesign reflecting the company's evolving priorities and strategy. While it is no longer live, the project remains a meaningful case study in delivering user-focused design solutions that align with both brand and business goals.

Andy Phonhsongkham – Designer

Andy Phonhsongkham – Designer

Overview

Challenge

Challenge

Challenge

Challenge

Challenge

Approach

Challenge

Approach

Methods

Stakeholder Collaboration:

Prototyping:

Feedback Cycles:

Analytics Review:

Solution

Slide 1 | Precision Campaign

Slide 2 | Mobile Connect

Slide 3 | Data Guardian

Slide 4 | Integrate's Marketplace

Results

Reflection

Learnings and Insights

Challenges

Outcomes

End of Season Results

Andy Phonhsongkham – Designer

Hero Carousel Visuals

Overview

Challenge

Challenge

Challenge

Challenge

Challenge

Approach

Challenge

Approach

Methods

Stakeholder Collaboration:

Prototyping:

Feedback Cycles:

Analytics Review:

Solution

Slide 1 | Precision Campaign

Slide 2 | Mobile Connect

Slide 3 | Data Guardian

Slide 4 | Integrate's Marketplace

Results

Reflection

Learnings and Insights

Challenges

Outcomes

End of Season Results

This website uses cookies.