A case study that focuses on the creation and development of the website for Fidelina, a family-owned restaurant born in Medellin, Colombia.
Design Thinking Process
I used this process due to its human-centered approach, which was crucial for this project. It allowed me to deeply understand the needs and preferences of locals and travelers, overcome communication barriers and cultural differences, and craft a website that balances storytelling and providing essential information.
This iterative process enabled me to continually refine my designs based on user feedback, ensuring that the final product met the project's goals and delivered an engaging and user-friendly experience for all.
Background
Fidelina, a family-owned restaurant in the heart of Medellin, Colombia. With a rich culinary heritage, they have become known for their experimental Colombian cuisine. Beyond their dishes, Fidelina is celebrated for its warm and welcoming atmosphere, where every visitor is treated like family. The restaurant's unique decor is a testament to the family's deep-rooted values and storied history, creating a dining experience that seamlessly blends the past and present, making it not just a restaurant but a cultural journey.
Medellin, Colombia's second most popular city for tourism, has seen an annual increase in visitors from 540,000 in 2002 to 2.5 million. In 2022, it welcomed 1.4 million international tourists. Fidelina is located in the up-and-coming Laureles neighborhood. Once a well-kept secret of the locals, has begun to draw the attention of both residents and tourists alike. The neighborhood's charming sense of community persists, even as it embraces a wave of new attractions. This dynamic context served as a crucial backdrop for the project, informing my design decisions and strategies to connect Fidelina with a diverse audience of locals and travelers.
Despite its popularity among returning customers and locals, Fidelina's heavy reliance on Instagram and word-of-mouth for promotion, coupled with a reservation system limited to WhatsApp messaging, could be limiting its accessibility and appeal to non-locals and non-Spanish speakers.
With a growing number of tourists and expats in Medellin, Fidelina aims to improve its online presence and reach potential customers by developing a bilingual website.
My goal was to design a visually appealing and user-friendly website that caters to both English and Spanish-speaking customers, effectively showcasing Fidelina's unique story and experimental cuisine while providing essential information to visitors. Through research objectives and identifying best practices for website design in the restaurant industry, I aimed to develop a successful website that met the design objectives and success metrics.
Carmen Quintana, owner of Fidelina
“Para seguir creciendo y atraer comensales de todo el mundo, es crucial que nuestra presencia en línea sea accesible y atractiva para una audiencia internacional, manteniendo al mismo tiempo nuestra identidad.”
Translation
“To continue growing and attract diners from around the world, it's important that our online presence is accessible and appealing to an international audience while maintaining who we are.”
Competitive Analysis
In conducting a competitive analysis for Fidelina, I examined three notable restaurants with unique brand values and approaches to their online presence: Casa Tua, Mi Tocaya, and Carmen Medellin.
From this analysis, I gained valuable insights into what works well and what can be improved in terms of website design, content, and social media integration.
Casa Tua
Overview: Casa Tua is an upscale Italian restaurant with locations in Miami, Aspen, and Paris. It emphasizes intimacy and elegance.
Website Design: Casa Tua's website reflects its modern and elegant brand image. The layout and design choices align with its fine dining theme.
Strengths:
Effective Branding: Casa Tua's website effectively conveys the ambiance and exclusivity of the dining experience, creating a strong emotional connection.
Strong Social Media Presence: It maintains an active and engaging social media presence, particularly on platforms like Instagram. They share photos of their interior, behind-the-scenes moments, and their family, building a more personal connection with their audience.
Weaknesses:
Limited Food Imagery: One potential weakness is the limited presence of food imagery on their website. This could be a missed opportunity to entice visitors with their culinary offerings.
Exclusive Club Membership: The requirement for an exclusive club membership application may deter potential customers who prefer a more accessible dining experience.
Mi Tocaya
Restaurant Overview: Mi Tocaya is a Mexican restaurant located in Chicago, with a strong focus on Mexican food and heritage. They emphasize authenticity and creativity.
Website Design: Their website features a colorful and playful layout that effectively conveys their brand values. The design aligns with the vibrant Mexican culture.
Strengths:
Interactive Photo Gallery: It allows potential customers to visually explore the restaurant's offerings, creating a sensory and immersive experience.
Press Section: Showcases positive reviews, articles, or media coverage. This can build credibility and trust among potential customers.
Newsletter Subscription: Offering a newsletter subscription allows Mi Tocaya to stay connected with their audience and inform them about promotions or events.
Weaknesses:
Social Media Presence: Visually different from their website, and need to be more similar to create a unified online identity.
Navigation Menu: May not be as prominent, potentially making it harder for users to find essential information quickly.
Carmen Medellin
Restaurant Overview: Carmen is a contemporary Colombian restaurant located in Medellin, emphasizing Colombian culture and culinary innovation.
Website Design: Their website employs a minimalist layout, emphasizing culinary creations and achievements, consistent with their focus on Colombian culture and innovation.
Strengths:
Minimalist Design: The minimalist design effectively highlights their creations and achievements, creating a modern and visually pleasing aesthetic.
Prominent Contact Information: The website prominently features contact information, including WhatsApp and Instagram, making it easy for users to connect with the restaurant.
Weaknesses:
Single-Page Design: It may result in excessively long content and reduced interactivity, potentially impacting user experience.
Non-Functional Buttons: Some buttons on the website do not work as intended, potentially causing frustration.
Extensive Menu: The menu is overly long, users have to navigate through numerous pages, particularly for the drinks section, which could lead to user fatigue and decreased engagement.
User Interviews
The interviews were conducted to gather insights about travel and dining preferences. It covered topics such as what people prioritize when they travel, how they find new restaurants, what they expect to see on restaurant websites, and what would make them want to visit a restaurant.
10 participants
14 questions
The findings suggest that having an easy-to-use website that provides essential information and a good representation of the restaurant's atmosphere is critical in attracting customers.
easy-to-use
basic information
good representation of the restaurant's atmosphere
high quality photos
reservation system
language options in English and Spanish
Personas
I have developed two personas to represent the target audience of Fidelina's website. These personas will help us understand potential customers' needs, preferences, and behaviors, enabling us to design a website that effectively caters to their requirements and enhances their overall experience.
Meet Emma, your friendly neighborhood food explorer. She just scored a remote job that lets her satisfy her wanderlust for both travel and food. Emma's all about discovering the hidden gems in food scenes around the globe.
Meet Melissa, the supermom and teacher who knows that great family moments are often cooked up at the dining table. She's always on the lookout for restaurants that combine delicious cuisine with a welcoming atmosphere. As a budget-savvy traveler, Melissa ensures her family can enjoy memorable dining experiences while exploring new places.
Our Goals
Business Goals
Technical Considerations
User Goals
By aligning the goals of the business, users, and technology, I can ensure that the website is well-positioned to achieve its objectives and thrive in the highly competitive food industry.
Sorting out Success:
Understanding Customer Preferences through Card Sorting
In order to develop a website that meets the needs and preferences of customers, a closed card sort was conducted involving 8 participants.
20 cards were sorted into 4 categories:
About, Home, Menu, and Contact.
Based on the results, it is clear that people are primarily interested in information related to the restaurant's story, as well as how to contact the restaurant directly through email, phone number, and message. In addition, customers value information related to reservations, hours, and location when browsing the restaurant's website. Regarding the Menu category, participants frequently grouped together cards related to different food and drink categories, indicating that customers value a clear and comprehensive menu when visiting the restaurant's website.
These insights can help guide the design and content of Fidelina’s website, prioritizing information that customers are most interested in and ensuring easy navigation. Overall, these findings can help improve the user experience and ultimately drive more customers to visit the restaurant.
The results showed that 53% of participants agreed on a grouping of 5 cards for the About category
83% agreed on a grouping of 3 cards for the Contact category
86% agreed on a grouping of 9 cards for the Home category
100% agreed on a grouping of 7 cards for the Menu category.
In order to create a well-structured and user-friendly website for Fidelina, I have developed a site map that outlines the organization and hierarchy of the website's pages and content. Additionally, I crafted a user and task flow that depict the step-by-step journeys of users as they navigate through the website and accomplish specific tasks.
These visual representations provide a clear overview of the website's structure and user interactions, allowing me to design and optimize the user experience accordingly.
Site Map & Task Flow & User Flow
Site Map
Task Flow: View Menu Items
User Flow: Make a Reservation
Design
Low Fidelity Wireframes
To bring the Fidelina website design to life, I started by creating low-fidelity wireframes. These wireframes allowed me to quickly experiment with different concepts and gather feedback, ensuring that the final design would meet the needs of both the users and the business.
Home
Menu
About
Contact
One of the interesting design challenges I faced in this project was figuring out how to integrate a reservations system that aligns with the local culture in Colombia.
I discovered that many people in Colombia prefer to make restaurant reservations through WhatsApp messaging, which was already set up for the restaurant through their social media. So, I had to brainstorm a solution that would be both beneficial and easy to use for both the stakeholders and the customers.
Design Challenge
Style Tile
The style tile is a visual guide that shows the key aesthetic elements of the design. It presents a harmonious blend of colors, typography, icons, and other visual components that reflect the desired atmosphere and aesthetic of the restaurant. This style tile sets the tone for the design but also acts as a reference point to ensure visual consistency throughout the project, ensuring a seamless and engaging user experience across every interaction.
Quick Notes
Now, before we dive into the high fidelity wireframes, let's take a moment to explore some of the key design considerations and the insights into how these decisions align with the overall goals of the project.
Engaging Visuals
The use of high-quality, visually appealing images throughout the website aims to capture the essence and ambiance of Fidelina's dining experience to evoke a sense of desire and anticipation in the users.
Vibrant and warm colors like brown, green and pink to create a welcoming and inviting feel.
Clear Navigation
The navigation menu must be intuitive and user-friendly, ensuring that visitors can easily find essential information.
Language Switch
Recognizing the diverse user base, a language switch feature must be incorporated to cater to both English and Spanish-speaking users.
WhatsApp Integration
Understanding the cultural preferences in Colombia, integrate QR code that directly connects users to the restaurant's WhatsApp. Facilitating easy reservations but also aligning with the local practice of using WhatsApp for business interactions, providing a seamless and familiar communication channel for users.
Emphasizing Fidelina's Story
The "About" page will be designed to tell the story behind Fidelina, providing insights into their unique fusion cuisine, values, and the team's dedication. By highlighting their story, we aim to create a connection with users.
Prominent Call-to-Actions
Throughout the website, strategic placement of call-to-action buttons will be implemented to guide users towards desired actions. Whether it's making a reservation, exploring the menu, or viewing the photo gallery.
High Fidelity Wireframes
With a focus on visual storytelling, I’ve chosen images that present the restaurant, its food and interior and of course, Fidelina.
To strike a balance between engaging content and essential information, I strategically placed clear call-to-action buttons that guide users to explore the restaurant's unique offerings.
Integrated a language switch between Spanish and English catering to both locals and travelers.
Home Page
The z-path format on the About page unfolds the restaurant's captivating story, providing an immersive experience for users.
I also introduced a photo gallery CTA at the bottom of the page to entice visitors to delve deeper into the visual delights of Fidelina.
About
Gallery
To ensure a user-friendly experience, I categorized and organized each menu item with essential details such as price, description, type of food or drink, and the name.
The use of a clean and structured design allows for easy scanning and quick access to desired information.
Menu
The QR code connects users directly to Fidelina's WhatsApp. By leveraging this widely used messaging platform in Colombia, I created a convenient and familiar way for guests to make reservations or inquire about the restaurant.
In addition, I placed the restaurant's phone number and their instagram link. This ensures that guests have multiple options to get in touch, catering to varying communication preferences.
Contact
Usability Testing
To evaluate the effectiveness of the newly designed Fidelina's website, a usability test was conducted with a group of participants to gather feedback on the overall user experience.
Test conducted on maze.co
5 participants; 2 Spanish-speaking, 3 English Speaking
3 tasks: Explore the website, Explore the Menu, Find and look through photo gallery
The usability test provided insightful feedback on the user's behavior, feedback, and comments during the tasks.
All five participants were able to navigate the website easily, which indicates that the website's design and navigation are effective in helping users find what they need and explore the content. Users found the website to be helpful and relevant, and appreciated its accessibility, ease of navigation, visuals and user-friendliness.
Regarding suggestions for improvement, one user suggested increasing the empty space around the menu, while the other suggested adding pictures of the food and drinks to the menu section.
Final Thoughts
This project has been an exciting and rewarding journey, immersing myself in the world of restaurant website design. I've gained valuable insights into the importance of user research, iterative design, and creating a seamless user experience. Collaborating with a restaurant from another country brought a unique set of challenges and opportunities. It provided me with a deeper understanding of cultural nuances, language preferences, and user expectations specific to the Colombian market.
Designing a website for a restaurant in another country required me to conduct extensive research, understand local market trends, and consider the preferences of both local and international customers. It challenged me to find the right balance between showcasing the restaurant's unique story, providing essential information, and ensuring a seamless user experience. It has been an enriching experience that honed my skills as a designer, broadened my horizons by working on a project with a global perspective and deepened my passion for creating meaningful digital experiences. I'm grateful for the opportunity to work on this project and excited to see the real-world implementation of the Fidelina website, knowing it will contribute to the success of the restaurant and delight its visitors.
