Bucket Crab and Crawfish (UI project)
Restaurant Website Makes a Useful Marketing Tool
My Role
My role in the project is both UI and UX with more emphasize on UI. I gather data from the waiters on what often been asked and clarified. The footages published on the page is also captured by me. I am the sole designer working on this project.
Project Overview
The Bucket Crab and Crawfish is a cajun seafood restaurant in Ontario, California. The restaurant have been in business for about 10 Years but been struggling to reach the same level of profits like before the pandemic hits.
​
The goal is to use the website as a marketing tool that will be put to use to attract newcomers coming to the restaurants. I got hired to design their official website and make it more appealing and professional. I spent 2 weeks working on the project .
Our Approach
1. Gather customer insights from the staff by interviewing
2. Rate customers needs and concerns
3. Drawing Sitemap
4. Sketches and Build Lo-fi prototypes
5. Build Hi-fi Prototypes
I struggled ….
Doing research on people who use TikTok, studying their decisions on why post, why not post, why dance, why not dance?
I got asked along with one of my developer friend to work on this project. While working on a team with multiple designers, feedbacks are constantly exchanging between members to make sure that the design meet the design rules and principles. While working by myself I can only receive the feedbacks from the owner (the stakeholder) and the developer. It might be a satisfied product in their eyes but might not be the optimal solution from a designer perspectives.
Researching and Strategizing
Kick off & gathering data from my coworkers and myself.
1. Would building a website is the right direction?
Because of the goal of the project is just to attract more new people to come try our the food we have to make sure that building a website is the right tool.
By doing quick research on the traffic of the the existing website. Turns out the website generates roughly 120 visits a day and could be up to 400 on the weekend and holiday. With the right strategy, these visitors can actually be turned into customers
2. Evaluate the customers’ needs
I talked with the servers to gather insights on the customers’ favorites as well as their concerns. We will focus on showcasing the looks and the things that our customers most like and dedicate sections to answer the customers most asked questions. Because the restaurant has been in business for a while, the data is reliable enough to base the design decisions on.
Drawing sitemap:
Methodology: Interviews, Surveys, Competitive Analysis
UX deliverables : Personas, Customer Journey, Wireframes
People do not spend a lot of time going through restaurants’ websites. So we need to dedicate homepage to showcase the things that we most proud of, food and the views, things that convincing enough for a customer to make the decisions to visit the establishment. Before I jump into designing, I had meetings with the restaurant owner to discuss and put together a sitemap , made any necessary adjustments on the information arrangements before I started sketching out the designs.
Sketch of sitemap for the restaurant website
Low and Hi-fi Prototypes
Feedbacks were gathered after the wireframes were built. Final prototypes are then designed based upon the feedbacks.
The sketches were tested with 3 customers before I started using Figma and Adobe AI to design the hi-fi prototypes. After adjusting the layout according to them, the sketch then being presented to the stakeholder. Following the approvals are the high fidelity design on Laptop web browser. The designs were based upon the existing brand guidelines with red and white to be the primary colors.
Sketches of the layouts of homepage and menu page
Style Guide of the Bucket Crab and Crawfish Ontario
HIGH FIDELITY PROTOTYPES
MENU PAGE
HOMEPAGE
INFOS PAGE
Outcomes and Lessons
XXXX - PROJECT IN PROGRESS