Dashboard Design for Health Platform
For this task, I have designed a desktop version of a medical dashboard tailored for doctors who need to manage patient data, schedule appointments, and stay up-to-date with industry news and hospital announcements.
Homepage
The homepage provides essential information and ensures easy navigation right from the start. It starts with a welcoming greeting message and includes a search bar for quick access to hospital information. A profile menu allows users to access personal settings and manage their accounts.
- Recent Health News: Latest medical developments.
- Hospital Announcements: Key updates and policy changes.
- Patient Visit Frequency: A bar chart displaying the number of patient visits each month, with the busiest month highlighted.
Patient Profile
The Patient Profile is designed for efficient access to patient information and the tools a doctor needs to manage ongoing care, such as scheduling appointments and prescribing a treatment. The menu offers several options, including assigning a specialist to the patient, generating reports, printing or sharing the profile, and marking the profile as a priority.
- Patient information: This section includes the patient's ID number, name, surname, date of birth, weight, and height.
- Medical History: These sections provide detailed information about the patient's medical background. Doctors can refer to this information to better understand the ongoing health issue and make informed decisions.
- Calendar: The calendar displays upcoming appointments, highlighting important future visits.
- Prescribed Treatment: This section shows the current prescribed treatment for quick reference.
Action Buttons
- Round Button with Calendar Icon: This button lets doctors set up new appointments.
- Round Button with Message Icon: This button lets the doctor send messages to the patient.
- Round Button with Left Arrow Icon: This button allows doctors to browse patient profiles alphabetically.
- Call-to-Action (CTA) Button ("Prescribe a New Treatment"): This is a large button designated for prescribing new treatments.
- Round Button with Right Arrow Icon: This button allows doctors to browse patient profiles in reversed alphabetical order.
- Round Download Button: Doctors can use this button to download a patient's profile.
- Round Button with Trash Icon: This button permanently deletes a patient's profile. It is colored #F66551 to draw attention and emphasize its importance.
Neumorphism
I picked the neumorphism style design for its subtle depth and soft visual cues. This technique improves the user experience by making the interface feel tactile and intuitive. Each button, card, and field has a slight raised or inset effect.
Reviews
2 reviews
Hey Antonija,
Good job with the color palette, it’s visually cohesive and aligns well with the overall theme. Although the color style of the component in the lower right corner seems inconsistent with the rest of the interface. It might be worth revisiting to ensure a unified look. The illustration is also thoughtfully done; it adds a welcoming tone to the interface. However, I might reconsider its use since the focus should ideally be on the dashboard's information that users rely on throughout their workday.
I appreciate your thought process behind using neomorphism in this design. It shows that you're experimenting with different visual styles, which is great. However, I would suggest reconsidering neomorphism for a desktop application. Here are some reasons why:
Accessibility: Neomorphism relies heavily on soft shadows and subtle extrusions, which often lack sufficient contrast. This can negatively impact accessibility, especially for users with visual impairments, as it becomes harder to distinguish between interactive and non-interactive elements.
Usability: On desktop applications, users interact through pointers or mice, meaning the visual cues for interactivity need to be more explicit. The subtle contrasts used in neomorphism make it challenging to clearly identify buttons and interactable components, which can lead to usability issues.
I like the details included in the patient's profile, you could consider elements that you used here placing them in the dashboard as well. For example a calendar, or all patients list for quick access. This would reduce navigation time, streamline the workflow, and ensure that key information is accessible without additional clicks.
Well Done Antonija!
Few Critiques here:
1. Neomorphism Execution
For a first attempt at neomorphism, this design is not bad! However, the harsh shadows detract from realism, making the interface feel unnatural. Softening the shadows and balancing light/dark contrast can help achieve a more polished, user-friendly aesthetic.
2. Hierarchy & Readability Issues
There’s a clear hierarchy issue with the typography—titles do not command enough visual weight in relation to their subtext. Since these sections are meant for quick scanning, increasing the title size or adjusting font weight could improve readability.
3. Card Utilization & Content Strategy
If the Main feature card with the ilustrations remains static, it may not be fully utilizing its prime real estate. Consider making this an interactive or dynamic element that updates based on relevant data. Otherwise, its size may not be justified compared to other sections.
4. Accessibility Considerations
Some elements, such as text and icon contrast, are difficult to see. Neomorphic designs inherently pose accessibility challenges, so ensuring sufficient contrast ratios (especially for smaller UI elements) is crucial.
5. Spacing & Layout Balance
The search bar and profile icon alignment could be more visually balanced. There’s a slight misalignment between elements, which affects the overall flow of the header. Ensuring consistent padding and alignment can refine the design further.
Overall Suggestions for Improvement:
Refine neomorphic shadows to avoid harsh contrasts.
Improve text hierarchy for better scanning efficiency.
Ensure key UI elements remain accessible with proper contrast.
Optimize card content for interactivity or more relevant data presentation.
Align UI elements properly to maintain a clean, structured layout.
You might also like
Ithnain Management System
Jeel app website wireframes
2 PAY
Visit Sri Lanka Mobile App
Design Workshop Plan
ShopUs Microcopy
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
