In 2023, I developed Shoestack, a conceptual e-commerce platform designed to redefine the digital footwear shopping experience. Serving as the Product Designer, I set out to solve common friction points in online retail by blending bold, streetwear-inspired aesthetics with a highly intuitive conversion funnel. Over a focused sprint, I engineered an integrated seamless checkout flows, and prioritized mobile-first interactions to create a shopping experience that feels as premium as the products it hosts. This project serves as a showcase of my ability to marry high-energy branding with rigorous UX standards. The Hypebeast & Sneakerhead: Trend-conscious collectors who value high-energy branding, exclusive drops, and a visually immersive shopping interface. The Mobile-First Shopper: Digital natives who demand lightning-fast performance, frictionless "one-tap" checkout flows, and a seamless app-like experience on the web. The Style-Conscious Athlete: Users looking for the perfect blend of performance and aesthetics, requiring clear product storytelling and high-fidelity imagery to make informed purchases.
Target Audience🚹
The Hypebeast & Sneakerhead
Mobile-first shopper
Style-conscious Athlete
Challenges faced ❌
The core challenge of Shoestack was to balance a high-octane "hypebeast" aesthetic with the rigorous usability standards of a high-conversion retail platform. I had to ensure that the bold, streetwear-inspired branding—featuring heavy typography and vibrant gradients—didn't create cognitive overload or obscure the path to purchase. Designing for the sneakerhead community required a focus on visual storytelling that felt authentic while solving the technical "heavy lifting" of mobile performance and data-heavy product galleries.
Visuals & Usability
Asset Performance
Trust & Transparency
Key objectives?🎯
The strategic foundation of Shoestack was to transform the digital sneaker-buying experience into an immersive, high-velocity journey. I aimed to bridge the gap between "hype-culture" aesthetics and high-conversion retail mechanics, ensuring the interface felt as premium as an exclusive drop while maintaining the performance of a world-class e-commerce engine. The focus was on building a "sticky" mobile-first environment that encourages discovery while removing every possible barrier to the final checkout. Maximize Conversion Velocity: Streamlining the path from product discovery to "one-tap" checkout to capitalize on high-intent buyer behavior. Elevate Brand Storytelling: Utilizing bold typography and high-fidelity imagery to create a visually striking, streetwear-inspired identity. Optimize Mobile Performance: Engineering a lightweight, app-like experience that ensures zero lag during high-traffic product releases. Reduce Purchase Friction: Implementing intuitive size-recommendation tools and transparent shipping data to build immediate user trust. Enable Dynamic Discovery: Designing a modular "drop" system that allows for easy navigation of trending collections and limited-edition releases
Maximize Conversion velocity
Elevate Brand storytelling
Optimize mobile performance
Reduce purchase friction
Enable dynamic discovery
Project Discovery 🔬
The discovery phase for Shoestack centered on decoding the unique behaviors of the sneakerhead community and the high-stakes nature of limited-edition retail. I analyzed industry leaders like Nike SNKRS and StockX to identify how "scarcity" and "hype" could be translated into intuitive digital features without frustrating the average user. My research revealed that while users crave high-energy visuals, they prioritize speed and accuracy during high-traffic "drops." This insight shifted the project's focus toward a high-performance, mobile-first architecture that balances vibrant streetwear aesthetics with a frictionless path to purchase.
Mobile App strategy ⚙️
The mobile app strategy for Shoestack focused on creating a "high-velocity" retail experience that prioritizes speed and thumb-zone ergonomics. Since sneaker drops are won or lost in seconds, the architecture was designed to minimize the steps between product discovery and final confirmation. I implemented a "bottom-sheet" navigation system and one-tap checkout mechanics to ensure that users could navigate the entire store with a single hand, mirroring the fast-paced, on-the-go lifestyle of the modern hypebeast. Conversion-First Navigation: Utilizing a bottom-anchored menu and "thumb-friendly" action zones to facilitate rapid browsing and selection. The "Drop" Architecture: Implementing real-time countdowns and push notification triggers to drive urgency and return-user engagement. Micro-Interaction Feedback: Designing haptic-inspired visual cues and smooth transitions that provide immediate satisfaction during the "Add to Cart" process. Localized Personalization: Featuring dynamic content blocks that surface trending releases based on user preferences and regional "hype" data. Frictionless Checkout: Integrating biometric-ready payment gateways to reduce the checkout process to a matter of seconds
Conversion-first Navigation
Drop Architecture
Localized personalization
Frictionless checkout
Design Process 🪄
The design process for Shoestack was an exercise in balancing high-energy brand expression with rigorous e-commerce logic. I started by defining a high-contrast visual language—using bold typography and vibrant accents—to capture the "hype" of sneaker culture without sacrificing legibility. Moving into Figma, I constructed a modular design system that allowed for rapid iteration of "drop" pages and product galleries. The focus remained on the "thumb-zone" experience, ensuring every interaction felt tactile, responsive, and geared toward a frictionless mobile checkout. Hype-Centric Moodboarding: Curating a visual direction that blends urban grit with premium minimalism to appeal to the "Hypebeast" demographic. Modular Component Library: Building a robust design system in Figma for consistent button states, countdown timers, and product cards. Tactile Prototyping: Creating high-fidelity interactions to test the fluidity of "swipe-to-buy" and 360-degree product rotations. UX Stress Testing: Simulating high-traffic "drop" scenarios to ensure the path to purchase remains clear under visual "noise."
Let's Design 🎭.
The transition into Framer marked the pivotal moment where strategy evolved into a high-performance digital reality. Moving beyond research, this phase was dedicated to transforming complex mechanical concepts into a tangible, high-fidelity experience that prioritized technical precision. I focused on engineering fluid interactions and refining the UI to ensure every component reflected the rigor of the CAD discipline. Framer served as the ultimate canvas for merging creative design with functional execution, resulting in a seamless, intuitive, and visually rewarding professional platform.
🎭 Curtain Call
Building a high-precision portfolio for a CAD engineer challenged me to design with the same mathematical rigor and structural integrity found in mechanical engineering. This project was a masterclass in systemic thinking, requiring me to lead through the ambiguity of translating dense industrial data into a fluid, user-centric interface. I had to strike a delicate balance between visual innovation and technical necessity—ensuring that while the site looked premium, it never compromised on the functional clarity required by a technical audience. What I am most proud of isn't just the sleek, dark-mode aesthetic, but the way we bridged the gap between complex engineering and digital accessibility. Whether it is a recruiter inspecting a high-polygon assembly or a client reviewing technical schematics, the friction of data-heavy viewing has been replaced by a seamless interactive experience. For the user, this isn't just a portfolio; it is a high-performance tool for professional validation. And that, to me, is the true power of design.
