Serano Cafe Website Redesign

Overview

A beloved Greek café with an 83% bounce rate.

Serano Cafe is a family-run Greek café in Toronto's Greektown, serving homemade pies, pastries, breads, gelato, and coffee with a sense of familiarity that regulars describe as comforting.

Their website, however, told a very different story. It suffered from an 83% bounce rate, with most revenue coming from walk-ins and almost none from digital channels. With 67% of traffic coming from mobile and 53% funneled from Instagram, the site was failing the exact audience most likely to convert.

As the UX designer on this one-week redesign, I set out to turn that underperforming digital presence into an experience that finally matched the warmth, heritage, and handmade quality of the café itself.

Final Homepage: Clear, Warm, and True to Serano

Discover

What do users want that Serano doesn't provide?

I started by identifying the gaps between user expectations and what the website delivered. Three core needs emerged.

As I observed a group of five testers navigating the site, the same three questions kept surfacing: is this place accessible to me, is it worth my money, and does it feel like a brand I can trust?

Original Website: Before Redesign

Cognitive Walkthrough & Baseline Metrics

A timed cognitive walkthrough of the original website surfaced how much work users had to do to answer basic questions: some couldn't find a menu at all, most took multiple minutes to confirm hours and services, and several assumed there was no wheelchair access or Wi‑Fi because it wasn't clearly stated.

These gaps translated into concrete benchmarks for the redesign, reducing time to menu, making accessibility and services scannable at a glance, and cutting the number of clicks required for core tasks roughly in half.

Three Problems Discovered

Define

Clarifying the problem, goals, and brand direction.

Defining Success Through Design Goals

To avoid drifting into purely aesthetic improvements, I defined a set of design goals that would anchor every decision in purpose.

• Purposeful & accessible: Every element should guide the user, and critical information such as menu, hours, pricing, accessibility, and services must be easy to find without hunting.
• Aesthetically pleasing but not frivolous: Use the aesthetic–usability effect to build trust and delight, without adding decorative noise that slows decision-making.
• Informative & friendly: Clearly communicate what Serano offers, in a conversational tone that feels like a warm recommendation rather than a hard sell.

Rebuilding the Sitemap from the Ground Up

The Problem

The original sitemap was fragmented, with essential information buried beneath irrelevant sections and half the homepage missing content entirely.

The old sitemap forced users to scroll through empty space, guess where information might be, and rely on incomplete sections like the blank Instagram feed.

The Solution

I rebuilt the structure around the way users actually search for information, prioritizing the menu, hours, location, and services at the top level.

Reorganizing the content into clear, predictable categories reduced cognitive load and made the experience feel more intuitive. The new structure allowed users to find what they needed in seconds rather than minutes, which directly addressed the friction uncovered in testing.

User Persona

Understanding Their Goals and Expectations

This persona expects a café website to answer basic questions quickly: what's on the menu, how much it costs, and whether the space accommodates their needs. They want reassurance that the café is worth the trip, especially when dietary restrictions or accessibility concerns are involved. When these answers aren't available, they default to the nearest alternative, even if it's less interesting.

Customer Journey: Emotional and Informational Breakdown

Brand Identity & Visual Direction

The brand identity work began with a simple observation: the café's physical presence felt warm, handmade, and unmistakably Greek, while the website felt generic and disconnected. I needed to translate the emotional resonance of the space into a digital system that felt modern without losing its cultural roots, grounding the redesign in values rather than surface aesthetics.

Typography & Color System

Branding Exercise

To clarify the direction, I ran a This / Not That exercise that helped define the boundaries of the brand. Serano needed to feel elegant but not pretentious, modern but not sterile, and culturally expressive without leaning into clichés. This exercise became a filter for every design decision, ensuring the final identity felt cohesive and true to the café's personality.

The visual language centered on a deep Mediterranean blue inspired by Greek signage, paired with warm neutrals that echoed the café's pastries and interior textures. I chose a clean, modern typeface for readability and paired it with a subtle serif accent to evoke heritage without overwhelming the layout. This combination created a balance between clarity and character, allowing the brand to feel both fresh and rooted.

Accessibility was a non‑negotiable requirement, so every color choice was tested against WCAG AA contrast standards. The previous brown palette failed these tests, which contributed to the site's low readability and visual fatigue. The new palette not only passed accessibility requirements but also created a sense of warmth that aligned with the café's welcoming atmosphere.

Brand Exploration: This / Not That

Brand Moodboard: Warm, Greek, Handmade, Modern

Ideate

Crazy 8, low-fi explorations, and early layout experiments.

To break out of the constraints of the original layout, I ran a Crazy 8 session to explore eight radically different homepage directions in eight minutes. The goal wasn't to find a perfect solution but to stretch the boundaries of what the Serano experience could become, from bold menu‑first layouts to story‑driven hero sections. This exercise helped me identify which elements carried emotional weight and which ones distracted from the core experience.

Crazy 8

Crazy 8 Ideation: Exploring Eight Directions in Eight Minutes

Crazy 8 Testing: Selecting the Strongest Direction

After evaluating each Crazy 8 concept, I selected the strongest direction that balanced clarity with emotional resonance. This testing process helped identify which layout elements resonated most with users and which approaches felt too generic or overwhelming.

Lo-Fi Wireframes

Low-Fidelity Wireframes

With the strongest direction selected, I developed low-fidelity wireframes to map out the information architecture and user flows. These wireframes focused on making essential information, menu, hours, location, and services, immediately accessible while maintaining a clean, scannable layout.

Solution

Solution: A cohesive, warm, and accessible system

"It's so cute that I almost forgot you're trying to make money off of me."

Anonymous tester

Once the high-fidelity screens were ready, I tested them with the same group of five users. Their reactions were immediate and emotional, and comments like this one signaled that the new identity created delight without sacrificing usability. The final system felt intentional, modern, and true to Serano's heritage.

Final High-Fidelity System: Cohesive, Warm, and Accessible

High Fidelity Prototype

Results

Overall

The original website felt underwhelming, visually flat, and structurally incomplete, with half the homepage missing and essential information buried or absent. The redesigned experience replaced that uncertainty with clarity, warmth, and a cohesive brand identity that finally reflected the café's physical charm and values.

The Double Diamond framework naturally reflected how the project unfolded, from broad discovery to focused definition, through iterative development, and finally into a polished, build-ready system handed off to developers.

Takeaways