Sandls E-commerce Footwear Shop
Comprehensive e-commerce footwear shop design leveraging AI tools for wireframing, visual design, and content creation. From concept to live site using Relume.io AI, Figma, Mid-Journey, and custom HTML/CSS development.
Project Overview
Sandls represents an innovative approach to e-commerce design, leveraging cutting-edge AI tools to investigate and create a comprehensive footwear shop storefront. This project demonstrates the power of AI-assisted design workflows from initial wireframing to live site deployment.
The Challenge
Modern e-commerce requires rapid prototyping and sophisticated design execution while maintaining high-quality visual standards. The challenge was to explore how AI tools could accelerate the design process while creating a compelling footwear shopping experience that drives conversions and showcases products effectively.
The Solution
I developed an AI-powered design workflow utilizing Relume.io for low-fidelity wireframing, Figma for detailed design refinement, Mid-Journey for custom imagery creation, and finally exported to HTML/CSS for a fully functional live site. This process showcases the seamless integration of AI tools in modern design practice.
Design Evolution
Mid-Fidelity Wireframes
Initial wireframes focusing on layout structure, information hierarchy, and user flow patterns. These establish the foundational framework for component placement and interaction patterns.
- Information architecture mapping
- Layout grid establishment
- Component hierarchy definition
- User flow optimization
High-Fidelity Mockups
Pixel-perfect designs with complete visual styling, typography, color application, and detailed component specifications. Ready for developer handoff and implementation.
- Complete visual styling
- Typography implementation
- Color system application
- Developer specifications
Design Principles
Purpose-Driven
Every component serves a specific purpose and solves real user problems. Design decisions are driven by user needs and business objectives.
Scalable & Flexible
Built to grow with the product and adapt to changing requirements. Components are modular and can be combined in multiple ways.
Consistent Experience
Unified visual language and interaction patterns create a cohesive experience across all touchpoints and platforms.
Accessible by Default
All components meet WCAG accessibility standards and support diverse user needs, abilities, and technologies.
Performance Optimized
Lightweight, efficient components that load quickly and perform smoothly across all devices and network conditions.
Developer Friendly
Clear documentation, reusable code, and consistent naming conventions make implementation straightforward and maintainable.
AI-Powered Design Process
Relume.io AI Wireframing
Created low-fidelity wireframes using Relume.io AI to establish foundational e-commerce structure and user flows
Figma High-Fidelity Design
Refined wireframes into polished, detailed designs with comprehensive footwear product layouts and interactions
Mid-Journey AI Imagery
Generated custom footwear product images and visual content using AI-powered image generation for authentic brand imagery
HTML/CSS Export & Development
Exported designs to clean, responsive HTML/CSS code and deployed as a fully functional live e-commerce site
Launch & Iterate
Deploy the system, gather feedback, and continuously improve
Results & Impact
Development Speed
Faster feature development through reusable components and clear documentation
Design Consistency
Unified visual language across all products and platforms
Design Debt
Reduced technical and design debt through systematic approach
AI Workflow Efficiency
Significant improvement in design-to-development workflow through AI-powered wireframing and content generation
