Your Special Sound
personalized wall art from sound
Personal project
stack:React, Redux Toolkit, Firebase, Shopify Storefront API
what i did:Everything
site/demo:View site
project purpose & problems I needed to solve
Design tools that feel powerful, yet are automated & easy to use.
I had wanted to build an e-commerce business as a side project in the personalized art space for a while, being inspired by the likes of The Night Sky and The Birth Poster. I had however struggled to come up with a niche to enter until I found myself having developed a small sound visualizer for a client that abandoned the project shortly after starting it.
The designs themselves are made with the HTML5 Canvas API and I used Material UI for the UI components in order to save time and work on the drawing logic and templates instead. React Redux is used to maintain a centralized state store, which allows for the component responsible for drawing to the canvas to easily respond to changes in the other components and events like image or audio uploads etc.
Firebase Firestore & Google Cloud Storage are used to securly store customer data and customer designs.
challenge: friction
Reducing friction in every step,creating a better user experience.
Friction is maybe the number one enemy of any e-commerce business. Reducing it as much as possible was one of my most important tasks designing and coding the storefront application.
Most people aren't professional designers and the task of creating something beautiful enough to warrant spending their hard earned money on it can be a daunting task and create a lot of mental friction, causing people to abandon the site.
In an attempt to solve this I created a template system with pre-made compositions that already looked good. The customer can pick the template they like the most, swap out images and the audio with their own, edit the text, colors and make tweaks before moving to checkout. My goal was that you could create a design that looked good and was personalized to you in less than a minute.
Customer accounts & security
People don't want to waste time to sign up for things, especially if they haven't heard of you before and they were just browsing Facebook. I still needed a way to ensure privacy and protection of the personal media that the clients uploaded in the design process however.
Luckily, Firebase has a great signInAnonymously() function that creates a unique anonymous user account that can later be paired with real user data (for example post purchase). This made it possible to always make sure the data and uploads from each customer were secure and required proper authorization to access.
challenge - automation
Automate as much as possible
Since this business would be a side project in my spare time I wanted to automate as many of the processes in the business as possible, from creation to fulfillment.
In the storefront web app every setting in the design tools such as line width, colors, text size etc are saved as JSON to a file and attached to the order so that it is only visible in the Shopify Backend. Furthermore, this json file along side a copy of the finished client design and their media files associated with the order are all saved in a Google Cloud directory attached to that customer account. All of this is then read and used by the custom fulfilment portal to create a high resolution print ready version. That portal is a seperate project here so go check that out if you are curious.
The JSON data are also used to be able to pick up where the customer left off if they recieve a cart abandonment email if they don't finish their purchase, but have given consent and their email in the popup before going to the cart page. I also allow the customer to make edits to their ordered design for 24 hours after they place the order.