UX/UI • Web Design & Development

El Rectangle | Open Kitchen Bar

Logo de Elisava Elisava, School of Design & Engineering
Role
Product Designer
Timeline
2025-2026
Stack
Figma, Ilustrator, Photoshop, After Effects, Astro, Tailwind CSS, JavaScript, React
PROTOTYPE [//] LINK
Figma Prototype
PRODUCT [//] LINK
https://rectangle-xi.vercel.app
01 [//] The Problem

Bridging the Physical-Digital Gap

El Rectangle offers a powerful concept and a high-quality gastronomic experience, yet it lacked a digital presence. Our research, including user interviews and mystery shopping, revealed a significant friction point: users had misaligned expectations regarding the seating (bar vs. table) and the specific culinary proposal. The challenge was to translate the restaurant's authentic physical soul into a digital environment that clarified doubts and built trust.

*Project assets and interface screens are presented in Spanish as per the initial requirements.

02 [//] Goal

Designing for Authenticity

Based on our primary User Persona—international food enthusiasts seeking authentic local tapas—we focused on a service design strategy aimed at:

  • Expectation Management: Clearly communicating the venue's layout and atmosphere to avoid confusion.
  • Digital Personality: Mirroring the restaurant's values of closeness and personalization through a cohesive digital identity.
  • Value-Added Experience: Moving beyond a simple "online menu" to create a guided digital journey.
Image of User Persona n°1 Image of User Persona n°2
03 [//] onboarding

A Guided Culinary Journey

We designed the website as a prelude to the physical visit. To enhance the "closeness" before the user even steps into the restaurant, we implemented:

  • The Recommender: An interactive tool that guides users through the menu based on their preferences, acting as a digital host.
  • Gamified Loyalty: Introduced the "Magic Dice" concept at the payment stage to add a layer of gamification and post-visit engagement, strengthening the bond with the customer.
Image of a collage that shows part of the process Image of a collage that shows part of the process
04 [//] EXECUTION

Testing & Refinement

The execution was rooted in rigorous validation. After the initial design phase, we conducted user testing to iterate on the flow.

  • Information Architecture: Simplified the booking and menu exploration process to ensure a frictionless experience.
  • Visual Storytelling: Used high-quality imagery and a warm, authentic interface to reflect the tactile experience of a traditional yet modern tapas bar in Barcelona.
Image of Information Architecture Image of the Booking userflow Image of the Recommender userflow
Image of the Rectangle's Moodboard Image of the Rectangle's style sheet and branding
05 [//] OVERVIEW

Seamless Service Design

This Elisava Master's project resulted in a holistic digital solution that aligns El Rectangle's online image with its physical excellence.

  • Outcome: A website that functions as a strategic touchpoint, reducing user uncertainty and increasing engagement through personalization.
  • Collaborative Success: Developed in a multidisciplinary team, proving that deep research and user testing are the foundations of a successful digital service.
Image of the web design implementation
Image of the web design implementation Image of the web design implementation
[//] Next Project [//] e-Qapla
Back to All Work