Chinese Cuisine Website UI/UX Design

Designed a visually immersive and modern Chinese Cuisine Restaurant Website focused on showcasing authentic dishes, recipes, and culinary storytelling through an engaging user experience. The interface features a dark aesthetic with warm accent colors to reflect the richness and elegance of Chinese cuisine while maintaining strong visual hierarchy and readability.

The project includes:

Homepage Design with featured dishes, chef introductions, and brand storytelling
Recipe Detail Pages for dishes like Fried Rice and Dan Dan Noodles
Ingredient Mapping & Cooking Steps Sections for easy recipe understanding
Responsive Layout Structure with clean sectioning and balanced spacing
Call-to-Action Buttons encouraging recipe exploration and engagement
Design Skills Highlighted
UI/UX Design
Visual Hierarchy
Typography Selection
Color Theory & Branding
Layout Composition
User-Centered Interface Design
Figma/Web Design Prototyping

This application appears to be a mobile grocery shopping platform designed for a seamless user experience, from product discovery to final checkout. Based on the provided screens, here is a detailed description of the app’s flow and features:

User Experience & Interface
The app utilizes a clean, modern aesthetic with a consistent green and white color palette, signifying freshness and health. High-quality imagery is used for product categories and individual listings to entice the user.

Key Features & Functionality

1. Navigation & Discovery
   Home Screen: Features a prominent search bar for quick grocery lookups, a “20% off” promotional banner, and quick-access category tabs (Fruits, Vegetables, etc.).

Product Categories: A dedicated “Categories” page organizes items into intuitive groups like Meat & Fish, Bakery, Frozen Food, and Personal Care.

Product Listings: Displays items with clear pricing (in Rs), weight/quantity details, star ratings, and “Add to Cart” buttons.

Detailed View: Users can click on a product (e.g., Alphonso Mango) to see a full description, stock status, and adjust quantities before adding to the cart.

2. Cart & Order Management
   Cart States: Includes an “Empty Cart” view with personalized recommendations (“You Might Like to Fill it With”) and an active cart view showing itemized selections, quantities, and current discounts.

Promotional Pop-ups: Targeted offers, such as Raw Organic Sidr Honey with a coupon, appear to drive conversions during the browsing process.

3. Seamless Checkout Process
   The checkout is divided into a three-step progress tracker: Check out, Payment, and Confirmation.

Order Summary: Provides a detailed breakdown including Subtotal, Delivery Fee, 5% Tax, and Cart Discounts.

Logistics: Users can select a delivery address (e.g., Johar Town, Lahore) and a specific delivery time slot.

Payment Methods: Supports Cash on Delivery and Credit/Debit Card (Visa) entry.

Order Success: A final confirmation screen provides the order number (e.g., #253698) and a “Continue Shopping” option.

4. User Profile
   Personalization: A dedicated Profile section allows users to manage their Shipping Address, Notifications, Change Password, and Sign Out.