Case Study: Designing an ECommerce Website for a Parisian Bistro

CHEZ LUI, Paris — 11e Arr. TripAdvisor

For our second project at Ironhack, we took on the challenge of designing a website for a charming bistro in Paris.

In today’s world, where everything is handled via smartphones, restaurant bookings have shifted online, making accessibility and convenience a top priority. This was the restaurant owner’s first requirement an easy-to-use online reservation system to streamline the booking process.

Beyond functionality, the owner also wanted the website to tell a story. He emphasized the importance of showcasing his trusted producers and the high-quality, 100% organic ingredients used in his dishes. Additionally, given his strong reputation for wine, it was essential to highlight this expertise and ensure the website reflected the authenticity and uniqueness of his offerings.

Another key aspect was improving visibility for his events. The bistro regularly hosts tastings and special gatherings, and the owner wanted a dedicated space on the website to promote these occasions and keep his customers engaged.

In this case study, we’ll walk through our design process, key challenges, and final outcomes in creating a seamless and engaging digital presence for the bistro.

Competitors Analysis : Understanding the Landscape

Before diving into the design process, we conducted a competitor analysis to understand the current digital presence of similar bistros in the same arrondissement. Fortunately, our stakeholder provided us with a curated list of his direct competitors, which allowed us to focus on relevant benchmarks without needing extensive external research

Key Insights

• A welcoming introduction to the restaurant’s ambiance and philosophy fosters an emotional connection with visitors.
• A clean and intuituve website structure improves user experience.
• Well-structured website provides more options for users, such as online reservation, menu, photos, insights into the restaurant’s concept.
• Photos should be placed to attract users without overhelming them.
• The ability to book a table from multiple sections of the website increases accessibility.

User Persona & Journey Mapping: Understanding the Customer

To design an effective website, we needed to understand the restaurant’s typical customers : their needs, behaviors, and pain points. Since our stakeholder had a clear vision of his clientele, we used his insights to create a user persona that guided our design decisions.

Meet Marin and His Mapped Journey: From Discovery to Dining

When browsing at Chez Lui Restaurant website, Marin wants to quickly find useful information and easily book a table so that he can enjoy quality time and a meal with friends.

Branding: Crafting an Identity That Reflects the Bistro’s vibe

For this project, we focused on creating a visual identity that captures the bistro’s authenticity, warmth, organic philosophy, and deep-rooted connection to wine culture.

Logo Redesign: A Fresh Yet Authentic Look

The existing logo lacked a strong identity and didn’t fully reflect the values of the bistro. Our goal was to redesign it with elements that:

. Evoke the rich tradition of wine . Highlight the organic and high-quality ingredients . Convey the warm, welcoming atmosphere of the restaurant

Moodboard: Defining the Visual Aesthetic

To guide our branding decisions, we created a moodboard that reflects the ambiance and soul of the bistro. The key themes we explored included:

🍷 The Wine Vibe Deep reds, rustic textures, and refined aesthetics inspired by vineyards and wine cellars. 🌿 The Organic Feel Earthy tones, hand-drawn elements, and natural textures that emphasize the use of high-quality, organic ingredients. 🏡 Authenticity & Warmth A cozy, welcoming atmosphere with warm lighting, handwritten fonts, and a personal touch to make customers feel at home.

Moodboard Chez Lui Bistrot

Ideation & Feature Prioritization: Defining the Core Experience

Brainstorming & Prioritization

To stay focused and within scope, we initially categorized potential features using the MoSCoW method (Must-Have, Should-Have, Could-Have, Won’t-Have). However, given the clarity of our stakeholder’s demands and the project’s timeline, we decided to go directly with the Must-Have features — ensuring a solid foundation for the website while addressing the most critical needs first.

✅ Must-Have Features (Core Priorities)

🔹 Online Booking System A seamless, mobile-friendly reservation system to improve accessibility and streamline the booking process. 🔹 Menu & Wine List A visually engaging, easy-to-browse section that highlights the bistro’s organic ingredients and renowned wine selection. 🔹 Event Page A dedicated space to promote upcoming wine tastings, special nights, and other bistro-hosted events, improving visibility and engagement.

Style Tile: Defining the Visual Language

Before diving into the High-Fidelity (Hi-Fi) designs, we first created a Style Tile to establish the core visual elements of the website..

With the Style Tile guiding our design choices, we moved into the High-Fidelity (Hi-Fi) Design phase.

Homepage: A Warm & Inviting First Impression.

Online Booking System: Seamless & Intuitive.

Menu & Wine List: Showcasing Quality & Authenticity

Event Page: Enhancing Visibility for Special Nights.

Suppliers Page: Highlighting Trusted Producers. (One of the stakeholder’s key requests was to showcase the local and organic suppliers who contribute to the bistro’s quality)

https://www.figma.com/proto/6UnkJvjJNOKAEHI7PDafE9/P2---Germany-%26-France?page-id=2%3A4134&node-id=9093-902&viewport=-34%2C902%2C0.16&t=pY58XnKVIX5XbGim-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=9093%3A902&show-proto-sidebar=1