Slice Café Dublin Website Redesign - Communicating Brand Value & Enhancing UX

 

The Problem

Slice is a neighbourhood Dublin restaurant based in the heart of Stoneybatter, serving up tasty breakfasts, brunch, lunches, and private dinners with wine and of course lots of cake! They source all of their ingredients from small suppliers and cook up a simple, well-constructed menu with the best Irish ingredients available to them.

While their service is commendable and their support for local producers is important for the customers, their website doesn’t reflect their brand values. Their website has some fundamental UX issues and it doesn’t do a great job at communicating their brand’s identity to potential customers.

The Solution

In this case study, I will be going to break down their current website, evaluate each section and the overall structure based on web design best practices, and then attempt to redesign it based on my experience and knowledge.

The website needs 3 key solutions to achieve its goal of attracting customers. First, it needs to communicate the social proof that other people love to eat there. Second, they need a unique brand identity to effectively communicate their message. Third, the website should allow potential customers to be quickly be attracted by their offerings, and either make a booking or visit the place.

Hero & Top Navigation

Existing Design

  1. Existing Hero & Top Nav Sections

What works here:

  • Contact info at the top for easy access
  • Quick call to action towards catering service
  • Sufficient & useful links in the top navigation

What doesn’t work here:

  • Close-up generic image of dish that doesn’t communicate anything
  • No introduction about the place
  • Disproportionate and generic logo
  • Move to top arrow appears even though we’re at the top section
  • No call-to-action with a business impact like ‘Make a Booking’ or ‘View Menu’
  • Top navigation bar taking too much unnecessary space
  • Full black background theme doesn’t convey the local support values

Proposed Design

Iteration 1

  1. Iteration 1 for Hero Section
Major Design Decisions:
  • I crawled over the google maps and found a really striking photograph of the cafe. So, went ahead with it for the colour scheme, style of fonts, and the overall vibe of dark blue and fluid nature.
  • The current logo was too literal with the cake stand at the bottom. But the red neon slice written at the store front is by far the best mental image people will have for the cafe. So, I took inspiration from it, combined it with the playful yet readable ‘Bellota’ font, and we got ourselves a brand new logo for the website.
  • Simplified the top navigation, reduced its width and added a subtle double struck to reinforce the brand logo style.
  • The existing home page has a catchy introduction written in the middle somewhere like this:

  1. Slice Introduction further down the website
  • The above text block has fundamental readability issues. Centred text is hard to read. Line length is too much. The background image takes focus away from the text. Too much information is thrown in one single block of text.
  • So, in the iteration 1, I’ve changed that and taken the intro into the hero section.
  • The photograph is given a bleed at one edge to indicate users to scroll down, and rounded at a single edge to show a friendly character thus balancing the corporate blue impression.
  • Two call to action buttons are provided for users to either book via call or via email

Iteration 2

  1. Iteration 2 for Hero Section

Major design decisions different from iteration 1:

  • Moved the photograph to the top right thus giving a solid base at the bottom which aligns with the intro text block.
  • Replaced the two CTA buttons with one ‘Book Now’ button that will open a modal to allow users to choose between a call or email thus reducing choice fatigue initially.

Customer Reviews

Existing Design

  1. Existing reviews section carousel


What works:

  • 4 impactful reviews by customers
  • Carousel is on autoplay so it’s a bit hard to read when it is running
  • But it stops when you tap on the arrows

What doesn’t work:

  • Large centred block of text is hard to read
  • There are almost 739+ reviews on google maps and only 4 are shown here
  • Needs more work on building strong social proof

Proposed Design

  1. Proposed sliding carousel of google review snapshots

Leverage the existing social proof.

Since there are tons of google reviews with photos already present on google maps by trustworthy people who have real profiles and are local guides, it makes sense to display them as impactful social proof.

Also, a link to the google map reviews will allow visitors to view more reviews about the place.

Key Brand Value

Existing Design

  1. Key Value hidden further down the website

Currently the website doesn’t communicate the local nature of the cafe as well as it should. It’s simply written in one line surrounded by other information in the middle of the website without any visual impact.

Proposed Design

  1. Key value proposed section

This section takes an interior photo of the ingredients within the cafe and conveys the message that they support local producers. This creates a far better impression on visitors and communicates the message proudly.

More Sections Coming Soon...

Popular Posts

Perform CRUD (Create, Read, Update, Delete) Operations using PHP, MySQL and MAMP : Part 4. My First Angular-15 Ionic-7 App

Visualize Your Data: Showcasing Interactive Charts for Numerical Data using Charts JS Library (Part 23) in Your Angular-15 Ionic-7 App

How to Build a Unit Converter for Your Baking Needs with HTML, CSS & Vanilla JavaScript