Kyle Dallafior

Case Study Overview

This project was focused on designing a modern and user-friendly e-commerce platform for a tropical, new-age footwear brand. The design journey integrated AI-driven wireframing using Relume.io and Figma for creating a cohesive, scalable design system. The end result was a seamless experience for users, enhanced by custom interactions and carefully curated visual elements.

Step 1: AI-Powered Wireframing with Relume

To begin the project, I leveraged the AI capabilities of Relume.io to generate wireframes quickly and efficiently. The process involved guiding the AI with tailored prompts to create layouts that fit the project’s needs, such as a hero section for the home page, a product showcase, and affiliate marketing integration.

Once the wireframes were completed, I exported them from Relume into Figma, taking advantage of Figma’s robust design system integration to further refine and scale the wireframes.

Step 2: Importing to Figma and Enhancing the Design

After importing the wireframes into Figma, the next step was to integrate the layouts into a flexible, scalable design system. This ensured that future updates and edits to the wireframes could be made efficiently, without having to redesign individual elements from scratch.

• Component Creation: Each section of the website, from product cards to CTAs, was transformed into a component, allowing for seamless updates across all pages.
• Global Style Control: Figma’s global style control over typography and colors was set up to ensure consistency.

Step 3: Defining the Brand Theme and Visual Style

Drawing from the brand’s tropical and energetic nature, I selected colors that evoked warmth, vibrancy, and excitement. The chosen palette consisted of a mix of bold, bright hues with softer, more natural tones to reflect the brand’s connection to nature and adventure.

• Color Selection: Tropical tones were chosen to convey energy and vibrancy.
• Custom Typography: A mix of modern and bold typography was selected to match the brand’s youthful, dynamic persona.

Step 4: Styling and Branding Integration

The components created earlier were styled according to the tropical theme, resulting in a cohesive user interface that reflected the brand’s identity. I also ensured that the visual design worked harmoniously across different sections of the site, including the product pages and shopping cart.

AI-Driven Features: To enhance the visual experience, I utilized Midjourney to generate all the media assets.

Step 5: Adding Custom Interactions

This step focused on enhancing the user experience by designing custom interactions, including hover states for product cards, interactive CTAs, and custom animations for smooth transitions.

Conclusion

The final design created a cohesive, engaging user experience for the footwear brand’s website, integrating a tropical aesthetic with modern e-commerce functionality. By using AI tools like Relume.io and Midjourney for media, and refining everything in Figma, the process was efficient and allowed for rapid iteration and updates.