Ducks, a family-owned restaurant in San Gabriel Valley, seeks a modernized website to elevate its online presence, particularly renowned for its katsudon and curry rice.
The objectives involve updating the outdated brand identity, crafting an engaging website, and establishing a design system for future replication. By revamping the website, Ducks aims to attract more customers and effectively showcase its specialties while ensuring a seamless user experience.
The current Ducks website operates as a Google Business site, with minimal emphasis on design and marketing. Through the redesign, my objective is to tackle these shortcomings and prioritize elements that will benefit both the business and its hungry customers.
Overall, several key findings were identified from the audit:
Low color contrast of 2.48:1 between #88B06A and #FFFFFF throughout the website.
Links to the restaurant logo and email are non-functional.
The phrase "Read More" lacks context; "Read More Reviews" would provide clearer direction.
None of the images on the website include alternative text for accessibility purposes.
The branding maintains level of consistency.
Content is effectively organized into distinct sections.
The design maintains a visually clean aesthetic.
The webpage seamlessly adapts to various screen sizes with responsive design.
The primary call-to-action ("Place Order") is prominently displayed in the Hero section for clear user engagement.
Email placements appear awkward and disjointed.
The text that should be formatted as an H2 is currently placed in the body, requiring adjustment.
H2 headers need to be enlarged for better hierarchy and readability.
The logo image appears cropped or cut off, requiring adjustment for full visibility.
Gallery images lack vibrancy and fail to captivate, necessitating enhancements to evoke excitement and engagement.
It's redundant to feature two distinct header navigations on this site (both hamburger and standard).
The "Place Order" and "View Menu" buttons currently direct users to the same page, creating redundancy in navigation.
Content stacks naturally at smaller breaking points
The navigation shifts to the bottom of the phone screen, which contrasts with its positioning at other breakpoints, creating inconsistency.
“Place Order” button appears clearly in the CTA and in the navigation
Clean, organized layout of the menu
Ordering process is streamline
User clicks on food, and a popup appears prompting the user to choose any modifications or add ons to their selection and to add it to their cart.
Item is sent to the cart in the navigation, and a pop up appears under it showing the current order and an option to check out.
User can continue as a ToastLab member or as a guest without having to make an account
User fills out payment information and is given option for tips before the final option, “Place Order”
A confirmation page signals to the user that the order is sent to the restaurant
There are no images for the whole menu. Images for entrees would entice visually stimulate the user
Additional subcategories would create less confusion on some items and more organization. The drinks section could be split up into teas, coffees, sodas, and alcohol, for example.
The shift in branding between websites can be abrupt for users.
To order online, Ducks uses the third-party ordering platform service, ToastLab.
Despite the cost benefit and ease-of-mind that comes with not having to run a completely proprietary system, I think it would be enjoyable to explore the possibility of Duck’s having its own integrated ordering page that could possibly be “powered” by ToastLab.
This would keep the user from completely leaving the website in a new window, keeping the process more streamline for users utilizing assistive technology.
Expand or modify the color palette to improve accessibility.
Rebrand and refine the logo for a cleaner and more cohesive visual identity.
Begin site mapping to streamline navigation and simplify the user experience.
The selected competitors for Ducks restaurant was determined by distance, size of the business, and the type of food served. A similarity between all three of these competitors is that they utilize a third party service for online ordering and their CTA redirects the user to the third-party site. While it is cost efficient, I would like to experiment with the idea of integrating the checkout process within the same site so there is no confusion for opening a new site.
Tokyo Chick
Champion's Curry
Ai Authentic Japanese
Tokyo Chick is a Japanese fried chicken restaurant that is small and local to Pasadena. It is in vicinity of Ducks Restaurant, and one of its major marketable trait of this business is that it is a small and locally owned.
This idea is not entirely communicated by the modern, black color palette that contrasts the whimsical logo and overall personality of the actual business. If we bring in the identity used in their ads and on their Yelp, we bring in the comfort feeling of a small business. Another advantage they have is the gift card options. However, the popup is intrusive when you open the webpage which makes it not user friendly.
Japanese Curry is another local restaurant in Pasadena, and its website is immediately not accessible due to yellow and white contrast. The navigation takes up a large amount of the screen when you scroll, but the layout of the page is organized.
The major advantage of this site is that the restaurant paid for the accessibility widget, UserWay, which provides tools for all sorts of needs. However, the service is quite expensive, so it would be beneficial for the website to be the most accessible by default.
Ai is very similar to Ducks in the sense they both serve a variety of Japanese meals. The website itself is organized, but it is not as aesthetically pleasing as it could be.
There are also two navigation options with the hamburger menu, which is unnecessary since the navigation options are the same and the content inside could already be displayed on the page itself to avoid another step to reach that information.
%202.png)
%201.png)
Margins between elements are determined based on hierarchy. Three different gaps are used:
regularGap (50px): For instances like the distance between H2 and paragraphs
smallGap (25px): For instances like spacing between buttons
miniGap (15px): For instances like spacing between paragraphs
%20(1)%201.png)
Local variables will be available to navigate the spacing and color options in this design system.
.png)
%20(M).png)
