We’ve reimagined the home screen experience, the first touchpoint for your prospective students, setting the perfect tone for their onward journey on your virtual experience. This long-term initiative is focused on boosting engagement and conversions through an enhanced user interface, giving you the tools to make an unforgettable first impression. Each design offers a distinct style and layout, tailored to meet the unique needs of your institution.

Design One

This design creates an engaging first impression with its full-screen background video behind an overlay to ensure WCAG guidelines, and dynamic elements that fade in as the page loads. Feature your student ambassador front and centre. 

As you can see, above the primary heading, text appears with a transparent effect, creating a sleek and modern look. However, this text is disabled on mobile devices to ensure the ambassador video is seen.

The "Personalise your Experience" button triggers a modal, allowing users to select filters and tailor the content to their interests. Additionally, the circular video button when clicked, plays inline showcasing your student ambassador, providing a warm and interactive introduction to the platform.

Design Two

The second design introduces a sleek, glossy look to a swipe-up container that smoothly animates from beneath the screen. Unlike the previous design, Design Two highlights an ambassador video directly from a student. This inline video player allows the ambassador video to play seamlessly within the container, providing a more personal and authentic experience. The “Personalise your Experience” button in this layout takes users to a dedicated second page, where they can apply filters to tailor their experience.

Design Three

Design Three combines interactivity with immersive storytelling. Initially, users are presented with a softly blurred 360° panorama, drawing focus to the content: copy, the same inline ambassador video player as Design Two, and prominent call-to-action buttons. When users click “Take a Quick Peek,” the background seamlessly unblurs while the overlay content fades out, revealing a fully interactive 360° panorama powered by Vepple's Content Viewer. This transition creates a smooth, immersive experience, encouraging users to explore campus spaces in detail.

Options

Panorama Selector

The Panorama Background setting allows you to choose a post that’s categorised as the panorama content type that will display as the blurred background before unblurring into Vepple’s Content Viewer.

Style Changes

The colour settings provide extensive customisation options for various text and background elements, ensuring that the home screen aligns perfectly with your institution’s branding.

• Background Colour: allows you to define the main background colour for the primary containers for Design Original and Two, or when the overlay is disabled for Design One and Three (see below).  
• Heading Colour & Paragraph Colour: Control the appearance of titles and body text for better readability and visual harmony.
• Personalisation/Lead Capture Colours: Set the background - on Designs One and Three - and text colours for the content that appears when users personalise their experience or enter lead capture details.
• Video Colour: Customise the background - for Design One - and text that overlays or appears alongside the welcome video to ensure clarity against the video background.
• Label Colour: Define the colour for filter names and icons within the personalisation or search interface.
• Selection Colour: Applies to search text and selected filters, making active selections stand out.
• Prompt Colour: Adjust the supplementary text that provides guidance below the filter options.

Overlay

You can customise the overlay by adjusting its colour and opacity for better text readability. The Overlay Colour can be selected to match your branding, and the Opacity slider lets you control its transparency (0 to 0.8).

When the overlay is disabled, text elements move into containers with a solid background colour. This colour can be customised in the Styles tab of the Home Screen settings, ensuring a clean and cohesive look that aligns with your university’s visual identity.

Welcome Video

The Welcome Video settings allow you to personalise the home screen with an engaging introduction for users. You can enable or disable the welcome video with a simple toggle, disabling it will replace the video with the Personalisation Form.

When enabled, you can upload an Ambassador Image to visually represent the video, giving it a more personal and inviting touch.

The video itself supports the formats MP4 and WebM, with a maximum file size of 10MB. Additionally, you can include a transcript of the video, which is displayed for accessibility purposes, ensuring all users can engage with the content. For enhanced user experience, there’s also an option to enable Real-Time Captioning, providing active line highlighting as the video plays.

Normal Transcription 

Real Time Transcription

Static Animation.

• Static animation set to "No" likely means the animation is enabled, and it will behave dynamically moving, transitioning, looping, etc.

• If you toggle it to "Yes", it probably disables movement, freezing the animation in a single frame or making it display just a still version of what would otherwise be animated.

Query Parameters

After populating your designs with the necessary fields - such as the Panorama field for Design Three - switching between them becomes seamless using query parameters, for example for our demo site the link would be https://demo.vepple.co.uk/?hpd=3.

• ?hpd=0 - the Original Design.
• ?hpd=1 - Design One.
• ?hpd=2 - Design Two.
• ?hpd=3 - Design Three.