Spice Alley Website Wireframes
High-Fidelity Wireframe Designs for Shopify
In 2018, I worked on a little side project called “Spice Alley”. Spice Alley was an online spice shop focused on fresh ingredients and flavor exploration. And I created it all from scratch!
As someone who loves cooking and also loves ecommerce, I wanted to try building and running my spice store on Shopify. There were many facets to this project – from sourcing spices and getting certified to handle and distribute food products, to testing recipes, and learning cost accounting. But my favorite part was designing the website.
I had a really clear idea of how I wanted to organize my website content for both user experience and SEO purposes. After drafting a content outline and a basic sitemap, I started to design the wireframes. Here they are:
Homepage Wireframes
Homepage full page design (both desktop and mobile)
Homepage mega menu (desktop)
Homepage optional promo banner (desktop)
Product Page & Cart Wireframes
Product page (desktop)
Cart page (desktop)
Collections & Search Wireframes
Collections list (desktop)
Collection page (desktop)
Search results (desktop)
Blog Wireframes
Blog recipes list (desktop)
Blog post (desktop)
About Us & Contact Us Wireframes
About us page (desktop)
Contact us page (desktop)
User Account Wireframes
Account sign up (desktop)
Account sign in (desktop)
Forgot password (desktop)
These are the high-fidelity wireframes that I created and passed off to a UI designer for mockups. The final Adobe XD files were then delivered to a developer for Shopify template implementation.