[{"_path":"/portfolio/fellow-creatures","_draft":false,"_partial":false,"_empty":false,"title":"Tasty treat: Designing a vegan chocolate eshop","description":"Building an e-commerce website from scratch might not sound like an easy task. However, having an experienced guide can make it into an exciting and fun project.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"tasty-treat-designing-a-vegan-chocolate-eshop"},"children":[{"type":"text","value":"Tasty treat: Designing a vegan chocolate eshop"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Building an e-commerce website from scratch might not sound like an easy task. However, having an experienced guide can make it into an exciting and fun project."}]},{"type":"element","tag":"h2","props":{"id":"the-e-commerce-journey"},"children":[{"type":"text","value":"The e-commerce journey"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is how the journey started for me. Unsurprisingly, it was with a client..."}]},{"type":"element","tag":"h3","props":{"id":"having-a-great-client-helps"},"children":[{"type":"text","value":"Having a great client helps"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Zsolt is good friend of mine and a great mind for business. When he asked me to make his website, I went for it, even thought I had little experience with Shopify development."}]},{"type":"element","tag":"h3","props":{"id":"testing-the-waters"},"children":[{"type":"text","value":"Testing the waters"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Our first theme was built on top of a free theme and I would edit it so that it would suit Zsolt's needs as well as it could. However, there was still a need for a more specific layout and fine-grain control over the individual elements, so I decided to rebuild the theme from scratch."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is how the current iteration came to be. The shop is designed with liquid templates and advanced functionality is added with JavaScript. This includes login modal windows. Cart panel that slides from the right. Adding to your cart and updating the items through Ajax (without reloading the page), and many other details that make the shopping experience so much smoother."}]},{"type":"element","tag":"h3","props":{"id":"apps-can-be-your-friends"},"children":[{"type":"text","value":"Apps can be your friends"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Additionally, there was the need to integrate several key apps."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://apps.shopify.com/subscription-payments","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Recharge Subscriptions"}]},{"type":"text","value":" for the ability to sell subscription products"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://apps.shopify.com/advanced-custom-field","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Advanced Custom Fields"}]},{"type":"text","value":" for adding a bunch of important information about the products"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://apps.shopify.com/connected-inventory","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Connected Inventory"}]},{"type":"text","value":" for the ability to sell products in bundles"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://apps.shopify.com/product-reviews","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Customer Reviews"}]},{"type":"text","value":" for loads of stars"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://apps.shopify.com/order-printer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Order Printer"}]},{"type":"text","value":" for easily printing the package labels and receipts"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For Recharge Subscription, I made sure that the subscription products are added to cart with the correct monthly billing information. I also implemented a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"one-click checkout"}]},{"type":"text","value":" for quick and smooth buys."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Advanced Custom Fields are used mainly for product pages where different types of information is necessary. Products can have a list of ingredients, additional images, custom description for body text and other features."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Connected Inventory is vital if you want to sell your products in bundles. It allows you to link different products so that a box of five different chocolates registers in the stock quantity of the individual products. I have set up these relationships for the bundle products so that the numbers always match."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Customer Reviews is pretty self explanatory. The key element here is the design. It was important to get the style of the reviews to match the overall theme of the shop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For Order Printer I designed custom labels which were made exactly for particular label sheets. This allows to simply print the labels and streamlines the process of packaging and posting."}]},{"type":"element","tag":"h3","props":{"id":"images-large-but-light"},"children":[{"type":"text","value":"Images? Large but light"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An important requirement for Fellow Creatures was image optimization. As the shop uses large images and gifs, it was essential to optimize them to make the shop load fast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I use "},{"type":"element","tag":"a","props":{"href":"https://bulkresizephotos.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Bulk Image Resizer"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://tinypng.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Tiny PNG"}]},{"type":"text","value":" for optimizing images in advance. However, I also implement a solution which serves different sized images on different devices. On mobile, you might only need a 400x300 image, so why load 1920x1080? This greatly improves the performance for mobile shoppers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Another important aspect of the Fellow Creatures brand was a fun and playful design. This includes the use of moving elements and images. I have designed an animated SVG strip on the homepage and a logo slider. Also, try going to the "},{"type":"element","tag":"a","props":{"href":"https://www.fellowcreatures.co.uk/collections/frontpage","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"shop page"}]},{"type":"text","value":" and hovering over a product. The image starts moving in a loop! These small touches are really what makes a website special."}]},{"type":"element","tag":"h2","props":{"id":"final-thoughts"},"children":[{"type":"text","value":"Final thoughts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All this work was worth it in my eyes. Zsolt is very happy with the site, it generates revenue, and we continue to work on further ideas and improvements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visit the store on "},{"type":"element","tag":"a","props":{"href":"https://www.fellowcreatures.co.uk/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"FellowCreatures.co.uk"}]},{"type":"text","value":"."}]}]},"head":{"title":"Fellow Creatures Store","description":"Find out how I developed the e-commerce website on Shopify that sells vegan chocolates.","image":"/image/portfolio/fellow-creatures.jpg"},"fields":{"image":"/image/portfolio/fellow-creatures.jpg","order":100,"skills":["Shopify","Liquid","Tailwind CSS"]},"featured":true,"type":"full","_type":"markdown","_id":"content:portfolio:fellow-creatures.md","_source":"content","_file":"portfolio/fellow-creatures.md","_extension":"md"},{"_path":"/portfolio/strelak-community-garden","_draft":false,"_partial":false,"_empty":false,"title":"Watch it grow: Developing a community garden website","description":"This was a lovely community garden project which I supported by volunteering as a web designer. The landing page I created provided a great for people to join the project.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"watch-it-grow-developing-a-community-garden-website"},"children":[{"type":"text","value":"Watch it grow: Developing a community garden website"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This was a lovely community garden project which I supported by volunteering as a web designer. The landing page I created provided a great for people to join the project."}]},{"type":"element","tag":"h2","props":{"id":"garden-needs-water-and"},"children":[{"type":"text","value":"Garden needs water and..."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The website's goal was to bring in people interested in gardening. The landing page enabled the visitors to register as either a volunteer (helping out in the garden) or a gardener (owning a piece of the garden bed to grow their plants in). I created a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"database"}]},{"type":"text","value":" which stored the information about the registered gardeners and calculated how many free spots were left for people to book."}]},{"type":"element","tag":"h2","props":{"id":"tech-for-the-nature"},"children":[{"type":"text","value":"Tech for the nature"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The website offers three ways of participating. Registering as a volunteer or a gardener, or subscribing to a newsletter. I created a special "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"form for each action"}]},{"type":"text","value":". The forms are linked to a shared email and to a central database, where the user data is safely stored. I used "},{"type":"element","tag":"a","props":{"href":"https://docs.netlify.com/forms/setup/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Netlify Forms"}]},{"type":"text","value":" to link the forms to the admin email. This way, the garden team gets a notification about each registration."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I used "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase"}]},{"type":"text","value":" to store the data. This makes it easy to link the database with the forms through the API. It also allows for "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"scalability"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"efficient data management"}]},{"type":"text","value":". The forms are built with Vue.js. This makes it very easy to implement important features such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"validation and error messages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The website was hosted on Netlify - did you know that "},{"type":"element","tag":"a","props":{"href":"https://www.netlify.com/sustainability/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"static hosting is better for the environment"}]},{"type":"text","value":"?"}]},{"type":"element","tag":"h2","props":{"id":"sharing-is-caring"},"children":[{"type":"text","value":"Sharing is caring"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As the website was to be "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"shared across social media"}]},{"type":"text","value":", it was especially important to create optimized social sharing tags and "},{"type":"element","tag":"a","props":{"href":"https://css-tricks.com/essential-meta-tags-social-media/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Open Graph images"}]},{"type":"text","value":". This adds that extra punch when the web is shared on Facebook or Twitter."}]},{"type":"element","tag":"h2","props":{"id":"animation-is-bringing-things-to-life"},"children":[{"type":"text","value":"Animation is bringing things to life"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We wanted to communicate a fun and friendly vibe which the garden has in real life. I used open source illustrations and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"animated"}]},{"type":"text","value":" them with "},{"type":"element","tag":"a","props":{"href":"https://greensock.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"GSAP"}]},{"type":"text","value":" library. Little interactive elements make users stay on the page and play around with it. My goal, as always, is to create a digital experience which the users enjoy and spend time with."}]},{"type":"element","tag":"h2","props":{"id":"final-thoughts"},"children":[{"type":"text","value":"Final thoughts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The garden beds were soon booked for the summer and the website is going to grow together with the community, as we continue to develop new features."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can follow the community growth on "},{"type":"element","tag":"a","props":{"href":"https://zahradastrelak.cz/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ZahradaStrelak.cz"}]},{"type":"text","value":"."}]}]},"head":{"title":"Strelak Community Garden","description":"Creating a website that helps to build a community. A heartwarming work 🌿.","image":"/image/portfolio/community-garden.jpg"},"fields":{"image":"/image/portfolio/community-garden.jpg","order":500,"skills":["Netlify","Vue.js","Tailwind CSS","Figma"]},"featured":false,"type":"full","_type":"markdown","_id":"content:portfolio:strelak-community-garden.md","_source":"content","_file":"portfolio/strelak-community-garden.md","_extension":"md"}]