Desktop Mockup
Interactive Navigation Bar: Created custom icons in Figma for the navigation bar. Added clickable button elements, improving interactivity and usability.
AI-Generated Images: Leveraged AI tools to create visuals that embody the brand’s adventurous spirit and the unique ambiance of each featured location.
Added Destinations Section: Featured locations such as Norway, Papua New Guinea, and Bhutan were highlighted in the newly added Destinations Section, showcasing their distinct character through tailored AI-generated imagery.
Enhanced Product Benefits Section: AI-generated images were integrated into the Product Benefits Section, with gradient effects harmonizing visuals within their respective frames.
Gradient Effects for Text Legibility: Used gradient overlays on images to enhance the readability of overlaid text, ensuring a balanced visual aesthetic.
Desktop Iteration I
Color Changes: The Primary Color was manually refined from the Hero Image to ensure harmony with the website's design. Complementary colors were selected using the Adobe Color Wheel, then fine-tuned for functional and aesthetic alignment.
Image Color Correction and Replacement: Images were adjusted to match the updated color palette, ensuring visual consistency. Some images were replaced with AI-generated visuals that aligned better with the refined palette.
Background and Neutral Shades: The background was updated to a dark navy tone derived from the primary color. The white elements were replaced with a light neutral shade for a softer contrast and a cohesive look.
Typography Update: The font was updated to Lato, enhancing readability and modernizing the website's typography.
Style Sheet Creation: A Style Sheet was implemented to standardize formatting, ensuring uniformity across the website’s design elements.
Desktop Iteration II
Search Feature Integration: The Search Feature was repositioned into the Navigation Bar, streamlining the user interface and making the feature more accessible.
Call-to-Action in Hero Section: A Call-to-Action (CTA) was added to the Hero Section, directly guiding users to engage with the form, improving conversion potential and user flow.
Style Sheet Iterations for Accessibility: Testing with the Stark Plugin revealed insufficient contrast for the primary blue and green, prompting changes.
Contrast enhancement: The primary blue and its darker tone were adjusted to achieve better contrast. The light neutral shade was also modified to align with accessibility standards.
Secondary colors refinement: Brightened slightly to complement the newly adjusted primary colors while preserving harmony.
Form Design:
Form Design: Simple and straightforward forms were designed to collect user information efficiently. Interactive elements, such as text forms, clickable buttons, and checkboxes, were included to enhance usability and engagement.
Progress Bar: A progress bar was introduced to visually indicate the user's progress through the form, improving navigation and user experience by setting clear expectations.
AI-Generated Illustrations: AI-generated illustrations were created to add an element of delight and visual interest to the form. These illustrations were customized to fit the site’s color palette, ensuring cohesion with the overall design.
Form Iteration I
Increased Button Size: Enlarging the button size enhances accessibility, making it easier for users with varying dexterity levels or screen resolutions to interact with the form.
Recentered Illustrations: Aligning the illustrations centrally improves the visual balance of the form, creating a more cohesive and polished appearance.
