This month, I’ve been working on designing and building the new shop for Hearing Dogs, a UK charity that trains dogs to alert deaf people to important and life-saving sounds they would otherwise miss.
The shop uses the new Shopify 2.0 theme architecture that allows for better customisations, page speed and more flexible content. I built the new theme from the ground up to keep it small, lightweight. And, most importantly, I made it dependency-free, so no Sass, CSS frameworks or jQuery/javascript frameworks.
Ketan was a joy to work with. The wireframing process, design and build was very quick, he has great systems in place for feedback, and is always happy to jump on a call if anything needs discussion. Ketan ‘got’ our brand very quickly and it only took two iterations to get to a look and feel we were happy with.
He also makes suggestions to improve CRO on top of the brief – which is incredibly valuable. Ketan really knows Shopify and was able to customise our basket to highlight free shipping thresholds and capture additional data we needed to record with each transaction.
Steve Heyes, Hearing Dogs
The design
As with any website design project, I always research and gather my findings on a moodboard. I do this for two reasons:
- It gives me ideas for the design.
- The moodboard helps to identify consistencies and patterns across similar websites.
- It gives me a starting point for creating the wireframes before any design work begins.
One of the challenges when designing the user interface for this shop was working with the two brand colours: green and burgundy. They are both strong and contrasting colours, with the green being quite bright if used on its own. I also had to take colour contrast into account for accessibility.
Initially, I played around with their secondary colours, but I couldn’t get them to work. So after some experimenting, I finally came up with a colour scheme that complemented well.
The homepage uses Shopify’s new sections and blocks allowing Hearing Dogs to fully customise the content and layout.
The product page was designed with a floating sidebar so the pricing and cart information always remains on screen. Current work in progress will allow VAT exemption functionality to be added here too in the coming weeks.
The cart also contains a floating sidebar and a custom donation feature.
Adding donations to the cart
I get many enquiries for Shopify projects that require some custom features, and this project was no exception. Hearing Dogs needed a one-off donation option in the cart. As there is no built-in solution for this within Shopify and I avoid using third-party apps, I had to develop a solution using features that are already built into the ecommerce platform.
The solution above uses a product with a value of £1. By applying set quantities, the customer can apply a donation of any amount to the cart.
Check out the website at shop.hearingdogs.org.uk and donate to this fantastic cause!