The Brief
Clear Skincare Clinics approached UEC with a unique challenge: to design an interactive landing page that would serve two key purposes. First, it would be shared across their entire 700-person team via a dedicated email campaign. Second, it would act as a legacy piece for new hires, forming an integral part of their day 1 induction experience. The objective was to create a visually engaging and memorable experience, woven into a single narrative, with content that was easy to consume and felt interactive.
Design Objectives:
The landing page was envisioned as a continuous scrolling site. This format would allow the content to flow seamlessly, guiding the user through the narrative without the need for clicking through multiple pages. This approach aimed to keep users engaged while maintaining a sense of discovery and momentum.
The content needed to be easily digestible. To achieve this, we broke it down into smaller, manageable sections, each focused on a specific topic or theme. This approach not only enhanced readability but also ensured that users could quickly grasp key messages.
The design had to capture the essence of Clear Skincare, reflecting its brand values and aesthetic, ensuring visual impact and memorability. A combination of high-quality imagery, dynamic typography, and carefully selected branded elements were used to create an immersive experience.
To engage users, the page was designed with interactive elements that responded to user actions, such as hover effects, animations, and micro-interactions. This was aimed at making the page feel dynamic and engaging.
Play the video to see the interactive on-scroll landing page in action.
Research and Discovery:
We began by conducting a series of stakeholder interviews to understand Clear Skincare's brand identity, core values, and key messages they wanted to communicate. Additionally, we reviewed existing induction materials to identify the most important content that needed to be highlighted.
To inform our design direction, we analysed current trends in interactive web design and continuous scrolling experiences. We also conducted user research, including surveys and usability tests with a sample of new employees and current team members, to gather insights into their preferences and pain points with existing materials.
Design and Development Process:
Wireframing and Prototyping: We started with low-fidelity wireframes to map out the content structure and navigation flow. The goal was to establish a seamless user journey that felt intuitive and engaging. We then moved to high-fidelity prototypes in Figma, incorporating visual elements such as color, typography, and imagery.
Visual Design: The visual design focused on aligning with Clear Skincare's brand guidelines while introducing fresh elements to create a memorable experience. We used a clean, modern design with ample white space to ensure readability and a sense of authority. High-quality images, smooth transitions, and interactive elements were integrated to keep users engaged.
Development: The page was developed using HTML5, CSS, and JavaScript to ensure cross-browser compatibility and responsiveness across devices. We implemented interactive elements such as on scroll animations parallax scrolling to create a dynamic user experience. The development team worked closely with the design team to ensure the fidelity of the final product matched the approved design.
Testing and Iteration: After the initial build, we conducted usability tests with a select group of Clear Skincare employees to gather feedback on the design and functionality. Based on this feedback, we made several iterations to improve the page's interactivity, load speed, and overall user experience.
Outcomes:
Increased Engagement: The landing page received positive feedback from the Clear Skincare team, with many employees highlighting the ease of navigation, visual appeal, and the engaging nature of the content.
Enhanced Onboarding Experience: New hires reported feeling more connected to the brand and more informed about Clear Skincare’s values and culture from day one.
Long-Term Value: As a legacy piece, the landing page continues to serve as an effective onboarding tool, ensuring new employees receive a consistent and impactful introduction to the company.
Key Takeaways:
This project underscored the importance of a user-centered design approach in creating a memorable and engaging experience. By leveraging continuous scrolling and interactive elements, we were able to craft a narrative that was both easy to consume and visually impactful, meeting the client's objectives and exceeding their expectations. The landing page not only served immediate needs but also established a foundation for future digital communication initiatives within the organisation.