The Laughing Cat Bake Shop

Being a completely new venture, The Laughing Cat Bake Shop needed the works: branding materials, a completely new eCommerce website (including a domain) and a digital marketing starter pack.

We had our work cut out for us, so once the name was decided, I registered the domain for them and got cracking on the project starting with their visual identity.

Branding

True to the business name (chosen in honour of the owners' cheeky cat), the brief called for a corporate identity that was simple, fun and memorable.

I created a custom handwritten script font for the main business name, to inject some playfulness to the logo. To keep it looking simple yet unique, I chose a vintage-style secondary font and incorporated a simplified illustration of the company mascot.

TLCB logo handwritten font sketch
I tried a few different styles on paper to find something that works.
TLCB logo font vector process
I then loaded the design into Illustrator so I can turn it into a vector.
TLCB branding business card
I also designed the business cards, which feature the final logo.

Planning the website

Once the business' visual identity was approved, I started work on the website by creating some wireframes in Adobe XD. Having these rough wireframes made it easier to focus on functionality, enabling me to move blocks around to improve the layout. It was also key in helping me identify and plan for potential user experience issues well before development began.

Sitemap and wireframes made in Adobe XD
This set of wireframes also doubled as a sitemap.

Next, I created some mockups with coloured elements and stock photos to give the client a better idea of the website's look and feel. I also used the high-fidelity mockups as the basis for the style guide I used during development, which included colours, typography and image specifications.

Mockups made in Adobe XD for The Laughing Cat
I also used Adobe XD to quickly create high-fidelity mockups during this project.

The Home page

The home page of the website has three main sections:

  • a hero banner with a clear call-to-action leading to the main shop page
  • a section displaying the main product categories to help users navigate
  • a newsletter subscription form to build the email list
TLCB website home design

The Main Shop

The business only had a limited number of products so we had the luxury of displaying all products on the main page using a masonry grid layout. Each item in the grid displays a product image, the product name, the price and a link to the product details which appear when users hover over the product.

TLCB online shop baking
Users can see more details about the product by clicking on the View Details button.

I also added an interactive filter at the top of the page to help users easily find what they're looking for and to inject a little bit of fun into the main shop page.

 

The Product page

Clicking on the View Details button from the main shop page takes users to the individual product page, which contains more product photos and additional information.

I worked closely with the owners to write up product descriptions that match the brand personality.

Each product page includes the following:

  • product images showing different angles and variations
  • product title and price
  • a striking Add to Cart button with quantity selection
  • product summary and details
  • an up-sell/cross-sell section to promote similar products
  • a promotional banner with a CTA for newsletter subscriptions
eCommerce website product page
Each product page features a section for cross-promoting similar products.

The Cart and Checkout pages

Each section in both the Cart and Checkout pages are clearly marked to help users navigate each page with ease. Both pages also provide the user with a summary of their order as well as a big and obvious Call to Action to encourage them to finalise their purchase.

Website eCommerce checkout responsive design
All pages of the website are responsive to provide a good user experience at every stage of the buying cycle.

 


 

Looking for landing page ideas?

See how I implemented and promoted a partnership landing page for The Laughing Cat Bake Shop as well as other examples of landing pages by clicking the button below.