Design a modern, clean user interface (UI) mockup for a Customer Support Application available on both mobile and desktop platforms.
The interface should include the following main sections:
Issue Reporting Form:
Dropdown to select issue type (Internet, Phone, TV, etc.)
Multiline text area to describe the issue in detail
Field for address/location (with optional auto-location detection)
Contact information fields (Phone Number, Email Address)
Optional image upload field to attach a photo or screenshot of the issue
A large "Submit Report" button
Issue Tracking:
List of current and past issue reports
Each item shows the issue title and current status:
"Received", "Under Review", "Assigned to Technician", "Awaiting Resolution", "Resolved"
(Optional) Estimated resolution time or contact technician button
Contact Info Section:
Display a call center phone number or other contact channels
Customer Satisfaction Survey (Optional):
A small section for submitting feedback after an issue is resolved
Use a white background with soft shadows, clean fonts, and blue accent colors. Layout should be responsive and intuitive, with separate visual styles for desktop and mobile if possible.
I've created a modern, clean UI for a Customer Support Application that works on both mobile and desktop platforms. The design features a white background with soft shadows, clean fonts, and blue accent colors as requested.
Issue Reporting Form with:
Issue Tracking List showing:
Contact Info Section with:
Customer Satisfaction Survey with:
The layout is fully responsive, adapting to both mobile and desktop views. On smaller screens, the content reorganizes for better mobile usability while maintaining all functionality.
In the top-right corner of the interface, include a clean and minimal user profile icon or avatar placeholder.
This icon should be circular, subtle, and easily recognizable.
When clicked, it could potentially show a dropdown with account-related actions (e.g., "Profile", "Settings", "Logout") — but only the icon itself should be visible in the mockup.
I've added a clean, minimal user profile icon to the top-right corner of the interface as requested. The avatar is:
The avatar uses a placeholder image and has a fallback "U" character if the image fails to load. It's designed to be clickable, and in a real implementation, it would show a dropdown with account-related actions like "Profile", "Settings", and "Logout" when clicked.
The design maintains the clean aesthetic of the overall interface while providing a clear visual indicator of the user account functionality. The subtle hover effect (a light blue ring) provides feedback when users interact with it, enhancing the usability of the interface.