Ciociaro Web Case Study

2024

html

css

js

Who is cafe ciociaro?

Café Ciociaro has been a cornerstone of the St. Leonard Italian community for years. It’s the best spot to hang out and enjoy a great coffee. Loved by locals, it’s been a gathering place for years. However, a few questions kept coming up: "Where's your website?"
"Where's your menu"

Despite their popularity, They’ve never had an online presence to showcase all they offer until now.

challenge

With no website to to showcase everything they offer, their catering services and merch sales were only spread through word-of-mouth, which limited their reach. Additionaly, the merch, often tied to special events, lacked a centralized platform for management and promotion. Café Ciociaro needed a website to streamline all of this and better connect with their community online.

solution

To meet the client's needs, I built a website using headless WordPress to power the merchandise section. This allows the café to easily manage event-specific merchandise and update prices regularly. I also added a digital menu, allowing customers to browse their options anytime, and designed a dedicated form for catering inquiries to simplify the booking process.

research

To start off, I analyzed competitors’ websites to identify their strengths and weaknesses, and it was clear that many lacked professional design or relied on clunky one-pagers that weren’t user-friendly.

design & wireframing

Next, I translated the sketches into detailed wireframes using Figma. This gave a clear, interactive blueprint of the site, showing how the pages would be organized and how users would navigate the content seamlessly.

Typography

Poppins

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
! @ # $ % ^ & * ( ) - _ = + [ ] { } ; : ' " , . / < > ? |

Colour Palette

#0D0D0D

#1C1C1C

#a01008

#ff0d00

#fff

#0f9d58

development & integration

Once the design was set, I started building the site with a focus on simplicity and usability. Since the client had never used a platform like this before, I integrated headless WordPress for the merch section, ensuring they could easily update product listings, prices, and event-specific items without hassle. I configured WordPress in the most user-friendly way possible, allowing for straightforward updates with minimal effort and no need for ongoing management. The goal was to allow the café to handle the site’s content independently and efficiently.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad repudiandae eaque iusto voluptatibus ab reprehenderit eius vitae explicabo at tempora, impedit soluta quis voluptatem quisquam laborum, illo est rerum unde.