Designing a Mobile-First Website for Taberna da Rua das Flores
Designing a Mobile-First Website for Taberna da Rua das Flores
Designing a Mobile-First Website for Taberna da Rua das Flores
A UX/UI Design Challenge for Ginetta Traineeship Application
Role
UX Designer
UX Designer
UX Designer
Industry
Gastronomy
Gastronomy
Gastronomy
Duration
6 hours
6 hours
6 hours
This project was part of the application process for the Ginetta Trainee Program in March. Ginetta is a Swiss digital agency known for creating fast, simple, human-centered products. To move forward in the application, I was given a timed design challenge: create a one-page site for my favorite restaurant in a country I’ve traveled to.
The goal wasn’t just the final design, it was to give Ginetta insight into my design process, problem-solving skills, and how I approach a challenge under time pressure.
This project was part of the application process for the Ginetta Trainee Program in March. Ginetta is a Swiss digital agency known for creating fast, simple, human-centered products. To move forward in the application, I was given a timed design challenge: create a one-page site for my favorite restaurant in a country I’ve traveled to.
The goal wasn’t just the final design, it was to give Ginetta insight into my design process, problem-solving skills, and how I approach a challenge under time pressure.
The restaurant
The restaurant
For this task, I chose Taberna da Rua das Flores in Lisbon. It’s a small, beloved tavern tucked into the city center, famous for its seasonal Portuguese dishes and hand-written chalkboard menus. Locals and travelers can line up for hours, drawn by its charm and authentic atmosphere, and of course, food.
For this task, I chose Taberna da Rua das Flores in Lisbon. It’s a small, beloved tavern tucked into the city center, famous for its seasonal Portuguese dishes and hand-written chalkboard menus. Locals and travelers can line up for hours, drawn by its charm and authentic atmosphere, and of course, food.
The challenge
The challenge
While Taberna da Rua das Flores has an amazing physical presence with its food and unique blackboard menu charm, there’s a twist: it has almost no digital presence. No reservations and minimal online information for first-time visitors. For tourists especially, this creates friction. How could you plan a visit to a restaurant when you don’t know what to expect?
The design challenge for me then is: How can we create a digital experience that helps visitors prepare while preserving the tavern’s authentic local spirit?
While Taberna da Rua das Flores has an amazing physical presence with its food and unique blackboard menu charm, there’s a twist: it has almost no digital presence. No reservations and minimal online information for first-time visitors. For tourists especially, this creates friction. How could you plan a visit to a restaurant when you don’t know what to expect?
The design challenge for me then is: How can we create a digital experience that helps visitors prepare while preserving the tavern’s authentic local spirit?
Discover & define
Discover & define
User interview
To start my work with solid feedback, I interviewed a local and a tourist who had visited the food scene in Lisbon. I gathered three main insights:
How they discover new restaurants: Tourists often rely on Google Maps and word of mouth. Traditional restaurants don’t always have updated websites.
Reservations aren't really a thing: In Lisbon, it’s common not to reserve at traditional places as they want to make sure guests actually turn up. Locals accept this practice.
Waiting is not a major problem: Visitors don’t mind waiting, but they want practical information, such as if the restaurant have a cash-only policy, what are their peak hours, and what to expect.
User persona
Based on the user interviews, I created a user persona to focus on the tourists’ perspective on discovering and planing their visit to new restaurants because without prior knowledge, it may be difficult to navigate. Introducing Jonas, the traveling foodie:
His main needs are to have clarity on food type, visit logistics, such as cash, wait times, and hours, and easy access to the menu. His frustrations are having to deal with outdated info, unclear expectations, and uncertainty around walk-in policies.
User interview
To start my work with solid feedback, I interviewed a local and a tourist who had visited the food scene in Lisbon. I gathered three main insights:
How they discover new restaurants: Tourists often rely on Google Maps and word of mouth. Traditional restaurants don’t always have updated websites.
Reservations aren't really a thing: In Lisbon, it’s common not to reserve at traditional places as they want to make sure guests actually turn up. Locals accept this practice.
Waiting is not a major problem: Visitors don’t mind waiting, but they want practical information, such as if the restaurant have a cash-only policy, what are their peak hours, and what to expect.
User persona
Based on the user interviews, I created a user persona to focus on the tourists’ perspective on discovering and planing their visit to new restaurants because without prior knowledge, it may be difficult to navigate. Introducing Jonas, the traveling foodie:
His main needs are to have clarity on food type, visit logistics, such as cash, wait times, and hours, and easy access to the menu. His frustrations are having to deal with outdated info, unclear expectations, and uncertainty around walk-in policies.
Define & develop
Define & develop
User flow
Based on what I gathered so far, I mapped a simple user flow:
Wireframe & Mid-fi design
With time constraints and tourist behaviors in mind, I focused on a mobile-first one-page design for my solution, instead of building a complete desktop view website.
Some of my key mid-fi design decisions were:
Prioritise content on story-telling
Keep essential information already from the beginning
Update page content with seasonal ingredients instead of a static menu
CTA button leads to the restaurant’s social media account for latest updates on dishes and status
Style tile
Inspired by the rustic red frames seen throughout Taberna da Rua das Flores, I chose deep red as the primary colour, using it to frame the website and reinforce its character. To complement this, I incorporated dark brown and beige, both prominent in the restaurant’s ambience, to create a sense of warmth, authenticity, and easy readability.
For typography, I retained the restaurant’s original Cooperplate typeface for headings to preserve its identity, pairing it with Inter for body text to ensure clarity and a clean, modern feel.
To enhance the cosy, handwritten charm of the restaurant’s chalkboard menus, I sketched hand-drawn ingredient illustrations and used them as playful separators between text and images, adding a quirky, personal touch to the design.
High-fi design
The final design helps travellers quickly find key details while capturing the restaurant’s personality:
Sticky CTA button: Easy access to Instagram for menu updates
Seamless scrolling: Quick navigation to menu ingredients, visit details, and location
Inspired by local charm: Restaurant’s atmosphere is brought to life in the digital space
Here you can explore the design prototype directly on Figma and see it in action in the video:
User flow
Based on what I gathered so far, I mapped a simple user flow:
Wireframe & Mid-fi design
With time constraints and tourist behaviors in mind, I focused on a mobile-first one-page design for my solution, instead of building a complete desktop view website.
Some of my key mid-fi design decisions were:
Prioritise content on story-telling
Keep essential information already from the beginning
Update page content with seasonal ingredients instead of a static menu
CTA button leads to the restaurant’s social media account for latest updates on dishes and status
Style tile
Inspired by the rustic red frames seen throughout Taberna da Rua das Flores, I chose deep red as the primary colour, using it to frame the website and reinforce its character. To complement this, I incorporated dark brown and beige, both prominent in the restaurant’s ambience, to create a sense of warmth, authenticity, and easy readability.
For typography, I retained the restaurant’s original Cooperplate typeface for headings to preserve its identity, pairing it with Inter for body text to ensure clarity and a clean, modern feel.
To enhance the cosy, handwritten charm of the restaurant’s chalkboard menus, I sketched hand-drawn ingredient illustrations and used them as playful separators between text and images, adding a quirky, personal touch to the design.
High-fi design
The final design helps travellers quickly find key details while capturing the restaurant’s personality:
Sticky CTA button: Easy access to Instagram for menu updates
Seamless scrolling: Quick navigation to menu ingredients, visit details, and location
Inspired by local charm: Restaurant’s atmosphere is brought to life in the digital space
Here you can explore the design prototype directly on Figma and see it in action in the video:
Reflections
Reflections
Designing for a restaurant without a menu or reservations pushed me to rethink what “essential information” really means. The biggest trade-off was pointing users to Instagram for live updates. This solved the problem but still felt risky, since it relied on an external platform.
The restricted time meant I had to prioritise ruthlessly. Instead of trying to do everything, I focused on telling the restaurant’s story and giving travellers the practical details they need to feel confident visiting.
If I had more time, I’d expand research into how similar restaurants handle seasonal menus, run usability tests to refine the flow, and design a desktop version. I’d also dig deeper into how travellers actually discover restaurants in Lisbon, and integrate that behaviour into the experience.
This challenge taught me the value of quick, focused research, clear trade-offs, and designing for clarity rather than completeness. It also became the project that earned me a place at Ginetta.
Designing for a restaurant without a menu or reservations pushed me to rethink what “essential information” really means. The biggest trade-off was pointing users to Instagram for live updates. This solved the problem but still felt risky, since it relied on an external platform.
The restricted time meant I had to prioritise ruthlessly. Instead of trying to do everything, I focused on telling the restaurant’s story and giving travellers the practical details they need to feel confident visiting.
If I had more time, I’d expand research into how similar restaurants handle seasonal menus, run usability tests to refine the flow, and design a desktop version. I’d also dig deeper into how travellers actually discover restaurants in Lisbon, and integrate that behaviour into the experience.
This challenge taught me the value of quick, focused research, clear trade-offs, and designing for clarity rather than completeness. It also became the project that earned me a place at Ginetta.
Designing a Mobile-First Website for Taberna da Rua das Flores
A UX/UI Design Challenge for Ginetta Traineeship Application
Quenching Thirst, Reducing Waste: Crafting a Mobile App with Wonderfill (formerly Fountain Impact)
A UX/UI Project on Bridging Hydration and Business with Smart Design
Redesigning Dropout with Nielson’s Principals for Uninterrupted Comedy Gold
Honing the Comedy Experience with Usability Heuristic Principles
Reimagining a Community Space for a Sustainable Activewear E-Commerce Website
A UX/UI Project with Studio Nidra