ROLES

Researcher

Designer

DURATION

1.5 months

TEAM

Solo

TOOLS

Figma

Canva

ROLES

Researcher

Designer

DURATION

1.5 months

TEAM

Solo

TOOLS

Figma

Canva

ROLES

Researcher

Designer

DURATION

1.5 months

TEAM

Solo

TOOLS

Figma

Canva

ROLES

Researcher

Designer

DURATION

2 months

TEAM

Solo

TOOLS

Figma

Canva

PROJECT OVERVIEW

PROJECT OVERVIEW

PROJECT OVERVIEW

Building upon the foundation laid during the development of the Market Café mobile application, this project delves into the realm of responsive web design, presenting a seamless and engaging online presence for The Market Café.

Building upon the foundation laid during the development of the Market Café mobile application, this project delves into the realm of responsive web design, presenting a seamless and engaging online presence for The Market Café.

Building upon the foundation laid during the development of the Market Café mobile application, this project delves into the realm of responsive web design, presenting a seamless and engaging online presence for The Market Café.

Problem

Problem

Problem

Despite its popularity, Market Café currently lacks a dedicated website, relying solely on a Facebook business page and a listing on the Wheeling Centre Market homepage. This limitation restricts the café's online presence and hinders customer's ability to engage with their brand online. Compared to competing coffee chains like Starbucks, Dunkin' Donuts, and Caribou Coffee, The Market Café's absence from the digital landscape leaves potential customers without a centralized platform to explore their menu, view promotions, or place orders for pickup.

Despite its popularity, Market Café currently lacks a dedicated website, relying solely on a Facebook business page and a listing on the Wheeling Centre Market homepage. This limitation restricts the café's online presence and hinders customer's ability to engage with their brand online. Compared to competing coffee chains like Starbucks, Dunkin' Donuts, and Caribou Coffee, The Market Café's absence from the digital landscape leaves potential customers without a centralized platform to explore their menu, view promotions, or place orders for pickup.

Despite its popularity, Market Café currently lacks a dedicated website, relying solely on a Facebook business page and a listing on the Wheeling Centre Market homepage. This limitation restricts the café's online presence and hinders customer's ability to engage with their brand online. Compared to competing coffee chains like Starbucks, Dunkin' Donuts, and Caribou Coffee, The Market Café's absence from the digital landscape leaves potential customers without a centralized platform to explore their menu, view promotions, or place orders for pickup.

SOLUTION

SOLUTION

"Design a responsive website prototype for seamless engagement with the Market Café brand, offering a user-friendly experience comparable to industry-leading coffee chains."

"Design a responsive website prototype for seamless engagement with the Market Café brand, offering a user-friendly experience comparable to industry-leading coffee chains."

"Design a responsive website prototype for seamless engagement with the Market Café brand, offering a user-friendly experience comparable to industry-leading coffee chains."

PROJEcT GOALS

PROJEcT GOALS

PROJEcT GOALS

Continuity in Branding: Upholding the established logo, branding, and typography from the mobile app, the website maintains the visual identity, ensuring a cohesive and recognizable Market Café brand.

Adaptable Layouts: The core challenge lies in crafting layouts that transcend device boundaries. From tablets to smartphones and desktops, the responsive design ensures optimal functionality and user experience across various screen sizes.

Fluid Navigation: While the mobile app prioritized a compact and intuitive navigation, the website's expanded canvas demands a reevaluation. Striking the right balance between simplicity and depth, the navigation system guides users seamlessly through the Market Café online experience.

PAPER WIREFRAMES

Challenges

Challenges

Challenges

Ensuring a visually appealing and functional design across multiple devices requires a nuanced understanding of responsive design principles. This involved reverse engineering design aspects from bigger brands and incorporating those elements without appearing derivative while also maintaining brand consistency.

DESIGN APPROACH

DESIGN APPROACH

DESIGN APPROACH

The design approach for the Market Café website combines aesthetic finesse with practical considerations. Each element — from color schemes to interactive features — was meticulously chosen to enhance user engagement and highlight the unique offerings of the café while ensuring an easy-to-follow process from beginning to end.

The design approach for the Market Café website combines aesthetic finesse with practical considerations. Each element — from color schemes to interactive features — was meticulously chosen to enhance user engagement and highlight the unique offerings of the café while ensuring an easy-to-follow process from beginning to end.

The design approach for the Market Café website combines aesthetic finesse with practical considerations. Each element — from color schemes to interactive features — was meticulously chosen to enhance user engagement and highlight the unique offerings of the café while ensuring an easy-to-follow process from beginning to end.

LO-FI PROTOTYPE

MOCKUP V2

MOCKUP V2

MOCKUP V2

WHAT I LEARNED

WHAT I LEARNED

WHAT I LEARNED

Whew! This project was quite the learning curve for me, especially in regards to understanding how auto layouts, breakpoints, spacing, and even subtle changes in type size influence a website's look and feel. I learned great web design extends beyond aesthetic appeal; each element must work in harmony with one another to deliver a seamless user experience. Don't get me wrong, I made mistakes along the way and I still have a lot to learn, but I'm excited to see what's next in my design journey. Stay tuned for the next project — it's coming soon!

Whew! This project was quite the learning curve for me, especially in regards to understanding how auto layouts, breakpoints, spacing, and even subtle changes in type size influence a website's look and feel. I learned great web design extends beyond aesthetic appeal; each element must work in harmony with one another to deliver a seamless user experience. Don't get me wrong, I made mistakes along the way and I still have a lot to learn, but I'm excited to see what's next in my design journey. Stay tuned for the next project — it's coming soon!

Whew! This project was quite the learning curve for me, especially in regards to understanding how auto layouts, breakpoints, spacing, and even subtle changes in type size influence a website's look and feel. I learned great web design extends beyond aesthetic appeal; each element must work in harmony with one another to deliver a seamless user experience. Don't get me wrong, I made mistakes along the way and I still have a lot to learn, but I'm excited to see what's next in my design journey. Stay tuned for the next project — it's coming soon!