SuperPawer is a business that sells airdried treats for pets. Airdrying food process includes sourcing raw food, process them and lay them into an airdrying machine for 24-48 hours until the moisture is all gone. It's kind of like an oven but lower in temperature. The product turns out to be like the texture of chips and much smaller in size compares to their original form. SuperPawer is a newly founded company, exists because we are a family with 5 cats and a dog. Making our own treats is much more budget-friendly than purchasing an outside pre-made product. We could explore with different ingredients, combinations, and food sources. The cats love to hang around when the machine is turned on.
Since our own cats have loved it. we would love to share it with others who may not have the time to make it or own the machine. That is the origin of the business. To allow every cats and dogs in Hong Kong to taste homemade style healthy treats on a budget.
I'm responsible for product photography, financial and order processing. Since this kind of a fun/side project, we want to start with as little capital as possible. We want to start things slow. Initially, we posted our product, listing our menu on Instagram and Whatsapp. Customers would direct message us for questions or orders. It was fine when the volume is low. We always know we want a better system for us and a better experience for the customers. We want to have a website where customers could browse all the products effortlessly and efficiently. And we can reduce some of the manual work of asking customer's information and confirming their orders.
An eCommerce with online payment would be the most ideal.
We could easily go with Shopify, Squarespace or other platforms and call it a day. But after studying for the cost. We think its not the best choice at this moment. And we want to settle something in between. So as the person who is in charge of the UIUX.
I decided to build a website that cost $0. To build and to run.
I put in more effort into this project than any other project I've previously done. I feel like this product truly belongs to me. And with the skills I've gained over the years, I think its totally possible to make a site that I'm happy and proud of. So join me and I'll explain how I did that.
First, I need to decide what will be on the site. A clear catalog that is easily distinguishable from each product. Each product should have a clear picture of the final results. People can get into the product and know more information about. I design a grid that contains all the products people could scan through the page quickly with the images and title. Personally, I am a big fan of minimalism. I did embrace my vision into the design. Only putting the essentials and make the product shines with minimal distractions.
The answer is, I am a big fan of Webflow. It is a website building tools for designers. I think it really empowers designers to build something that they previously can't. We used to rely on others to help us build our dreams. But with the help of Webflow, we can finally achieve something. With a paid account, I could host websites with a Webflow subdomain on it. And that makes this whole project cost zero dollars possible because I already have the account. If I really mind the Webflow subdomain, I could use a URL shortener to share it with others (ex: bit.ly/nameyouwant) for a prettier look.
As for the way of ordering, we didn't go with the "add to cart and online checkout" option as that exceed of cost budget. So we'd go with the "fill in the form and we'll contact you" option. The customer would need to fill in the item and the quantity they would like to order. Some personal information like shipping address and ways of contact. Submit the form then we could reach out for them for confirmation and provide them payment options including atm transfer, Payme, and FPS which is familiar with HK customers. This method serve us well and it saves us a lot of development costs and fees. And besides, we think its good to have some interaction with the customers over message. Of course, we will see where this business leads us. We may adopt the online payment solution in the future.
And of course, each product has it's limitation. Webflow has no exception. I wanted to build a site that is web app like, that could go seamless between pages. Sort of like Google Drive where you tab on anything, the page won't go blank and then the next page appears. It gives a feeling of interacting with a product, not just a bunch of screenshots. However, as the time of writing Webflow couldn't really do that yet. So I decided to use some page transition to smoothen things a bit instead.
As I said early, this is my most enjoyable project as almost everything you see on the site is built by me. From all the product images, designs, layouts, styles, responsive changes, transitions, data flow, etc. except some text copy is provided form other team members. I am also really glad I could build it in Webflow. Without it would be an extremely huge challenge for me, besides I don't even know where to host it. I will need to buy a domain for sure. The feeling of the archive is what drives me to push my self to be a better designer/product creator. And I will continue to advance my skills and find other meaningful projects to work on.