Case Study of Pup Hub Cafe

We, Dom and myself, built a custom ecommerce website for Pup Hub Cafe, a local pet food company founded by Jo Rugless and based in Adelaide, Australia. Jo Rugless and her company Pup Hub Cafe sell homemade pet food with use of local ingredients from South Australia. I will discuss how we met Jo, our approach to build the website and some of the key things that we implemented.

The Origins of the Job

We met Jo at a local market in Adelaide where we saw her very unique homemade pet food. After selling at the market for the last few years she really wanted to grow her business online through ecommerce. A way to increase professionality, spread brand awareness and add an additional channel to sell her pet food.

Jo attempted to do her own website with a website builder from Amazon. Her and her husband tried but admitted they lacked the technical skills and time necessary to complete the website to a high standard. Many website builders exist on the internet and sell people on the dream of building a website without a developer, which in my opinion, this dream fails to meet the reality.

People lack the skills to build professional websites and instead they use website builders, shove a bunch of information on a page, and end up creating an awkward frankenstein looking website. Customers then arrive on the page, they see the lack of professionality and leave due to a poor experience and slow load times. Businesses lose a potential customer and damage their brand through a poorly built website.

A business owner must perform the calculation and understand the pro’s and con’s between the DIY (do it yourself) approach or hiring a professional like us:

• Do I pay for a professionally built website from experts that do it everyday?
  • Pro: Save time and receive a professional website built by experts.
  • Con: Pay an upfront fee.
• Do I attempt to build my own website and learn the skills necessary to build a well designed website?
  • Pro: Save money without paying web designers.
  • Con: Damage my business brand and lose potential customers because I lacked the skills to build a good website.

Jo saw the value to build a professional website and to hire myself and Dom, professional web designers and qualified Software Engineers. She tried the DIY path, understood the skill gap and saw the value in hiring us to build a professional website. I will never forget the email she sent us after we forwarded her a draft of the website to see her thoughts: “I’m in tears of how great and brilliant the website looks, you’ve made me look very professional and friendly. I love it.”, as seen in Figure 1. I felt her raw excitement for the website through her email and I felt so happy that we delivered something that caused Jo to become so emotional. From her reaction I think it paid off to hire the experts.

Figure 1: A very happy and emotional Jo Rugless replying by email to a draft we sent her.

For us, to leverage our web design and software expertise with locals and small businesses in our local city of Adelaide brings us more joy than conceivable. We took many years to craft our skills and learn the trade so when we use it to help local businesses it is so rewarding. Alright, enough with the emotions, let’s move on to specific details about the website.

Understanding Jo Rugless and the Pup Hub Cafe

When we build a website we must understand the business well. We want to understand the target audience, who will visit the website, who will buy products, and what information they might find interesting or useful. We want to step in the shoes of a customer and see if we would buy something from the website after viewing it.

We started this process by understanding Jo Rugless and the Pup Hub Cafe. Jo Rugless is a local Aussie Mum from Adelaide with a passion for pets. She started selling handmade pet food at local markets after her job was displaced due to the pandemic. She started small but as she progressed her product proved to be super popular. She only sells products that she gives to her own pets, handmade, high quality and healthy.

In my opinion, many people buy from Jo Rugless and her business Pup Hub Cafe because they receive high quality handmade pet food that she handmakes and sources from South Australia. She is a friendly, personable and local South Aussie delivering a product to other local Aussies within the community. I think nearly any Aussie in their right mind would rather buy from another local Aussie like Jo Rugless rather than a soulless corporate company, the reason why small businesses still exist and will continue to exist, in my opinion.

After we understood Jo Rugless, her mentality, her business, her personal story and her product, it provided us with the perfect amount of information to build her a unique and custom ecommerce website.

Building the Website

For the style of the website we wanted to ensure that it matched her brand, with a mix between professional and friendly. We wanted to avoid an overly kid-like style but still with a touch of playfulness. We went forward with this concept and built every component of the website with this mentality.

Hero Banner

For the hero banner of the website we decided upon a unique graphic that contained the title Pup Hub Cafe adjacent to a dog paw that listed the main values of the business, which include drooling delicious, homemade and healthy, as seen in Figure 2. The graphic also overlays on a background image with three cute dogs. This creates a strong impression for a potential customer that lands on the page.

One significant drawback is that images at the top of the page affect loading speeds, which causes poor usability for a customer and potentially lower rankings as Google uses page speeds as a factor when indexing a website. We remedied the problem with image optimisations and lazy loading, however, in most cases images at the top of the page should be used on a rare occurrence to avoid the problem from the start.

Figure 2: The homepage of Pup Hub Cafe website taken on the 10/03/2022.

The Colours

For the colours of the website we utilised dark brown and a darkened yellow. These two colours contrasted nicely together to create a smooth and vibrant style throughout the website. We choose the colours ourselves but based them on a few of the original colours Jo used on her tent at the market and on her labels and packaging. Figure 3 shows a picture of the brown and yellow market tent with Dom and Jo Rugless.

Figure 3: Pointing out the colours of the Pup Hub Cafe tent from the picture with Dom Tripodi and Jo Rugless at the market.

Unique Graphics

We designed two unique graphics for the website. First, the dog paw at the top of the homepage, as seen in Figure 2. Second, a picture of the pet food Jo sells with an overlay of text that says drooling delicious and a dog with a party hat below staring at the food with a strong desire to eat it, as seen in Figure 4. To create this hilarious and playful combination we merged two separate images together.

The graphic demonstrates a dogs desire for delicious treats which I think most Dog owners can relate to, I know my dog Charlie used to have the same look when he saw delicious treats. We custom crafted the graphic to add depth to the website and to add to the theme of playful but still professional, nothing too over the top.

Figure 4: The custom graphic that we designed and created for the Pup Hub Cafe.

Telling Jo Rugless’s Story

We ensured one main section of the website captured the unique story of Jo Rugless, a local Aussie Mum who sells homemade pet food. We requested for Jo to write a personal origin story and also added an image of her son with his dog Odin, as seen in Figure 5. We wanted to cut the business look and instead use the vibe of the market where people discover Jo Rugless. This gives a customer the option to discover more about the story behind the business and also to discover that she isn’t a corporate giant, she’s a local. Something for a fellow Aussie to appreciate and get around.

We wanted to add something more than just a text dump so throughout the text we highlighted keywords such as healthier treats, not just jerky, and others. We also added a love heart to the title of the section to give it a unique look. To ensure Google still indexed the title properly we added a hidden aria element with the word Love written.

Figure 5: The We Love Our Fur Babies section from the Pup Hub Cafe website.

Clean Product Cards

For the product cards that show each individual product, we designed them with a clean look and an emphasis on clarity and readability. We helped Jo pick the best style to upload product images through our suggestion of a white background with nothing but the product image. This created a type of pop effect of the product images on the card which looks quite unique from other ecommerce websites. In the end we loved the look of the clean product cards and with the unique text that describes them from above, as seen in Figure 6.

Figure 6: The product cards with a clean unique look from the Pup Hub Cafe homepage.

Responsive Design for Mobile, Tablet and Desktop

When we build a website we always design with a mobile first approach. This means that we create the designs of a website on mobile, next for tablet and then for desktop. With this process we ensure the website looks beautiful and sleek no matter what device the customer uses. Figure 7 shows an example of how the website appears on a variety of screen sizes.

With the rise of internet browsing on mobile phones since the first iPhone in 2007 the approach of mobile first rose in popularity because websites designed for a laptop looked awful on mobile. After viewing 100’s of websites in Adelaide we noticed businesses still have websites that appear awful on mobile devices and lead to a poor customer experience. What’s worse, it affects the ranking of a website on Google negatively, as discussed by Google in their article on mobile-first indexing. We ensured we carefully designed the website and all its sections for each of the various screen sizes.

Figure 7: Resizing a web browser to show the responsiveness from mobile to desktop on the homepage of Pup Hub Cafe.

Page Insights and Web Dev Measurements

For Pup Hub Cafe we utilised the PageSpeed Insights tools created by Google to measure website performance, accessibility, best practices, and SEO. On the homepage of the website we scored 95/100 for performance, 100/100 for accessibility, 100/100 for best practices, and 100/100 for SEO, as seen in Figure 8. Google recommends above 90 in each category to ensure excellent user experience and potentially higher website rankings.

Google provides no 100% guarantees about ranking higher, however, increasing a customer’s user experience on the website is definitely worth the effort. We ensure we design every website with use of the PageSpeed Insights so that the business, customers and Google are all happy.

Figure 8: Results from Google’s PageSpeed Insights on the Pup Hub Website.

The Wrap Up

We enjoyed the process to design and build a custom ecommerce website for Jo Rugless and her business Pup Hub Cafe. Every website we build we learn new technical skills and meet amazing local business owners like Jo.

We worked hard on the small details of the website such as colours, custom graphics, ALT tags for images, PageSpeed insights, and other factors to increase the usability, physical aesthetics, SEO, and discoverability. We know Jo will never see things like image ALT tags but we ensure we add them as we know it will boost the websites accessibility and SEO.

Being experts in our field and qualified Software Engineers we love to use our skills to help local small businesses in Adelaide, like Pup Hub Cafe, to up their game online. It’s a process that is truly rewarding.

Also, we are so happy that in the early days of the website Jo has already made sales with repeat customers, kudos to Jo for leveraging her website and advertising it with her customers to get sales right from the start.

Support Pup Hub Cafe by buying some high quality and locally sourced pet treats at https://puphubcafe.com.au.

Acknowledgement

Thank you to Jo Rugless for trusting us to build a unique and custom ecommerce website for the Pup Hub Cafe. It is a true pleasure to work with fellow South Aussie’s making a difference in the community. We hope the website we built serves her well and helps grow the Pup Hub Cafe organically over time. All the best Jo and we look forward to continuing to develop the website.