Project Summary
My team and I propose a website redesign for ZOE Coffee & Kitchen, a restaurant in Pullman, WA, owned by Mike Wagoner. The goal is to:
-
Reflect the restaurant's expanded menu: Shift focus from primarily coffee to the "4 B's" (Burgers, Breakfast, BBQ, and Brews) while retaining coffee offerings.
-
Embrace the restaurant aspect: Emphasize the dining experience beyond just coffee.
-
Integrate food truck services: Allow online ordering and information access for the ZOE food truck.
Project Goals
-
Improved online presence: A modern website reflecting ZOE's current offerings.
-
Enhanced customer experience: Easy access to information about the full menu and food truck services.
-
Increased sales potential: Attract new customers and better showcase ZOE's diverse offerings.
Team Members
-
Mary Anne Keovongphet (Team Leader / Project Manager)
-
Jake Stephens (Technical Lead)
-
Henry Dien (Technical Lead)
-
Anh Ngo (Designer)
-
Eddie Abellar (Designer)
-
Issaya Saleumsay (Client Representative)
My role: Design research, wireframe prototype, user research, user experience design, user interface design, project agreement design
Target Audience
-
Prospective Students (and Family)
-
Student’s Visitors (family and friends)
-
Pullman Residents
-
Pullman Visitors (alumni and donors)
Jump To
Phase I: Research
User Research
Working as a team, each member does case studies on different business websites with similar target audiences. This allows us to understand the common features that make a good vs. bad website to better brainstorm wireframes and mockups of the design layouts.
Personas
We created personas of our primary and secondary target audience to better understand the wants and needs of the customers that would be using this website
Persona 1
Persona 2
Persona of one of our target audience. User data shows that the majority of customers were college students between the ages of 18-30
Persona of older target audience. Customers consists of families of college students and Whitman County residence
Personas
User Scenario/Behavior:
James is a sophomore at Washington State University in Pullman, WA, majoring in political science. Je lives with 2 male roommates in the Coffee House apartments near Sella’s. He enjoys going out to eat at restaurants and diners with friends. He also uses his time at diners and restaurants studying as his roommates are very loud. He is interested in social media and checks them multiple times a day. He works as a line cook in WSU’s dining halls and after work spends his free time playing video games and scrolling through TikTok.
James Scott , WSU Dining Hall Cook
Phase II: Brainstorming
Starting the Design
Understanding the Needs:
-
Target audience: College students with strong tech knowledge.
-
Goals: Modernize the website while balancing focus on coffee and the new "4 B's" brand (Breakfast, Burgers, BBQ, Brews).
Striking a Balance:
-
Modern design: Visually appealing, user-friendly website reflecting current trends.
-
Clear information: Prioritize information relevant to college students, showcasing both coffee and the 4 B's menu.
-
Interactive features: Consider online ordering, engaging menus, and social media integration.
Maintaining Coffee Legacy:
-
Dedicated section: Showcase Zoe's coffee history, highlighting unique blends and traditions.
-
Visual storytelling: Use high-quality images and narratives to connect with the audience and preserve the brand story.
-
Coffee promotions: Offer exclusive coffee deals to maintain customer loyalty.
Promoting the 4 B's:
-
Dedicated menu page: Feature the 4 B's with clear descriptions and high-quality food photography.
-
Marketing campaigns: Utilize social media and other channels to promote the new menu items, appealing to college students.
The website revamp will cater to the tech-savvy audience while balancing Zoe's coffee heritage with the exciting 4 B's brand.
COLOR PALETTE
#937266
#242424
#1C110D
#FFFFFF
H3
Raleway
old style guide
CURRENT STYLE GUIDE
The current website's aesthetic uses a deep and rich brown color palette, consistent with its focus on coffee and the interior of the building. The new design continues the same modern aesthetic of the current website while incorporating the business's new brand. We provided a content-rich landing page with high imagery that is interactive, clear menu pages that match the aesthetic of the website, and a geo-tracking page for the food truck.
CURRENT STYLE GUIDE
-
Content-rich home page that is simple and easy to use
-
High imagery
-
Interactive images/text that redirect users to said site
-
Redirecting link to separate online ordering website by Heartland
BUTTON
BTN Primary Default
BTN Primary Hover
INPUT
REASON FOR DESIGN
Focuses on the coffee aspect with a modern design rather than the previous location’s “rustic” environment.
“I used deep, rich browns to match their exclusive, high-quality coffee while keeping consistent with the restaurant’s dark chestnut interior.” - Isitt
TYPOGRAPHY
H1
Lora
H2
Lora
P1
San Serif
P2
San Serif
#900000
#2D2D2D
BUTTON
BTN Primary Default
INPUT
style guide
FEATURES
REASONS FOR DESIGN
-
Content-rich home page that is simple and easy to use
-
High imagery
-
Interactive images/text that redirect users to said site
-
Carousel imagery
-
Set menu page and provided clickable link to separate ordering out website by Heartland
-
May have Geo-tracking for food truck
Keeping the same aesthetic of the current website with similar color palette and modern design of the website while focusing more on the restaurant’s new slogan with the 4 B’s (Breakfast, Burgers, BBQ, and Brews) and less on the coffee aesthetic of the current website.
COLOR PALETTE
#1C110D
#FFFFFF
BTN Primary Carousal Arrows
TYPOGRAPHY
H1
Raleway - 96
H2
Raleway - 72
H3
Raleway - 48
P2
P1
Lora - 24
Lora - 18
PROCESS
We created a low-fidelity prototype that’s based on the Information Architecture to show the user flow when navigating through the app, from searching for a musician to contacting the musician to using the in-app messaging.
Phase III:
Final Design
CURRENT LANDING PAGE
The design of the old landing page is simple and rich with content for easy access. We want to keep such element in the new website
NEW WIREFRAME DESIGN
Working on Figma, we created low-fidelity wireframes to organize the layout that is content-rich yet simple to use.
NEW LANDING PAGE
The main difference between the old website and our new one is the aiding more content towards food rather than coffee only as that is the request of our client.
Similar Projects
