Project Overview

Cafe Melody is a charming, community focused coffee shop known for its cozy ambiance, delicious pastries, and creative drinks. As the cafe has grown in popularity, it has become evident that a user-friendly website is essential to better serve its loyal patrons and attract new customers.

Reponsibilities

User Interviews Wireframes

User Research User Flows

User Personas Usability Testing

Tools

Problem Statement

Cafe Melody is a charming, community focused coffee shop known for its cozy ambiance, delicious pastries, and creative drinks. As the cafe has grown in popularity, it has become evident that a user-friendly website is essential to better serve its loyal patrons and attract new customers.

Possible Solutions

Cafe Melody currently does not have a website which makes it challenging for customers to access important information about the coffee shop, view the menu, place online orders, and stay informed about events and promotions. In this booming digital era the lack of an online presence is limiting the cafe's ability to engage with its community and attract new customers.

Design Process

Project Timeline

Target Audience

Bliss Coffee Lounge caters to a diverse and broad audience which includes the following:

Young Professionals

Students
Local Residents
Coffee Enthusiasts
Families
Tourists

User Research

User research was a vital component of Cafe Melody’s website design. The goals of this research was to analyze competitors websites and the industry trends to identify best practices and opportunities for differentiation. We also wanted to understand what features and functionalities are standard in the coffee shop industry and where Cafe Melody can innovate.

Competitive Analysis

A competitive analysis was done between Cafe Melody’s direct competitors Starbucks and Paris Baguette. Both companies are well known in the coffee shop industry.

User Personas

Site Map

User Flows

Style Guide

Cafe Melody's UI kit is a designed to embody the cozy and inviting essence of the cafe. The UI kit was designed with user experience in mind and ensures that every interaction on the Cafe Melody website is smooth, engaging, and reflective of the brand's charm.

Wire Frames

Cafe Melody's web wireframe provides a clear and organized layout, ensuring seamless navigation and a user friendly experience.

Web

Cafe Melody's wireframes offer a clear, organized blueprint for the website's structure and functionality. The wireframe design prioritizes easy access to the menu, location, and about us details, serving as a guide for a visually appealing, user friendly website that captures the cafe's essence.

Mobile

Cafe Melody's mobile wireframe offers an intuitive and streamlined design for effortless browsing on smaller screens.

Visual Design

Cafe Melody's visual design captures the cozy and inviting atmosphere of the coffee shop, using warm tones, elegant typography, and high quality images to create a welcoming and visually pleasing online experience.

Web

Cafe Melody's mobile visual design ensures a seamless and engaging experience with its user friendly layout and vibrant imagery that captures the cafe's unique charm on smaller screens.

Mobile

Cafe Melody's mobile visual design ensures a seamless and engaging experience with its user friendly layout and vibrant imagery that captures the cafe's unique charm on smaller screens.