Lindas' Cafe Website

Responsive Web Design Capstone
Project Overview
For this project, I was challenged to create a fully responsive website. I selected a local restaurant with no current digital presence, providing an ideal opportunity to craft a complete user experience from scratch and explore creative solutions without design constraints.
Background Problem
Without a dedicated website, the business lacks a central digital presence, significantly limiting its ability to reach and engage potential customers. This absence makes it difficult for users to discover the business online, view menus or services, place orders, or get essential information like hours and location.

Research

Research Goal and Methodologies

I used comparative research with similar companies using SWOT analysis and user interviews with five people with an age range of 26-60 who frequently online shop through websites or apps.

Research Findings

To better understand the landscape of casual breakfast restaurants and identify opportunities for improvement, I conducted a competitive analysis of IHOP, Denny’s, and Perkins. I focused on how each brand presents its offerings online—especially their menus, ordering experiences, and local relevance.

Strengths:

  • Family-Oriented Atmosphere: Each brand emphasizes a welcoming, family-friendly environment, reflected in both their messaging and the types of meals offered—familiar, comforting breakfast classics.
  • Simple, Accessible Menus: Their digital menus are generally easy to navigate, making it quick for users to browse offerings and customize orders.
  • Online Ordering Convenience: All three sites include built-in online ordering systems, allowing for seamless pickup or delivery.

Weakness:

  • Lack of Local Focus: While the corporate branding is strong, it often overshadows location-specific content. Users have to dig to find local hours, contact details, or community-specific messaging. This can be frustrating for users who want fast, relevant information about their nearest location.

I interviewed five participants who frequently order food online. My goal was to understand how digital presence influences where they choose to eat and what factors matter most in their decision-making.

  • Online Ordering Habits: All five participants said they order food online at least once a week, whether for convenience or to avoid long waits.
  • Importance of a Website: Three out of five mentioned that if a restaurant doesn’t have a website, or if it’s hard to use, they’re likely to move on and order from a different place. For them, a clear, functional website plays a big role in building trust and reducing decision fatigue.

Project Goals

A clear understanding of business and user goals, paired with technical considerations, allowed me to outline critical product needs and proactively address potential limitations. For a local business, I had to focus on realistic limitations they may come across. The most important part is a fast loading, easy to use, informational website that draws in more consumers.

Define

Problem Statement

Currently, some small restaurants either don’t have a website or very limited online presence. This is because as a small business, they might not have time or resources to create one. As a result, potential customers do not get accurate information or have online trouble resulting in user frustration.

Information Architecture

Drawing from research and user interviews, I designed a clear and intuitive journey that takes users from the homepage all the way to a seamless checkout experience. By understanding the user journey, it helped me focus on what other successful websites have done as well as help me ideate some designs.

Design

Low Fidelity Wireframes

After sketching several layout ideas, I selected the most promising concept to develop into a digital wireframe. I then built a basic prototype and conducted usability testing with the original interview participants to collect early design feedback.

I focused on previous experience going through website designs and decided on the common themes a successful one has: easy navigation bar and informational sections to give a new user said information right away. I also chose to include images of menus to give user what the item would be without having to read descriptions/ingredients.

Brand Identity

Since the business lacked a website and brand identity, I established one by selecting earthy tones of brown and green to communicate a cozy, diner-like aesthetic. I paired this with the Playwright cursive font in the logo to emphasize its local charm.

High Fidelity

Based on user testing, I changed the informational of the café to be included in the hero image, instead of under weekly sections. I was able to incorporate my color scheme and typography to high fidelity screens to get ready for more testing.

Test

Usability Testing

I created a prototype from my high fidelity design in Figma for both mobile and desktop layout. This prototype was sent out to the same participants as in the interview and first testing. All participants were able to complete the task within 15 minute time frame with no errors.

Task Flow
  • Go to menu
  • Scroll through products
  • Order the "Garden Omelet"
  • Customize and add to bag
Results
  • 5 out of 5 participants rated the website as easy to use on both desktop and mobile
  • 5 out of 5 participants answered the website felt consistent across both devices and that it felt similar to their experience with other restaurant websites
  • 2 out of the 5 participants mentioned they enjoyed the color palette
  • 3 out of the 5 participants suggested to add nutritional information to the menu items
Revision

Based on feedback only one major change needed to be made: adding calories to the menu items. There were some minor revisions where I cleaned up some negative space and made the prototype a smoother experience.

Conclusion

Final Thoughts

This experience gave me the opportunity to design a website for both desktop and mobile, which was both exciting and challenging. Adapting my designs to fit the constraints of mobile, after initially working with the flexibility of a wider desktop layout, was difficult at first. But by the end of the project, I found myself able to shift between the two layouts more naturally and intuitively.