Kosmos Bakeshop

01. Research & Strategy

I started by researching other restaurant and bakery websites to understand industry patterns. The pattern was consistent: a single fixed schedule, one menu, one page. Kosmos worked differently, with specific days and hours for breakfast, brunch, lunch, and bakery.

That gap became the main information architecture challenge: how do you communicate that complexity without losing the user before they even reach the menu?

Another insight from the research was about the role of images. In the food and beverage industry, a photo is not decoration. It is what convinces the user to place an order or visit the place. That directly shaped the visual decisions of the project.

02. Ideation & Design

Before opening Framer, I used Lovable and Bolt to create quick structural sketches. They worked as low-fidelity wireframes, helping me validate the information layout before investing time in the final design.

With the structure defined, I moved to high-fidelity design in Framer. The colors followed Kosmos's own visual identity, keeping consistency with the brand. Images were given prominence throughout the site, especially on the home page, where they are the user's first contact with the bakery's world.

For the menu, I chose separate pages per category instead of a unified CMS. Even though the pages look visually similar, the number of items varies greatly from one to another, which would make a CMS more limiting than practical.

03. Testing & Iteration

Since this was a case study, testing was done with people I know. Two pieces of feedback stood out.

The first was technical: the menu font was too large on mobile. A simple fix, but one that would make a real difference in the actual experience.

The second was behavioral: during testing, I noticed a user trying to swipe through the images on the home page. The original carousel only advanced automatically, without responding to gestures. That observation led me to turn it into a carousel that responds to both time and user touch. A small change, but one that came directly from observing real user behavior.

04. Final Solution

The site is responsive, organized by category, and easy to navigate on any device. During testing, no user had trouble understanding the schedules, which was the biggest challenge of the project.

The main takeaway was a confirmation of the value of user testing, even at a small scale. The carousel change would never have happened without observing a real user interacting with the site. Small observations lead to big improvements.