Morning Sunshine Cafe

A Website Redesign

A responsive website redesign focused on improving the online ordering experience and reimagining the café’s digital menu. Designed to help users easily browse, customize, and order their favorite items—whether on desktop, tablet, or mobile.

Responsive Web design

Timeline : 6 weeks

Role : Solo UX Designer/Research

Target Audience :

  • Local residents seeking convenient breakfast and coffee options.

  • Office-goers and college students who want to quickly place takeaway orders during busy mornings or short breaks

  • Families and individuals looking for a cozy cafe experience.

  • Customers with dietary preferences, including vegetarian and non-dairy options

Project Brief

This project focused on redesigning the Morning Sunshine Cafe website to better meet the needs of customers engaging with the café online. The goal was to improve visual hierarchy, branding, and layout while identifying friction points in the existing user experience across devices.

Background

Morning Sunshine Cafe
Cedar Park, Austin, TX

Morning Sunshine Cafe is a local breakfast spot known for its warm atmosphere and homemade items like donuts, kolaches, tacos, and specialty coffee. The cafe uses a Square-hosted website for online orders, but the current design is template-based, unorganized, and not optimized for user experience, especially on mobile devices. 

As more customers rely on digital platforms to explore menus and place pickup orders, the existing site falls short in providing a seamless, branded, and accessible experience. A responsive website redesign offers an opportunity to better reflect the cafe’s charm, simplify ordering, and engage users across devices. 

Research

Research Goal

  • Understand the needs and expectations of users engaging with a local cafe online 

  • Improve the site’s visual hierarchy, branding, and layout. 

  • Identify key friction points in the current website experience across devices 

  • Explore opportunities to align the digital experience with the cafe’s welcoming brand 

  • Support customer decisions around visiting, ordering, and engaging with the cafe 

Research Methods & Tools

  • Competitive Analysis

  • User Interviews

  • Journey Map

  • Usability testing

Competitor Analysis

To better understand how Morning Sunshine Cafe's digital experience compares to others in the coffee and bakery space, I conducted a competitive analysis of four major brands: Starbucks, 85°C Bakery Cafe, Dunkin’, and Summer Moon Coffee.

I evaluated each across key UX and branding criteria such as menu visibility, homepage layout, item details, ordering experience, and brand personality. This helped identify clear gaps in Morning Sunshine Cafe’s current site—especially around usability, content structure, and customer engagement—and informed design recommendations to improve clarity, consistency, and return visits.

Research Findings

As part of the redesign for Morning Sunshine Cafe’s website, I conducted interviews with 9 participants to understand how users interact with local cafe websites. Participants compared their experience with Morning Sunshine Cafe to popular chains like Starbucks and 85°C Bakery Cafe.

User Interviews

Users had difficulty locating the full menu, which was hidden behind the “Order Now” button and lacked clear categories, item descriptions, or visual cues.

The current site lacked a true homepage experience.

Compared to other cafes that offer visually organized menus with “Popular Picks,” clear pricing, and customization options, Morning Sunshine’s menu felt limited and transactional.

No descriptions, customization options, or images—left users confused. A visually organized, accessible menu that includes nutrition and allergen info for transparency.

Journey Mapping

To better understand user frustrations and emotional touchpoints while navigating the café website, I created this journey map based on user interviews and usability testing. The map highlights the key actions users take—starting from landing on the homepage to potentially returning to the site—and uncovers their feelings, pain points, and opportunities at each stage.

This visual framework helped identify critical gaps such as:

  • Poor menu visibility and lack of welcoming visuals on the homepage

  • An impersonal and limited ordering experience

  • Confusion around dine-in vs. pickup options

Define

Point of View Statement

Busy customers need a clearly organised and visually appealing menu because a confusing or hidden menu makes it hard for them to decide what to order—especially during short breaks or morning rushes.

How Might We…

  • How might we make the full menu more accessible from the homepage?

  • How might we organize the menu in a way that matches how people browse in a cafe

  • How might we help users quickly spot popular or seasonal items without feeling overwhelmed?

  • How might we use visuals or short descriptions to help users make quicker, more informed decisions?

Feature Set

To ensure a user-centered redesign, I mapped out Must Have and Nice to Have features based on research findings and usability insights. The goal was to focus first on solving major user pain points like menu discoverability and lack of visual context, while also identifying enhancements that could elevate the experience further.

Sitemap

This visual sitemap illustrates the restructured layout of the café website, reflecting a simplified and more intuitive flow for users. The redesigned structure makes the menu more accessible, improves homepage navigation, and clarifies the ordering process.

Design

From Friction to Flow: Redesigning the Café Experience

I started by analyzing the original website to uncover usability issues and layout friction points. Based on research and user needs, I redesigned key screens to create a more intuitive, welcoming, and conversion-friendly experience.

Morning Sunshine Cafe - Original Website Desktop View

Why Redesign?


The original website didn’t reflect the inviting nature of the café or support users in finding key information easily. My redesign simplifies the interface, clarifies navigation, and creates a more engaging experience across devices.

What wasn’t working…

  • Cluttered layout

  • Poor menu visibility

  • Weak brand storytelling

  • No clear action paths

Redesign goals

  • Make it easier to browse the full menu

  • Highlight the café’s story and warmth

  • Improve visual hierarchy and mobile flow

  • Add clear CTAs like to make online ordering easy for users

Creating Wireframes

Low Fidelity Wireframes

Homepage

About Us Page

Menu Page

To visualize the initial layout and structure of the redesigned cafe website, I created low-fidelity wireframes for key pages: the Homepage, About Us, and Menu. These wireframes allowed me to:

  • Focus on content hierarchy, user flow, and overall layout before refining visual design.

  • Establish clear navigation and consistent sections across the site.

  • Quickly test and iterate ideas based on user feedback and usability goals.

Each screen was designed with mobile responsiveness in mind, prioritizing ease of access to key information—like the full menu, the cafe’s story, and actionable links such as “Start Order” or “Visit Us.”

Hi-Fidelity Wireframes

The high-fidelity mockups reflect a thoughtful redesign of the café’s website—focused on clarity, usability, and better support for user decision-making. Each screen was designed to address the pain points identified in the original site, while visually aligning with the café’s friendly and approachable brand.

Key Enhancements in these mockups

  • Revamped Homepage:
    A clean, inviting layout with clear call-to-actions that help users quickly navigate to the menu or begin an order.

  • Menu Accessibility:
    The menu is now easy to find and explore, with clear categories that reduce confusion and allow users to browse by item type.

  • Detailed Menu Descriptions:
    Each item includes nutritional information, and pricing—empowering users to make informed decisions, especially those with dietary needs.

  • Descriptive About Us Page:
    Introduced a new page that shares the story behind the café, its values, and what sets it apart—building a stronger emotional connection with visitors.

  • Consistent, Mobile-Friendly Design:
    Every page has been crafted with responsiveness in mind, ensuring a smooth and engaging experience across devices.

Hi-Fidelity Mockups across devices

  • Homepage

  • Explore the Menu

  • Menu item detail page layout

  • About Us Page

Homepage

Purpose:
Introduces users to the cafe, helps them start their order quickly, and showcases key menu items.

Key Features:

  • Hero banner with location (e.g., Cedar Park) and a clear "Start Order" CTA

  • Top navigation bar for: Home, Menu, About Us, Contact

  • Featured menu carousel showing top-selling items (e.g., Croissant Sandwich, Breakfast Taco) with calorie range and “View” buttons

  • Clean layout optimized for quick scanning and click-throughs

Homepage

About Us Page

Purpose:
Tells the brand story and builds connection and trust with users.

Key Features:

  • Introduction to the cafe’s origins, values (e.g., local ingredients, handmade freshness)

  • Team or chef highlights (optional)

  • Location and operating hours

  • Links to social media or press mentions

Menu Screen (Category Page)

Purpose:
Allows users to explore food categories and discover specific items within sections like Sandwiches, Drinks, etc.

Key Features:

  • Breadcrumb trail for easy backtracking (e.g., Menu / Sandwiches / Croissant Sandwich)

  • Thumbnail cards for each item in the category with title, calorie info, and CTA

  • Responsive design to accommodate different devices

  • Hover states for cards to enhance interactivity

Item Detail Menu Page (Croissant Sandwich)

Purpose:
Provides an interactive and personalized ordering experience for a specific food item.

Key Features:

  • Product title, price, and calorie range clearly displayed

  • Full description of the dish

  • Ingredients & nutrition info shown in a modal (triggered by “Details & Nutrition” tab)

  • Topping customization cards with prices and calorie adds

  • Smart sticky price bar that updates with user selections

  • “Start Order” CTA remains accessible at all times

  • Option to add a drink after customizing (upsell prompt)

  • Final “Order Now” button for confirmation

Usability Testing

Test Objectives

  • Assess how easily users can navigate the site and locate key information (e.g., menu items, customization options).

  • Evaluate clarity and usefulness of item detail pages (including nutrition and ingredients).

  • Identify pain points during the customization and checkout process.

  • Gather feedback on visual hierarchy, interaction feedback, and call-to-action clarity.

Features tested

  • Homepage Navigation – Ease of locating the menu and entry points to explore offerings.

  • Menu Browsing & Item Selection – Including how croissant sandwiches are discovered.

  • Item Detail Page – Clarity around ingredients, allergen info, and nutrition.

  • Customization & Add-to-Cart Flow – Visibility of changes, pricing updates, and confirmation.

  • Call-to-Actions (CTAs) – Labels like "Order Now" and related user expectations.

Key Findings

  • Homepage/Menu Access - Users easily found the Menu, but some felt “Order Now” was vague.

  • Croissant Sandwich Page - Users wanted ingredient previews and were expecting a drink upsell prompt.

  • Customization Screen - Missing live price updates for toppings caused confusion.

  • Cart Feedback - Lack of confirmation made users unsure whether an item was added.

  • Nutrition/Allergen Info - Users wanted a brief ingredient list for quicker decisions.

  • Comparative Expectations - Feedback echoed features from Panera, Starbucks, Dunkin’ for smoother interactions.

Design Iterations Before & After

CTA Clarity: “Order Now” → “Start Order”

  • Before: CTA was confusing—users unsure if it led to the full menu or just online orders.

  • After: Clearer intent with "Start Order" improves navigation flow.

Ingredient Visibility

  • Before: Users had only access to Nutrition & allergen information. They also wanted to know the ingredients in the item.

  • After: Added brief ingredient lists under each item.

Drink Upsell Prompt

  • Before: No prompt after food selection

  • After: Added a prompt: “Would you like to add a drink?” to encourage complete orders

Live Price Updates for Toppings

  • Before: No visible change when customizing an item.

  • After: Pricing updates in real-time as users add/remove toppings.

Reflections

Main Insights from Research

  • Users found the existing site cluttered and confusing, particularly around online ordering and menu navigation.

  • There was a lack of clear customization options and dynamic pricing visibility, which caused frustration.

  • Users often struggled to see menu items directly and had to rely on the “Order Now” button, indicating poor discoverability.

  • Easy navigation, quick customization, and ingredient clarity emerged as key user goals.

  • Continuous user feedback helped refine interface elements like button placement and information hierarchy.

Takeaways for future projects

  • Designing responsive layouts and interactive prototypes (like sticky price bars with live updates) requires careful consideration of usability across devices.

  • High-fidelity prototyping and attention to micro-interactions are critical for delivering functional, user-friendly designs.

  • Revisiting research insights regularly ensures design alignment with user needs.

  • Including diverse assets such as before/after screenshots, wireframes, and interactive mockups effectively illustrates the design process and iterations.

  • Unexpected user frustrations (like poor menu visibility) highlight the importance of validating assumptions through research early in the process.